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

CSSのdisplay:inline-blockでインラインブロック表示を実現する方法

CSSの display プロパティに「inline-block」を指定すると、その要素はインラインレベルのブロックコンテナとして表示されます。これにより、テキストの流れの中でインライン要素のように横に並びながら、幅（width）や高さ（height）、パディングなど、ブロック要素特有のスタイル指定も行えるようになります。

display:inline-blockの基本例

まずは基本的な使い方を見てみましょう。以下の例では、p要素に対して「inline-block」を適用しています。

<!DOCTYPE html>
<html>
<head>
<style>
p {
   background-color: orange;
   color: white;
}
p.demo {
   display: inline-block;
}
</style>
</head>
<body>
<h1>学生の成績発表</h1>
<div>
MCAコース学生の結果は <p class="demo">2019年12月20日</p> に発表されます。当日の午後8時にウェブサイトをご確認ください。
</div>
</body>
</html>

実行結果

CSSのdisplay:inline-blockでインラインブロック表示を実現する方法

オレンジ色の背景を持つ日付部分が、前後のテキストと同じ行内に自然に配置されていることがわかります。通常のブロック要素であれば前後に改行が入りますが、inline-blockを指定することで文中に埋め込むようなレイアウトが可能になります。

display:noneとの違いを比較する例

次の例では、「display: none」と「display: inline-block」の挙動の違いを確認できます。「none」を指定した要素は画面上から完全に非表示となり、スペースも占有しません。一方、「inline-block」を指定した要素は表示され、周囲のテキストと同じ行に配置されます。

<!DOCTYPE html>
<html>
<head>
<style>
p {
   background-color: orange;
   color: white;
}
p.demo1 {
   display: none;
}
p.demo2 {
   display: inline-block;
}
</style>
</head>
<body>
<h1>試合情報</h1>
<div>
試合は <p class="demo1">午前9時</p> 午前10時に開始されます。
</div>
<div>
試合は <p class="demo2">午後5時</p> に終了予定です。
</div>
</body>
</html>

実行結果

CSSのdisplay:inline-blockでインラインブロック表示を実現する方法

1つ目のdiv内にある「午前9時」は display: none のため表示されず、2つ目のdiv内の「午後5時」だけがinline-blockとして行内に表示されています。

inline-blockの主な特徴

  • インライン要素と同様に、要素が横方向に並ぶ
  • widthやheightによるサイズ指定が有効になる
  • marginやpaddingが上下左右すべての方向に反映される
  • vertical-alignプロパティで縦位置を調整できる

このように、inline-blockはナビゲーションメニューやボタンの横並びレイアウトなど、さまざまな場面で活用できる便利な表示モードです。

  1. CSSを使って画像スプライト（Image Sprite）からアイコンを表示する方法

    画像スプライト（Image Sprite）とは 画像スプライトとは、複数の小さな画像を1枚の大きな画像ファイルにまとめたものです。最大のメリットは、HTTPリクエストの回数を減らせることにあります。ブラウザがサーバーへ送るリクエスト数が減るほど、サイトの読み込み時間が短縮され、ページの表示速度が向上します。 CSSでスプライト画像からアイコンを表示する仕組み CSSでは、background-positionプロパティを調整することで、1枚のスプライト画像の中から目的のアイコン部分だけを切り出して表示できます。基本的な流れは以下の通りです。 backgroundプロパティでスプライト画像

  2. CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

    HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ