みなさん、こんにちは！
フリーランスエンジニアのKATSUMIです。
今日は、Web制作でよく使われる「display」というプロパティについて説明します。
Web制作独学者へ【CSS】displayプロパティを伝授
「display」というのはプロパティの1つで、要素の表示形式を決めるものです。
たとえば、下記のように使われます。
セレクタ{プロパティ: 値}
p {display: block}
span {display: inline}
代表的なdisplayプロパティの値
代表的なdisplayの値には、block・inline・inline-blockがあります。
- block
div要素、p要素、h1〜h6要素、ul要素、ol要素、li要素、form要素 - inline
a要素、span要素、img要素、em要素 - inline-block
各値の大きな特徴として、要素（ボックス）の並びが挙げられます。
displyプロパティは、ボックスモデルの各領域の表示形式も設定します。
そのため、「並び」以外にも「余白」や「幅・高さ」などの動作は、各値によって異なります。
display: blockとは？
要素は縦に並ぶ
display:blockの要素が上から下へと並ぶことで構成されています。
blockの要素の前後には改行が入り、縦に並んでいきます。
幅と高さを指定できる
blockの要素には幅（width）と高さ（height）の指定ができます。
つまり初期値がblockのdivタグやpタグは幅・高さを指定できます。
余白も上下左右に指定できる
blockの要素では、余白も自由に決めることができます。
言い換えると、上下左右にpadding（要素の内側の余白）とmargin（要素の外側の余白）の値を自由に指定できます。
text-alignやvertical-alignの指定はできない
blockの場合、text-align:centerやvertical-align:middleを指定しても、要素が真ん中に表示されるようにはなりません。
実際に見てみます。初期値がblockのpタグを幅80pxにして、それをtext-alignで中央配置しようとしてみます。
HTML
<p class=”block1″>ブロック</p>
CSS
.block1 { background: orange; width: 80px; text-align: center; }
要素（オレンジの部分）は左に寄ったままです（要素内の“block”という文字は中央配置になっていますが）。
display: inlineとは？
要素の間には改行が入らず横に並ぶ
inlineの要素どうしの間には改行が入らず、横に並んでいきます。
テキストと同じように右端までたどり着くと改行されます。
inline-blockの並びはinlineと同じようになります。
改行が入らず、横に並んでいきます。
幅・高さの指定ができる
幅・高さについてはblockと同じように自由に指定することができます。
上下左右の余白の指定もできる
余白についてもblockと同じで、marginとpaddingの値を自由に指定することができます。
display: inline-blockとは？
marginとpaddingの値を自由に指定することができる
余白についてもblockと同じで、marginとpaddingの値を自由に指定することができます。
inline-blockの用途
inline-blockは、要素を「横並び」に配置して「幅・高さ」「余白」を自由に指定したいときに使われます。
例えば、サイトのメニューバーやソーシャルシェアボタンの横並び配置が挙げられます。
一方でvertical-alignを指定するときには、親要素ではなくinlineの要素に対して直接指定する。
要素（ボックス）は、横に並ぶ
inlineとblockの間を取ったようなものです。
ざっくりと言えば、要素の並び方はinline的で、要素の中身はblock的な性質を持ちます。
HTML
<p>これは<a href=”https://saruwakakun.com/”>aタグ</a>と<span>spanタグ</span>です。</p>
CSS
a { background: skyblue; color:white; }
span { background: orange; }
このようにinlineの要素の前後には、改行が入らず横に並んでいきます。
ホームページ制作やフリーランスエンジニアを育成するメンター業を下記で請けおってます。
今回の記事が、フロントエンドエンジニア、Webデザイナーを独学で目指している方の参考になれば幸いです。
下記を押していただけると励みになります！
↓
 |
人気記事
最近のコメント