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

CSSのdisplay:inlineで要素をインライン表示する方法を解説

ブロックレベル要素（block）とは異なり、インライン要素は同じ行から表示が始まり、内容に必要な幅だけを占有します。本記事では、CSSの display: inline プロパティ値の使い方を、具体的なサンプルコードと出力結果をもとにわかりやすく解説します。

display: inline とは

display: inline を指定すると、その要素は行内要素として扱われます。前後のテキストや他のインライン要素と同じ行に並び、スペースが許すかぎり改行されずに横並びで配置されるのが特徴です。代表的なインライン要素には <span> や <a> などがあります。

サンプルコード1：inline と none の組み合わせ

まず、display: none で非表示にした要素と、display: inline を指定した span 要素を組み合わせた例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
span {
   background-color: orange;
   color: white;
}
p.demo {
   display: none;
}
span.demo1 {
   display: inline;
}
</style>
</head>
<body>
<h1>試合情報</h1>
<div>
試合開始時刻は <p class="demo">9AM</p> 12月20日の午前10時です。
</div>
<div>
試合終了時刻は <span class="demo1">5PM</span> 12月20日です。
</div>
</body>
</html>

出力結果

CSSのdisplay:inlineで要素をインライン表示する方法を解説

この例では、クラス「demo」を持つ p 要素は display: none により画面上から完全に非表示になります。一方、クラス「demo1」を持つ span 要素はインライン表示され、周囲のテキストと同じ行内にオレンジ色の背景で自然になじむように配置されます。

サンプルコード2：IDセレクタでinlineを指定

続いて、IDセレクタを使って span 要素に直接 display: inline を適用する例です。

<!DOCTYPE html>
<html>
<head>
<style>
span#demo {
   background-color: orange;
   color: white;
   display: inline;
}
</style>
</head>
<body>
<h1>試合情報</h1>
<div>
試合開始時刻は <span id="demo">9AM</span> 12月20日です。
</div>
</body>
</html>

出力結果

CSSのdisplay:inlineで要素をインライン表示する方法を解説

ID「demo」が付いた span 要素がインラインとして表示され、文章の流れの中で強調色付きの時刻が自然に埋め込まれていることがわかります。

まとめ

  • インライン要素は同じ行から始まり、内容に必要な幅だけを占有します。
  • display: inline を指定した要素には、width や height を設定しても反映されません。
  • 文章の途中に装飾したテキストを埋め込みたい場合などに display: inline が活用できます。
  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からは属性セ