CSS入門 | CSS位置プロパティ | Display

CSS display

displayプロパティは、Webページのレイアウトを決定するCSSの重要なプロパティの1つである。このプロパティは、該当HTML要素がWebブラウザーにいつ、どのように表示されるかを決定する。

ほとんどのHTML要素は、displayプロパティの既定値として次の2つのうちどちらかの値を持つ。

block
inline

block

display値がblockの要素は、常に新しい行から始まり、その行の全幅を占める。

<div>、<h1>、<p>、<ul>、<ol>、<form>要素は代表的なblock要素である。

inline

display値がinlineの要素は、新しい行から始まらない。また、要素の幅も行全体ではなく、該当HTML要素のcontent分だけを占める。

<span>、<a>、<img>要素は代表的なinline要素である。

displayプロパティの既定値の変更

HTMLのすべての要素は、それぞれ既定のdisplay値を持っている。

しかし、display値がblockの要素をinlineに変更できる。また、逆にdisplay値がinlineの要素をblockに変更することもできる。

このようにHTML要素のdisplay値を変更することで、Webページを開発者が望む形に変更できる。

<style>
    li { display: inline; }
</style>

上の例では、block要素である<li>要素のdisplay値をinlineに変更している。 display値がinlineに変更された<li>要素は、その行の全幅を占めるblock要素の特徴を失う。

display値を変更しても、実際に該当要素が完全に別タイプの要素に変わるわけではない。つまり、display値をinlineからblockに変更しても、変更された要素は内部にほかの要素を含めることはできない。なぜなら、最初からdisplay値がblockの要素だけが内部にほかの要素を含められるためである。

inline-block

inlineとblockのほかにも、displayプロパティでよく使われる値にinline-blockがある。 display値がinline-blockに設定された要素は、その要素自体はinline要素のように動作する。しかし、その要素内部ではblock要素のように動作する。

このようにinline-block要素はinline要素に似ているが、幅と高さを設定できる。また、block要素のようにmarginを使って余白を指定することもできる。

次の例は、さまざまなdisplay値の動作を示す例である。

<style>
    div { width: 100px; height: 50px; }
 
    .first { background-color: aqua; }
    .second { background-color: green; }
    .third { background-color: yellow; }
 
    .inline { display: inline; }
    .inline-block { display: inline-block; }
</style>

上の例のように、display値がinline-blockに設定された要素はinline要素のように1行に並ぶ。しかし、block要素のように幅と高さを設定できる。そのため、Webサイトのメニューやナビゲーションバーを作るときによく使われる。

visibilityプロパティ

visibilityプロパティは、HTML要素がWebページに表示されるかどうかだけを決定する。そのため、Webページには表示されなくても、レイアウト内には依然として存在し、コード内にも当然存在する。 visibilityプロパティをJavaScriptと一緒に使うと、非常に複雑なメニューやレイアウトを簡単に作成できる。

visibilityプロパティに使用できる値は次のとおりである。

visible: 該当HTML要素をWebページに表示する。
hidden: HTML要素をWebページに表示しない。ただし、Webページのレイアウトには依然として存在する。
collapse: この値は動的なテーブルでのみ使用でき、テーブルの境界線を1行だけ表示する。

HTML要素を隠す

HTML要素を隠すには、display値をnoneに設定すればよい。こうすると、該当要素はWebページに表示されなくなり、Webページのレイアウトにも影響しない。

また、visibility値をhiddenに設定してもHTML要素を隠せる。しかし、display値をnoneに設定した場合とは異なり、見えないだけでWebページのレイアウトには依然として存在する。

<style>
    p.none { display: none; }
    p.hidden { visibility: hidden; }
</style>

したがって、機密性の高いデータや重要なデータをvisibilityプロパティで隠すのは望ましくない。

opacityプロパティ

opacityプロパティを使うと、HTML要素の透明度を簡単に調整できる。 opacity値は0.0から1.0まで設定でき、値が0に近いほど透明になる。

Internet Explorer 8以前では、透明度を表すために次の構文を使用する。

構文

filter:alpha(opacity=x)

ここでx値は0から100まで設定でき、x値が0に近いほど透明になる。

次の例は、ほとんどのWebブラウザーだけでなく、Internet Explorer 8以前でも透明度を正確に表現する例である。

<style>
    img { opacity: 0.4; filter: alpha(opacity=40); }
    img:hover { opacity: 1.0; filter: alpha(opacity=100); }
</style>