おふとんの人 → ホームページ教室 → displayコマンド（CSS）

displayの使い方

displayコマンドは、タグで領域確保した場所を、どのような性質の領域にして、表示させるかを決定するためのコマンドです。インライン要素タグを、ブロック要素タグに変換したり、領域を視覚的に消したりできます。

displayコマンド

displayコマンドの使用方法は、backgroundコマンドやborderコマンドと違って、使い方は簡単です。次の例のように、コマンド名を入れて、「:（半角コロン」と半角スペースを入れて、適切な値を入れます。その後に、「;（半角セミコロン）」を入れて閉じます。

● 使用例

display: block;

displayの値

displayの値には、次のようなものがございます。この中で、よく使う値はほんの２～３個です。ここでは、よく使う「block」と「inline」について、使い方を詳しく説明したいと思います。「none」に関しては、動きのあるＷｅｂページを作るときに、ときどき使われるので、簡単に説明したいと思います。

  • block
  • inline
  • list-item
  • marker
  • none
  • compact
  • run-in
  • table
  • inline-table
  • table-row
  • table-row-group
  • table-header-group
  • table-footer-group
  • table-column
  • table-cell
  • table-caption

設定値の詳細

block（ブロック）

HTMLのタグで、aタグやspanタグのように、領域確保のできないインライン要素タグを、ブロック要素タグとして扱いたい場合に、「display: block;」を使います。

例えば、aタグは、何も設定しないで、そのままですと、インライン要素ですので、領域確保ができないのですが、次の例に示すように

● aタグをブロック要素に変更する例

<a style="display: block;">テスト</a>

とすると、ブロック要素として扱われるようになります。ブロック要素と、インライン要素の違いは、「31.broderコマンド（CSS）ブロック要素とインライン要素」で、直感的に感じ取って頂けたと思いますが、ブロック要素が領域を確保する。そして、インライン要素は、ブロック要素の中身となる。更に簡単に言い換えますと、ブロック要素の中にインライン要素が入るような使い方となります。

inline（インライン）

HTMLのタグで、divタグやliタグのように、領域確保を行うブロック要素タグを、インライン要素タグとして扱いたい場合に、「display: inline;」を使います。

例えば、liタグは本来は、ブロック要素ですので、領域確保をしてしまうので、liタグが連続すると、次の例に示すように、改行してしまいます。

● liタグを連呼した例

<ul>

  <li>テスト１</li>

  <li>テスト２</li>

  <li>テスト３</li>

</ul>

● liタグを連呼した表示結果

  • テスト１
  • テスト２
  • テスト３

ところが、このように改行してしまうブロック要素を、displayコマンドでインライン要素に変換すると

● liタグをインライン要素に変換

<ul>

  <li style="display: inline;">テスト１</li>

  <li style="display: inline;">テスト２</li>

  <li style="display: inline;">テスト３</li>

</ul>

● liタグをインライン要素に変換した表示結果

  • テスト１
  • テスト２
  • テスト３

このように、改行されなくなります。このように、liタグをインライン要素として使う例としては、上部ナビや下部ナビがございます。詳しくは、下の応用編「displayの応用編」をご覧ください。

none

マウスが重なるとコメントが出たり、画像が動いたりする、動きのあるＷｅｂページのことを、インタラクティブなＷｅｂページと言います。インタラクティブなＷｅｂページを作るときに、ときどき「display: none;」を、JavaScriptと組み合わせて使います。JavaScriptとは、プログラミング言語の一種で、HTMLと組み合わせて使い、Ｗｅｂページをインタラクティブにできる、特殊な言語です。

display: noneを指定すると、指定された領域は、Ｗｅｂページ上から姿を消します。単に、文書や画像などのコンテンツが消えて、領域は残ったままとはならず、領域ごと消えてしまいます。そのため、noneを指定された領域は、元々なかったものとして扱われます。

displayの応用編

ボタン風のナビを作る。ナビにマウスが重なったら背景色を変える。

ナビとは、ナビゲーションの略です。Ｗｅｂサイトによって異なりますが、Ｗｅｂページの上部や横、下部にある目次のことを、ナビと言います。おふとんの人では、上部ナビと左ナビを採用しています。

ナビのように、リンクが連なっているものを並べる場合は、liタグを用います。liタグの中にaタグを入れます。このaタグにマウスが重なると、色を変えるように、スタイルシートを設定すれば良いです。例えば

● スタイルシート

ul {width: 120px;}

a {background: #ffcc99;}

a:hover {background: #ccff99;}

● 通常のliタグ

<ul>

  <li><a href="#">ナビ１</a></li>

  <li><a href="#">ナビ２</a></li>

  <li><a href="#">ナビ３</a></li>

</ul>

● 表示結果（ナビを想定しているので、ulタグの横幅を120pxにしてあります）

このスタイルシートの設定の、「a {background: #ffcc99;}」では、aタグの領域の背景色を#ffcc99にします。そして、「a:hover」は、aタグで設置されたアンカーに、マウスが重なったときにどうするか？という定義済みクラスです。ということは、「a:hover {background: #ccff99;}」では、aタグで設置されたアンカーに、マウスが重なったときに、背景色を#ccff99にします。

なお、背景色#ccff99は、黄緑色っぽい色になります。

さて、上記の表示結果を見ると、aタグがインライン要素なので、ナビのリンク部（アンカー部）、つまり、この場合では「テスト１」や「テスト２」の、文字が書かれている部分しか、背景色が変わりません。何か設定変更して、「テスト１」の文字の横側も、色が変わるようになれば、ボタン風ナビに見えてきます。そこで、displayコマンドを使って、aタグをブロックに変えると

● スタイルシートで、aタグをブロック要素に変換

ul {width: 120px;}

a {display: block; background: #ffcc99;}

a:hover {background: #ccff99;}

● 表示結果

すると、ナビのリンク部にマウスが重なると、リンク部の左側を含めた、ブロック全体の背景色が変わります。

ところが、この状態では、liタグと、liタグに挟まれたのaタグがブロック要素なので、リンク部の後に改行が入ってしまい、２行ずつになっています。また、このままだと、liタグによる行頭の丸点が入っているし、文字の部分しかクリックできないので、ボタン風のナビになっていません。

そして、文字に下線が入ってるし、文字が左詰めになっているので、ダサいです。そこで、次のＣＳＳを追加します。

● aタグをブロック要素に変換

ul {width: 120px;}

li {display: inline;}

a {display: block; background: #ffcc99; width: 100%; text-decoration: none; text-align: center;}

a:hover {background: #ccff99;}

● 表示結果

ここで、widthコマンドは、aタグの横幅をliタグの横幅に合わせるために、100%を入れています。text-decorationコマンドは、リンク部の下線を消すために用いています。text-alignコマンドは、文字を右揃え、左揃え、中央揃えのどれかに指定できます。ここでは、ボタン風ですので、中央揃えをしました。

これで、ボタン風になりました。あとは、aタグにborderコマンドで、影のように見えるように、罫線を入れて、borderコマンドやpaddingコマンドコマンドで、適度な余白を空けて完成です。

なお、liタグをインライン要素に変換したら、liタグ特有の箇条書きの点が消えてしまいます。ですので、ちょうど、都合の良い状態になります。

● borderで罫線を入れるなどして完成

marginコマンドで、それぞれのリンクに隙間を空けました。罫線の太さを3pxにして、マウスが来ていないときは、罫線の種類をoutsetに、マウスと重なったらinsetに変換するように、設定しました。すると、マウスと重なったらボタンが押されたように見えます。

liタグで上部ナビや下部ナビを作る

先ほど述べたように、ナビはリンク先のリストなので、liタグで包括します。liタグはブロック要素なので、サイド・ナビ（横のナビ）に使うと、リンク毎に改行されて見やすくなります。つまり、サイド・ナビでは、liタグをそのまま使用すると、各liタグで改行されて都合が良いです。

ところが、上部ナビや下部ナビでは、横一列にリンク先が一行で並んで欲しいのに、liタグをそのまま使うと、liタグ毎に改行されてしまって、リンク先が数行に分かれてしまいます。そこで、上の例に示すような、liタグのインライン要素化の出番になります。

この場合、displayコマンドをliタグに適用するのに、スタイルシートで一括で指定すると便利です。次にその記入例を示します。

● スタイルシートの設定

#top-navi li {display: inline;}

● ソースの設定

<div id="top-navi">

  <ul>

    <li><a href="pc.html">パソコン</a></li>

    <li><a href="printer.html">プリンター</a></li>

    <li><a href="scanner.html">スキャナー</a></li>

  </ul>

</div>

ここで、idに「top-navi」と設定していますが、この名前は自由に決めてください。ただし、スタイルシートと同じ名前にしないといけません。ちなみに、aタグには、title属性を設定した方が良いかもしれません。

隠しテキストを入れてキーワードを盛り込む（スパム）

例えば、pタグを使って文書を入れていたとします。そのpタグを「display: none」で消してしまったとします。ところが、この文書が見た目で消えても、検索エンジンはこの文書を認識しています。つまり、デザイン上では消した文字でも、検索エンジンでは認識しているのです。

このことを応用すると、文書をある程度組み込んだ方が、検索エンジンで検索されやすくなります。ところが、文書をダラダラと書いたら、Ｗｅｂページのデザインが崩れてしまいます。そういったときは、「display: none」を使います。

注意して頂きたいのですが、Googleでは、この隠し文字を検索エンジンスパムと見なすので、注意が必要ですが、現在、ロボットはこの隠し文字を認識しないように設定してあります。

理由は、JavaScriptなどを使って、インタラクティブなＷｅｂページを作るときに、「display: none」で文字を消しておいて、マウスが重なったら文字が現れるような設定をすることができます。「display: none」を検索エンジンスパムと見なしてしまうと、このような「display: none」を使っている有用なＷｅｂページも、検索エンジンスパムと見なしてしまいますので、検索エンジンの質が落ちてしまいます。

このような、文書をdisplay:noneなどを使って消すという悪意のある操作を「隠しテキスト」と言います。「display: none」を使っているＷｅｂページの善し悪しはケースバイケースなので、現在、Googleでは、悪意のある「display: none」を、ロボットが発見するのではなく、人為的な発見に依存しています。ＷｅｂマスターのためのGoogle情報を参考にしてください。

まとめ

displayは使いこなすと、とても便利なコマンドです。私も、お客様などのＷｅｂサイトのナビなどで多用しています。ところが、隠しテキストという形で、悪用できてしまうコマンドなのです。悪意のある隠しテキストは、ＳＥＯとしてはフェアなやり方ではないので、私は一切使っていません。