「display:block;」「display:inline;」要素の表示状態を切り替える

HTMLの要素には、ブロックレベル要素とインライン要素があります。それぞれに表示状態の性質が異なりますから、場合によって使い分ける必要があります。ただ、CSSによって表示状態を変更できるので、色々なレイアウトを作ることが可能です。

まずは、ブロックレベル要素とインライン要素の違いを理解しておきましょう。

 

ブロックレベル要素

代表的なブロックレベル要素として、「h1~h6」「p」「div」「table」などがあります。それらの特徴としては、以下の通りです。

  • 縦に並ぶ
  • 幅と高さの指定ができる
  • 「margin」と「padding」を上下左右に指定できる

Webのレイアウトを考えた場合、ブロックレベル要素の特徴を理解することは大切です。

 

インライン要素

代表的なインライン要素としては、「strong」「span」「a」「img」などがあります。横幅一杯に広がるのではなく、文章の中でピンポイントで使用できる要素ですね。主な特徴は、以下の通りです。

  • 横に並ぶ
  • 幅と高さの指定は出来ない
  • 「margin」と「padding」を左右だけ指定できる

テキスト内の装飾など、スポット的に効果を与えるための要素です。利用する頻度が多いので、必ず特徴を押さえておいてください。

 

要素の表示状態を切り替える(display)

ブロックレベル要素とインライン要素の特徴を紹介しましたが、CSSで指定すればこれらの表示状態を変えることが出来ます。そこで使用するのが、「displayプロパティ」ですね。ブロックレベル要素の値に「inline」、インライン要素の値に「block」を入れることで表示状態を逆転させることが可能です。

 

ブロックレベル要素に「display: inline;」

主な使い方としては、ナビゲーションメニューを作るときですね。サイト上部にあるような横並びのメニューは、「ul」「li」のリスト要素でマークアップされています。しかし、「li」はブロックレベル要素なので、「display: inline;」とすることで横並びの表示に変えているわけですね。

【CSS】
li {display: inline;}


【HTML】
<ul>
<li class=”disin”><a href=”#”>メニュー1</a></li>
<li class=”disin”><a href=”#”>メニュー2</a></li>
<li class=”disin”><a href=”#”>メニュー3</a></li>
</ul>

通常だと「li」要素は縦並びになるはずですが、横並びの表示に変えることが出来ました。

 

インライン要素に「display: block;」

インライン要素をブロックレベル要素の表示にしたいときは、「display: block;」と指定します。使い方としては、サイドメニューのリンク表示などですね。「ul」と「li」でリストにすれば、リンクを縦に並べることが出来ます。

しかし、これだと文字をクリックしないと、リンク先へ飛べないというデメリットがあります。でも、ブロックレベル要素にすれば、文字以外をクリックしてもリンクへ飛べるようになるわけです。

【CSS】
a {display: block;}
li {background-color: yellow;
margin-bottom: 5px;}


【HTML】
<ul>
<li><a href=”#” class=”disblo”>メニュー1</a></li>
<li><a href=”#” class=”disblo”>メニュー2</a></li>
<li><a href=”#” class=”disblo”>メニュー3</a></li>
</ul>

文字以外の黄色の背景も、クリックできるようになっていますね。こうすることで、ユーザービリティの向上につながります。

 

以上、displayプロパティの使い方を紹介しました。Webデザインにおいて表現の幅が広がりますから、使ってみると良いでしょう。どのサイトでも使われているテクニックなので、知っておいて損はありません。

サブコンテンツ

このページの先頭へ