2

displayプロパティの使い方まとめ

display-property

CSSで使用する「displayプロパティ」について、おさらいをかねてまとめてみました。

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

 

デモサンプル

displayプロパティ

displayプロパティは、要素の「表示形式」を指定するプロパティになります。
ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。構造的にはブロックレベル要素だけど、インライン要素として表示させたいときなどに指定します。(その逆も)

ブロックレベル要素とかインライン要素とかってなに?

ブロックレベル要素

文章の骨組みとなる要素で、見出し要素など「h1,h2,h3,h4,h5,h6,p,ul,ol,li,div,table」などがあります。要素の前後に改行が入り、ブロックが積み重なるような表示の仕方をします。

display-property-img1

【特徴】

  • 縦に要素が並んで表示される
  • 幅(width)と高さ(height)が指定できる
  • 上下左右にmarginが指定できる
  • 上下左右にpaddingが指定できる
  • text-alignは、要素の中身に適応される
  • vertical-alignは指定できない
インライン要素

ブロックレベル要素の中身として利用される要素で、「a,span,strong」などがあります。
テキストの一部として扱われるので、要素の前後には改行が入らず、横に続けて表示されます。

display-property-img2

【特徴】

  • 横に続けて表示される
  • 幅(width)高さ(height)は指定できない。幅や高さに関しては、文字列の長さや文字の大きさなど、内容物のサイズのみ。
  • 左右だけmarginを指定できる
  • 左右にpaddingを指定できる
  • text-alignを親ブロックに付けることができる
  • vertical-alignを指定できる

ブロックレベル要素をdisplay:inlineにするとどうなる?

最もポピュラーな使い方は、フッターのナビゲーションのように、リストを横並びにし、かつ画面中央揃えにしたとき。

 liはブロックレベル要素なので、そのままだと縦に並んでしまいます。liをfloatさせたところで、中央揃えにするには、ulの幅を固定してmargin: 0 auto;にしなければなりません。しかし、今回のようにリストがテキストである場合などは横幅を決めにくくなってきます。文字数や文字サイズを変更すれば横幅も変わってきてしまいます。そこで、display:inlineを指定します。liに対してdisplay: inline;を、ulに対してtext-align: center;を指定します。

そうすると、こんな風になります。

display-property-img3

インライン要素をdisplay: block;にするとどうなる?

今度は、先程と同じナビゲーションリストを縦並びにしたい場合のパターンになります。

display-property-img4

li要素で縦並びにすれば表示上は問題ありませんが、テキスト以外の部分がリンクエリアにならず、テキストの範囲内のみリンクが適用されてしまいます。これでは、ちょっと不便なのでli要素の範囲全体をリンクエリアにしたい場合はブロック要素にします。そこで、インライン要素であるa要素に対してdisplay:block;を指定します。

 そうすると下のようになります。

display-property-img5

display: inline-blockのメリット

最後にdisplay:inline-block;についてですが、これはインライン要素のように表示され、かつブロック要素のように幅と高さ、marginとpaddingが指定できるものです。これは、img要素の特徴に似ています。

【特徴】

  • 横に続けて表示される
  • 幅(width)と高さ(height)が指定できる
  • 上下左右にmarginが指定できる
  • 上下左右にpaddingが指定できる
  • text-alignを親ブロック要素に適応できる
  • vertical-alignが指定できる

ページネーションのように、項目を横に並べ、かつボタンのように幅や高さをもたせて表示することができるようになります。

 display-property-img6

ここで、vertical-alignを追加指定してみると、下のようになります。
(「2」と「4」だけサイズを変えてみる)

 display-property-img7

display: inline-blockでの注意点

display: inline-blockを利用する際に注意しなければならないことがあります。
display: inline-blockは、IE7以下の古いブラウザでは、aやspanなど、インライン要素に対してのみ対応しています。手間ではありますが、IE7以下でも問題なく表示されるように以下のように記述します。

 以上になります。


 

2 Comments

  1. displayプロパティの使い方がいまひとつ??だったため、googleして辿り着きました。
    具体的な使用例を載せていただいて、とても参考になりました!
    ありがとうございます!

    • 「yuya」さん
      コメントありがとうございます。
      知っているようで知らなかったことが結構ありますよね・・・。わたしもそんなことをおさらいしながら記事を書いていますので「yuya」さんみたいにお力になれたら本望です。これからもよろしくお願いします。

morobrand にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > displayプロパティの使い方まとめ