Loading...
displayプロパティで表示方法を切り替えよう

displayプロパティで表示方法を切り替えよう

公開
2018.08.18
更新
2018.10.29
  • 講座

  • CSS

本講座ではdisplayプロパティで表示方法を切り替える方法を見ていきましょう。

displayプロパティと値の種類

文章の意味合い的にはインライン要素が適している。でも表示はブロックレベル要素のように幅などを持たせて調整したい。
ということは多々あります。

"pタグを使用して文章を入力していたけど、このemタグだけは強調して1行で表示したい。"

といった具合ですね。

その逆に、
ブロックレベル要素だけどインライン要素のように回り込ませて表示したい。
ということもあるでしょう。

"liタグを使用してリスト表示したけど、単純なテキストリンクとして横並びで表示したい。"

なんて具合ですね。

これらを実現するのがCSSのdisplayプロパティです。

本講座ではdisplayプロパティに設定できる値のうち、以下の3つに絞って見ていきたいと思います。

  • block
  • inline
  • inline-block

先に以下のHTMLを任意のファイル名で保存しておきましょう。

<!doctype html>
<html lang="ja">
<head>
  <title>CSSにおけるインライン要素とブロックレベル要素</title>
  <!-- CSS記述場所 -->
</head>
<body>
  <!-- HTML記述場所 -->
</body>
</html>

display: block;

先に挙げた "pタグを使用して文章を記入していたけど、このemタグだけは1行で強調して表示したい。"という場面で考えてみましょう。
インライン要素であるemタグををブロックレベル要素に変えていきます。

「HTML記述場所」のコメントを消して以下のコードを追加します。

<p>
  文章を入力しています。入力していたら<em>強調したい文字列</em>が出てきました。
</p>

表示を確認しておきましょう。

インライン要素の表示

「強調したい文字列」の前後の文字列はまだ回り込んでいますね。
インライン要素として表示されています。

では次に「CSS記述場所」のコメントを消して以下のコードを追加します。

<style>
  .emphasis {
    display: block;
    border: solid 2px green;
  }
</style>

emタグにこのCSSを当てて表示をしてみましょう。

<em class="emphasis">強調したい文字列</em>

CSSでブロックレベル要素

ブロックレベル要素のように横幅いっぱいに伸びました。

display: inline;

先に挙げた"liタグを使用してリスト表示したけど、単純なテキストリンクとして横並びで表示したい。"という場面で考えてみましょう。
ブロックレベル要素であるliタグをインライン要素に変えていきます。

HTMLを以下のように変更します。

<ul>
  <li><a href="dummy_path">メニュー1</a></li>
  <li><a href="dummy_path">メニュー2</a></li>
  <li><a href="dummy_path">メニュー3</a></li>
</ul>

表示を確認しておきましょう。

ブロックレベル要素の表示

各リンクが1行ずつ、リストで表示されていますね。

では次に、CSSを以下のように変更します。 ※

.parallelLink {
  display: inline;
  list-style: none;
}

全てのliタグにこのCSSを当てて、表示をしてみましょう。

<li class="parallelLink"><a href="dummy_path">メニュー1</a></li>
<li class="parallelLink"><a href="dummy_path">メニュー2</a></li>
<li class="parallelLink"><a href="dummy_path">メニュー3</a></li>

CSSでインライン要素

インライン要素のように、他のインライン要素が回り込むようになりました。


list-style: none;はリスト表示の「・」を消すCSSです

display: inline-block;

display: inline-block;は、ブロックレベル要素のような装飾が可能でありながら、インライン要素のように振る舞う表示方法です。
実際に見ていきましょう。

HTML・CSSはdisplay: inline;で使ったリスト表示のものをそのまま使っていきます。
コードと表示をもう一度確認しておきましょう。

  • HTML
<ul>
  <li class="parallelLink"><a href="dummy_path">メニュー1</a></li>
  <li class="parallelLink"><a href="dummy_path">メニュー2</a></li>
  <li class="parallelLink"><a href="dummy_path">メニュー3</a></li>
</ul>
  • CSS
.parallelLink {
  display: inline;
  list-style: none;
}

CSSでインライン要素

ではまず、インライン要素には効かないwidthプロパティを追加してみます。
わかりやすいようにborderプロパティで境界線も追加しておきましょう。

.parallelLink {
  display: inline;
  width: 200px;
  border: solid 2px orange;
  list-style: none;
}

表示を確認してみます。

widthの効かないインライン要素

境界線が文字列の周りにぴったりと引かれていて、横幅を設定するwidthプロパティは効いていないことがわかりますね。

では次に、displayプロパティを消して、ブロックレベル要素に戻して表示を確認してみましょう。

.parallelLink {
  width: 200px;
  border: solid 2px orange;
  list-style: none;
}

自動改行されるブロックレベル要素

今度は境界線が指定した長さまで伸びていて、widthプロパティが効いていることがわかります。
ただしブロックレベル要素に戻ったため、自動改行されて1行ずつ表示されている状態です。

では、これにdisplay: inline-block;を指定してみましょう。

.parallelLink {
  display: inline-block;
  width: 200px;
  border: solid 2px orange;
  list-style: none;
}

inline-blockの表示

widthプロパティは効いていて、更に他の要素が回り込んでいます。

このようにdisplay: inline-block;は、ブロックレベル要素のような装飾が可能でありながら、インライン要素のように振る舞うことができる便利な表示方法です。

まとめ

本講座では

  • display: inline;
  • display: block;
  • display: inline-block;

について学びました。

displayプロパティを使いこなせば、正しい文章構造を保ちながらもリッチな表現が可能になります。
まずはインライン要素・ブロックレベル要素の特徴をしっかりと掴みながら、inlineblockinline-blockの3つの値を使いこなしてみてください!

次の記事

これまでの記事

  • ふむふむ・・・

イア

イア(er)
独学する美少女エンジニア

当サイトのナビゲーターであり、あなたと一緒に勉強する同志でもあります。
今はナビゲーターとして未熟のため、ひたすら勉強をさせています。

隠します!