CSSディスプレイプロパティ

前のレッスンではcssをファイルから接続し、少しのcssコードを書いてそれがどのように機能するかを確認しました。このレッスンでは、重要なdisplayプロパティについて詳しく説明します。displayプロパティは、タグがHTMLドキュメント内にどのように表示されるかを制御します。行内のテキストのように配置されるか、独自の高さと幅を持つブロックです。では、基本から始めましょう。デフォルトでタグがどのように表示されるか。それらは異なる方法で表示されます：<div>はブロックとして表示されます。<span>は行内テキストとして表示されます。テキストの表示方法から始めましょう。テストストリングを作成し、spanでラップしましょう。

display: inline

 spanタグは行内に表示されます。テキストが表示される方法（もちろん、日本の象形文字を列に表示する場合を除く）。同時に、spanタグは高さも幅も持ちません。display: inlineのタグにこれらのパラメーターを設定することはできません。テキストはやや異なる特性で測定されるため：フォントサイズ、フォント、色、文字間隔、行スペース、単語、文字列の開始からのオフセット。したがって、タグにサイズ、高さ、または幅、またはオフセットを設定したい場合は、displayプロパティの次の値を使用する必要があります。

display: block

ブロック値はdivタグのデフォルトで使用されます。このような値により、幅と高さ、およびブロックのオフセットを設定できます。このようにして、サイト上の領域を設定してテキスト、画像、または別のブロックをそこに挿入できます。spanタグにdisplay: blockを設定することもできます。この場合、このタグ（この場合、例えば<span class="block">text</span>のようなクラスを持つspanを使用する方が良いでしょう）は幅と高さを取得してブロックのように動作します。

ブロック値のもう1つの機能は、ブロックが利用可能な全幅に伸びることです。つまり、幅はデフォルトで100%です。ただし、ブロックにheight: 100%を設定することはできません。つまり、高さ100%です。その理由は、ブロックが占有している高さだけを占有する、残りはピクセル単位で設定できます（例えば800px）。しかし、ブロック全体を画面に伸ばすことは不可能です。次の記事でこれを行う方法についての議論を続けます。

display: inline-block

画像をブロックとして表示する必要がある場合があります。つまり、幅、高さ、オフセットを持ちますが、幅を100%に伸ばさず、1つの後に1つ続きます。このために、inline-blockを使用できます。この値は、テキストの表示とブロックを一般化します。通常のブロックにdisplay-blockを設定することもできます。

display: table

表のテーブル値はデフォルトで使用されます。ブロックとは異なり、テーブルを高さ100%に伸ばすことができます。ただし、将来的には、テーブルレイアウトではなくブロックレイアウトを使用します。テーブルはデータテーブル用にのみ使用する必要があるため、レイアウト用ではありません。

display: list-item

list-item値で表示するとき（デフォルトでは<li>タグがそのように表示されます）マーカーが追加されます（デフォルトでは黒い円）。

display: none

このような値をクラス、タグ、またはidに追加すると...サイトに表示されなくなります！これは慎重です。何か必要なものを削除でき、要素がサイトに表示されない理由を理解するのが困難になります。しかし、顧客が何か（例えばRSSアイコン）をサイトから削除するよう要求する場合、次のように実行できます：

.rss{

  display: none;

}

もちろん、テンプレートから要素を削除して、それが表示されないようにする方が正しいです。しかし、それが表示されている場合、cssを通じて余計な手間をかけずに削除できます。