CSSのインラインブロック要素：display プロパティで要素の振る舞いを変える

レイアウトの基本に続いて、「インラインブロック要素」を学びました。要素のタイプを自由に変更できる強力な機能です。

複数のセレクタを指定

カンマ , で区切ることで、複数のセレクタに同じスタイルを適用できます。

h1, h2, h3 {
  color: #333;
  font-family: Arial;
}

これは以下と同じ意味です：

h1 {
  color: #333;
  font-family: Arial;
}

h2 {
  color: #333;
  font-family: Arial;
}

h3 {
  color: #333;
  font-family: Arial;
}

カンマで区切ることで、コードを短くできます。

インラインブロック要素とは

インラインブロック要素は、インライン要素とブロック要素の特徴を併せ持つ要素です。

3つの要素タイプの違い

タイプ改行幅・高さ指定横並び
ブロックありできるできない
インラインなしできないできる
インラインブロックなしできるできる

インラインブロック要素なら：

  • 横並びにできる（改行なし）
  • 幅と高さを指定できる

displayプロパティで変更可能

display プロパティを使うことで、要素のタイプを変更できます。

/* ブロック要素に変更 */
display: block;

/* インラインブロック要素に変更 */
display: inline-block;

/* インライン要素に変更 */
display: inline;

実用例：リンクボタンを横並びに

<a href="#" class="btn">ボタン1</a>
<a href="#" class="btn">ボタン2</a>
<a href="#" class="btn">ボタン3</a>

.btn {
  display: inline-block; /* インラインブロックに変更 */
  width: 150px;          /* 幅を指定できる */
  padding: 10px;
  text-align: center;
  background-color: #3498db;
  color: white;
}

<a> 要素は本来インライン要素ですが、display: inline-block にすることで、幅を指定しつつ横並びにできます。

複数のクラスを指定

クラス名を半角スペースで区切ることで、複数のクラスを指定できます。

<div class="box blue">ボックス1</div>
<div class="box red">ボックス2</div>

.box {
  width: 200px;
  height: 100px;
  display: inline-block;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

class="box blue" は、box クラスと blue クラスの両方のスタイルが適用されます。

:hover 疑似クラス

:hover は、カーソルが乗ったときのCSSを指定できます。

.btn:hover {
  background-color: #2980b9;
}

<a href="#" class="btn">ボタン</a>

このボタンにマウスカーソルを乗せると、背景色が変わります。

実用例：ボタンのホバー効果

.btn {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  transition: 0.3s; /* 滑らかに変化 */
}

.btn:hover {
  background-color: #2980b9;
  transform: scale(1.05); /* 少し大きくなる */
}

中央揃えの2つの方法

要素を中央に配置する方法は、要素のタイプによって異なります。

margin: 0 auto – ブロック要素の中央揃え

広い範囲を囲むブロック要素を中央に配置します。

.container {
  width: 800px;
  margin: 0 auto; /* 左右のマージンを自動で均等に */
}

<div class="container">
  <h1>コンテンツ</h1>
  <p>本文...</p>
</div>

text-align: center – 要素内のテキストを中央揃え

テキストやボタンのようなインライン要素、インラインブロック要素を中央に配置します。

.header {
  text-align: center; /* 子要素を中央揃え */
}

<div class="header">
  <h1>タイトル</h1>        <!-- 中央揃えになる -->
  <a href="#" class="btn">ボタン</a> <!-- 中央揃えになる -->
</div>

使い分けのポイント

/* ブロック要素自体を中央に */
.box {
  width: 600px;
  margin: 0 auto;
}

/* 要素の中身（テキストや子要素）を中央に */
.box {
  text-align: center;
}

実用例：ナビゲーションメニュー

<nav class="nav">
  <a href="#" class="nav-item">ホーム</a>
  <a href="#" class="nav-item">サービス</a>
  <a href="#" class="nav-item">お問い合わせ</a>
</nav>

.nav {
  text-align: center;       /* メニューを中央に */
  background-color: #333;
}

.nav-item {
  display: inline-block;    /* 横並び */
  padding: 15px 20px;
  color: white;
  text-decoration: none;
}

.nav-item:hover {
  background-color: #555;   /* ホバー時の色変更 */
}

今日の学びのポイント

  • 複数セレクタ: カンマ , で区切る
  • インラインブロック要素: インライン要素とブロック要素の特徴を併せ持つ
  • display プロパティ: 要素タイプを変更
    • block: ブロック要素
    • inline-block: インラインブロック要素
    • inline: インライン要素
  • 複数クラス: 半角スペースで区切る
  • :hover: カーソルが乗ったときのスタイル
  • 中央揃え:
    • margin: 0 auto → ブロック要素自体を中央に
    • text-align: center → 要素の中身を中央に

display プロパティと中央揃えをマスターすることで、柔軟なレイアウトが可能になります。

コメント