フォームって普通のデザインだとつまらないですよね。もっと個性的なデザインにできないんですか？
できるよ！今回はレトロゲームの世界観を取り入れた、ドラゴンクエスト風のラジオボタンを作ってみよう。懐かしいRPGのコマンドウィンドウみたいなデザインにするよ。
ゲームのUIをWebサイトに応用するんですね。面白そう！
ドラゴンクエスト風ラジオボタン
RPGのコマンド選択画面を再現した、白い枠線と三角形のチェックマークが特徴的なラジオボタンです。
<div class="container">
<div class="radio-group" data-title="らじお">
<div class="radio-area">
<input type="radio" name="rdo_bg" id="rdobg1" checked>
<label for="rdobg1">たたかう</label>
</div>
<div class="radio-area">
<input type="radio" name="rdo_bg" id="rdobg2">
<label for="rdobg2">にげる</label>
</div>
<div class="radio-area">
<input type="radio" name="rdo_bg" id="rdobg3">
<label for="rdobg3">ぼうぎょ</label>
</div>
<div class="radio-area">
<input type="radio" name="rdo_bg" id="rdobg4">
<label for="rdobg4">どうぐ</label>
</div>
</div>
</div>.container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #000000;
}
.radio-group {
position: relative;
padding: 1.5rem 1rem 0.5rem 1rem;
border-radius: 5px;
border: 3px solid #fff;
color: #fff;
font-family: 'DotGothic16', sans-serif;
font-size: 20px;
font-weight: bold;
z-index: 0;
}
.radio-group::before {
position: absolute;
top: -0.6rem;
left: 50%;
transform: translateX(-50%);
background-color: #000;
content: attr(data-title);
}
.radio-area {
margin-bottom: 0.5rem;
}
.radio-area input[type=radio] {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: .3s;
}
.radio-area label {
cursor: pointer;
}
.radio-area input[type=radio]:checked::before {
position: absolute;
top: -.4rem;
left: -0.2rem;
width: 0;
height: 0;
border: solid 7px transparent;
border-left-color: #fff;
margin-top: -7px;
content: '';
}AIへのプロンプト例
以下のようなプロンプトをAIに送信します：
ドラゴンクエストのコマンドウィンドウ風のラジオボタンを作成してください。
### 全体のスタイル
- 背景は黒
- 白い枠線で囲まれたボックス
- 枠線の上部中央にタイトルを配置（data属性で管理）
- ドット調のフォント
- 白文字で表示
### ラジオボタンの仕様
- デフォルトの丸は非表示
- 選択された項目の左側に白い三角形（左向き矢印）を表示
### レイアウト
- 画面中央に配置
- 各選択肢は縦に並べる
- 選択肢同士の間に適度な余白このラジオボタンの特徴
- レトロゲーム風デザイン ドラゴンクエストのコマンドウィンドウを再現した懐かしいデザイン
- data属性の活用 タイトル部分をHTML属性で管理し、CSSで表示
- 疑似要素の三角形 borderプロパティを駆使して三角形のチェックマークを実装
- カスタムフォント ドット調のDotGothic16フォントでレトロ感を演出
- 白黒配色 シンプルな配色で視認性を確保しつつ、ゲームの世界観を表現
コードのポイント
1. data属性とattr()の活用
<!-- HTMLでタイトルを設定 -->
<div class="radio-group" data-title="らじお">/* CSSでHTMLの属性値を取得して表示 */
.radio-group::before {
position: absolute;
top: -0.6rem;
left: 50%;
transform: translateX(-50%);
background-color: #000;
content: attr(data-title); /* data-title属性の値を表示 */
}この手法のメリット:
attr(data-title)でHTML側のdata-title属性の値を取得し、疑似要素のcontentとして表示します。タイトルの変更はHTMLを編集するだけでOK。CSSを触る必要がないため、管理が簡単になります。
例えば、data-title="コマンド"に変更すれば、タイトルが「コマンド」に変わります。
2. デフォルトのラジオボタンを非表示
.radio-area input[type=radio] {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: .3s;
}appearance: noneでブラウザのデフォルトスタイルを完全に削除します。これにより、独自のデザインを自由に適用できます。
3. borderで三角形を作成
.radio-area input[type=radio]:checked::before {
position: absolute;
top: -.4rem;
left: -0.2rem;
width: 0;
height: 0;
border: solid 7px transparent;
border-left-color: #fff;
margin-top: -7px;
content: '';
}三角形作成の仕組み:
幅と高さを0にし、4方向のborderを透明にした状態で、左側だけ白色にすることで左向きの三角形を作成します。
/* 仕組みの理解 */
width: 0; /* 幅をゼロに */
height: 0; /* 高さもゼロに */
border: solid 7px transparent; /* 四方に7pxの透明なボーダー */
border-left-color: #fff; /* 左側だけ白にすると... */
/* → 左向きの三角形が完成！ */この手法は画像不要で軽量、かつサイズや色の変更も簡単です。CSSで図形を描く定番テクニックとして、様々な場面で活用できます。
4. Grid中央配置とtransformの組み合わせ
/* 親要素で画面中央に配置 */
.container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
/* タイトルを枠の上部中央に配置 */
.radio-group::before {
left: 50%;
transform: translateX(-50%);
}画面全体の中央配置:
display: gridとplace-items: centerを組み合わせることで、縦横両方向の中央配置を簡潔に実現します。
要素内の中央配置:
left: 50%で要素の左端を中央に移動させ、transform: translateX(-50%)で自分の幅の半分だけ左に戻すことで、完全な中央配置になります。この2段階の手法は、要素の幅に関係なく中央配置できる便利なテクニックです。
まとめ
borderで三角形を作るテクニック、すごいですね！この方法なら画像を使わずに形を作れるんだ。
そうだね。CSSだけで様々な図形を作れるから、軽量で管理もしやすいよ。色やサイズの変更も簡単だしね。
ゲーム風のデザインって、他のジャンルにも応用できそうですね。
その通り！今回学んだ技術は、他のテーマでも使えるよ。疑似要素やdata属性の活用、appearanceでのリセット、borderでの図形作成。これらは様々なUIデザインの基礎になるんだ。
- data属性とattr() HTMLの属性値をCSSで取得して表示する便利な手法
- appearance: none ブラウザのデフォルトスタイルを完全にリセット
- 疑似要素で図形作成 borderを使った三角形作成テクニック
- レトロフォントの活用 DotGothic16などのドット調フォントでゲーム感を演出
- position: absolute 疑似要素を自由な位置に配置
- Grid中央配置 place-items: centerで簡潔に中央配置を実現
レトロゲーム風のUIデザインは、懐かしさと個性を両立できる人気のスタイルです。基本的なCSS技術を組み合わせることで、印象的なデザインを実現できます。