CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使って縦並びのボタングループを作成する方法

Webページのナビゲーションやメニューなどでは、ボタンを縦方向に一列に並べた「垂直ボタングループ」がよく使われます。CSSを活用すれば、シンプルなマークアップだけで美しい縦並びボタンを実現できます。

垂直ボタングループの基本

ポイントは、ボタンに display: block; を指定することです。通常、<button> 要素はインラインブロックとして扱われるため横に並びますが、display: block; を設定すると各ボタンが幅いっぱいに広がり、自動的に縦方向へ積み重なります。

実装例

以下のコードを実行すると、オレンジ色の背景に緑のボーダーを持つ、縦並びのボタングループが表示されます。

<!DOCTYPE html>
<html>
<head>
  <style>
    .mybtn .button {
      background-color: orange;
      border: 1px solid green;
      width: 120px;
      color: white;
      font-size: 14px;
      padding: 10px;
      text-align: center;
      text-decoration: none;
      display: block;
    }
  </style>
</head>
<body>
  <div class = "mybtn">
    <button class = "button">Result</button>
    <button class = "button">Result</button>
    <button class = "button">Result</button>
    <button class = "button">Result</button>
  </div>
</body>
</html>

コードの解説

  • background-color / border: ボタンの背景色と枠線を指定し、視覚的にグループ感を出しています。
  • width: 各ボタンの幅を 120px に統一することで、整列した見た目になります。
  • padding / font-size: クリックしやすい余白と読みやすい文字サイズを設定しています。
  • display: block; この指定により、ボタンが親要素の幅に沿って縦に積み重なります。垂直ボタングループを実現する最も重要なプロパティです。

応用のヒント

ボタン同士の間隔を空けたい場合は margin-bottom を追加したり、ホバー時に色を変える :hover 疑似クラスを組み合わせると、より使いやすいインターフェースになります。また、<a> タグを使う場合も同じスタイルでナビゲーションメニューとして応用できます。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで垂直線（縦線）を作成する方法を解説！初心者向けにわかりやすく紹介

    CSSで垂直線（縦線）を作成したい場合、最もシンプルで一般的な方法は border-left プロパティを使うことです。要素の左側に境界線を表示し、height で高さを指定するだけで、自由な長さの垂直線を簡単に描画できます。 それでは、実際のコード例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>