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

CSSで全幅のブロックボタンを作成・スタイリングする方法

ブロックボタン（全幅ボタン）とは、親要素や画面の幅いっぱいに横方向へ広がるボタンのことです。ナビゲーションやフォーム、モバイル向けUIなどでよく使われるデザインパターンです。CSSでは display: block; と width: 100% を組み合わせるだけで、簡単に実装できます。

ブロックボタンの作り方

ポイントは次の2つのプロパティです。

  • display: block; … ボタンをインライン要素からブロックレベル要素に変更し、前後の要素と独立した行に配置します。
  • width: 100%; … 親要素の幅いっぱいまでボタンを引き伸ばします。

さらに padding や font-size を調整し、:hover 疑似クラスでホバー時の色変化を加えると、より使いやすいボタンになります。

コード例

以下は、CSSでブロックボタン（全幅）を作成する完全なサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.blockBtn {
    display: block;
    width: 100%;
    border: none;
    background-color: rgb(19, 0, 105);
    color: white;
    padding: 14px 28px;
    font-size: 36px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
}
.blockBtn:hover {
    background-color: rgb(132, 161, 255);
    color: black;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Block Button Example</h1>
<button class="blockBtn">Block Button</button>
</body>
</html>

出力結果

上記のコードを実行すると、画面幅いっぱいに広がった濃紺のボタンが中央に表示されます。マウスカーソルを重ねると、背景が明るい青色に変化し、文字色も黒に切り替わります。

CSSで全幅のブロックボタンを作成・スタイリングする方法

まとめ

ブロックボタンは display: block; と width: 100% の指定だけで実現できます。border: none; でデフォルトの枠線を消し、cursor: pointer; でクリック可能であることを示すのもポイントです。レスポンシブ対応が必要な場合は、メディアクエリでフォントサイズやパディングを調整すると、スマートフォンでも見やすいボタンになります。

  1. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"

  2. CSSでヘッダーにスタイルを設定する方法をサンプルコード付きで解説

    CSSを使ってページのヘッダーにスタイルを設定する方法を、実際のコード例とともに紹介します。ヘッダーはウェブサイトの「顔」となる重要な要素です。背景色・文字色・余白・文字サイズなどを工夫することで、サイト全体の印象を大きく変えることができます。 サンプルコード <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta charset="UTF-8" /> <meta name="viewport" content