ご相談・お問い合わせご相談・お問い合わせ 電話0120-800-804

CSS3で新たに追加された便利な要素も!displayプロパティの値をおさらい!

Webサイト
CSS3で新たに追加された便利な要素も!displayプロパティの値をおさらい!

CSSを利用したレイアウトを行うにあたって、とりわけ重要な事項がdisplayプロパティです。このプロパティを利用することで、要素の特性を自在にコントロールすることができ、レイアウトの幅を大きく広げることができます。また、CSS3が実装されたことにより、より便利な値がdisplayプロパティに設定することができるようになりました。ここでは、そんなdisplayプロパティの基礎的な使い方も含め、どのように活用していくのが効果的かをご説明させていただければと思います。

ブロック要素とは?

pタグやdivタグ、liタグなどについては、デフォルトでブロック要素となっています。
特徴としては、特に何も設定しなければ、親要素の幅いっぱいに広がり、次の要素は折り返した下に表示されるということです。
ですが、こうしたブロック要素も、横幅やfloatを設定することで、横に並べて表示させたりすることが可能です。

また、aタグやspanタグは、デフォルトではインライン要素となりますが、displayプロパティを利用することで、強制的にブロック要素として扱うことが可能です。
これにより、aタグのクリック可能な範囲を広げたり、高さや幅を自在に設定することができるようになります。

CSSにて、特定の要素をブロック要素として扱うには、以下の構文を利用します。
display:block;

インライン要素とは?

aタグやspanタグは、ブロック要素の中で利用されることを想定されている、インライン要素となります。
この要素があっても、折り返しは行われず、コンテンツはその要素の直後から引き続き表示される形となります。

インライン要素は、幅や高さを指定することはできず、もしそのスタイルが指定されていても無視されてしまいます。

CSSにて、特定の要素をインライン要素として扱うには、以下の構文を利用します。
display:inline;

インラインディスプレイ要素とは?

インライン要素とディスプレイ要素のいいとこどりをしたような要素で、高さや幅を指定することができるのに加え、次の要素には折り返しが発生せず、直後から表示されるようになります。
これにより、横に3つ並んだ要素などを簡単に実現できるようになります。
従来、このような表現をするためには、並べたいブロック要素にfloatを指定したうえで、直後にclear:both;を記述してフロートを解除するというひと手間が必要でした。
inline-block要素の登場により、よく使われるこうした表現が、簡潔なコードで記述できるようになったのですね。

CSSにて、特定の要素をインライン要素として扱うには、以下の構文を利用します。

フレックス要素とは?

CSS3で追加されたdisplayプロパティの特徴的な値として、flexが挙げられます。
ある特定の要素をフレックス要素として指定すると、その子にあたる要素はすべてフレックスボックスとして扱われるようになります。
フレックスボックスとして扱われるようになった要素は、自在に順番を入れ替えたり、自動でマージンを空けてくれたりと、多種多様な機能が利用できるようになります。
ただ、新しい値というだけあって、ブラウザによって解釈が違ったりするので、注意が必要です。
また、当面の間は、ベンダープレフィックスが必須となるでしょう。

CSSにて、特定の要素をフレックス要素として扱うには、以下の構文を利用します。
display:flex;
display: -webkit-inline-flex;

フレックス要素については、さまざまなことが実現でき、ここでは説明しきれませんので、以下の記事を参考にしてみてください。
【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説】

CSS Flexbox の各プロパティの使い方を詳しく解説



また、実際のフレックスボックスの挙動をシミュレートしてくれる便利なジェネレーターも存在しています。
【Flexbox Playground】
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

こうした新しい要素は概念を学ぶよりも、実際に触ってみて結果を確かめる方が習熟が早いです。
興味がある方はぜひ一度お試しください。

table-cellの意外な使い道

そのほかにも、displayプロパティにはさまざまな値を設定することができます。
その数たるやかなりの数で、普通にホームページ制作を行ううえではどう活用してよいのかわからないようなものも存在しますので、すべてを紹介するのは控えさせていただきます。

そんなどうやって活用すればよいのか一見わからないようなdisplay要素の値のなかのひとつを使った便利なTipsを最後に紹介させていただきます。

display:table-cell;というCSSを指定することで、指定された要素はtdタグでマークアップされた際の同じ表示のされ方をします。
これだけ聞いてしまうと、普通にtdタグを利用すればいいだけの話に聞こえてしまうのですが、多くのコーダーが苦戦する天地中央に要素のコンテンツを配置するという行為に絶大な威力を発揮します。

天地中央に要素のコンテンツを配置するタグとして、ピンとくるのはvertical-alignですが、実はこのvertical-alignはブロック要素には適用されません。
インライン要素には適用されるのですが、こちらの場合は幅や高さを指定することができないので、思い通りのレイアウトを実現することができなくなります。

そこで注目したいのが、vertica-alignはテーブル要素にも適用されるという事実。
また、テーブル要素は、高さや幅も自在に設定することができます。

これを利用して、高さや幅を自在に設定できてかつ天地中央にコンテンツが配置される要素を実現するわけです。

具体的には、以下のような書き方となるでしょう。

display:table-cell;
width:180px;
height:180px;
vertical-align:middle;

displayプロパティを使いこなすことでより柔軟なレイアウトを

このように、displayプロパティは、レイアウトを組む際に、理解しておくことでさまざまな表現が可能になる便利なプロパティです。
逆に言うと、displayプロパティによって指定できる要素の種類の理解がないと、実現できるレイアウト・デザインの幅がかなり狭まってしまいます。
是非とも早い段階で理解して、柔軟にレイアウトを組めるようにしておきたいところですね。

ReEight MAGAZINE

いいねして最新情報をチェック!

矢印アイコン
無料サイト診断サービス

WEBサイトに関してお困りなことはありませんか?

私たちは制作だけではなく、SEO、マーケティング、ブランディング、など
WEBに関して総合的な知見を持ち合わせており、
WEBサイトを最大限に活用するためのノウハウを蓄積しております。
御社が抱えている事業課題を私たちならきっと解決できると考えています。

お気軽にお問い合わせください。

フォームでのお問い合わせ

メールご相談・お問い合わせ

お電話でのお問い合わせ

電話
0120-800-804受付時間10:00〜18:00

WEBサイトに関することなら
お気軽にお問い合わせください。

フォームでのお問い合わせ

お見積り依頼やご相談・ご質問は
お問い合わせフォームをご活用ください。

メールご相談・お問い合わせ

お電話でのお問い合わせ

お急ぎの方や詳しく話を聞きたい方は
お電話ください。

電話
0120-800-804受付時間10:00〜18:00
サイトマップ プライバシーポリシー Copyright © re-eight.inc. All Right Reserved.