どのように作成するか：ボタングループ

CSSを使って「ボタングループ」を作成する方法を学びます。

ボタングループを作成する方法

第1ステップ - HTMLを追加：

<div class="btn-group">
  <button>アップル</button>
  <button>サムスン</button>
  <button>ソニー</button>
</div>

第2ステップ - CSSを追加：

.btn-group button {
  background-color: #04AA6D; /* 緑色背景 */
  border: 1px solid green; /* 緑色フレーム */
  color: white; /* 白色テキスト */
  padding: 10px 24px; /* 少々のインsetspace */
  cursor: pointer; /* マウスカーソル/ハンドアイコン */
  float: left; /* ボタンを並べて浮動 */
}
.btn-group button:not(:last-child) {
  border-right: none; /* 双重フレームを防ぐ */
}
/* 浮動をクリア（clearfix hack） */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}
/* マウスオーバー時の背景色を追加 */
.btn-group button:hover {
  background-color: #3e8e41;
}

実際に試してみる

両端中央寄せ/全幅ボタングループ：

<!-- 三个按钮为一组 -->
<div class="btn-group" style="width:100%">
  <button style="width:33.3%">アップル</button>
  <button style="width:33.3%">サムスン</button>
  <button style="width:33.3%">ソニー</button>
</div>
<!-- 四个按钮为一组 -->
<div class="btn-group" style="width:100%">
  <button style="width:25%">アップル</button>
  <button style="width:25%">サムスン</button>
  <button style="width:25%">ソニー</button>
  <button style="width:25%">HTC</button>
</div>

実際に試してみる

関連ページ

チュートリアル：CSSボタン