ブログについて
【後編】displayプロパティの使い方
2022.10.20
制作
こんにちは、クリエイティブ制作部です。
前回に引き続きdisplayプロパティの使い方についてお話していきます。前編では、displayプロパティの概要とblockの特徴をお話したのですが、今回はinline、inline-block、noneについての内容になります。
前回の記事をまだ読まれていない方はこちらからご覧ください。
ではさっそくinlineについて説明していきます。
inlineの特徴
aタグやimgタグ、spanタグなどは初期値がinlineなので、指定しなくてもinlineになっています。また、inlineは基本的にblockの中で使用されます。例えば、文中の一部分だけテキストの色を変更したい時は、変更したい部分をspanタグで囲い色を指定するなど、部分的な装飾に使われることが多いです。逆にinlineの中でblockを使用することはほぼありません。
並び方について
inlineは横に並びます。
例として、以下のようにinlineであるaタグに背景色をつけて並べてみます。縦に並ぶblockに対して、inlineは横に並ぶことがわかると思います。
＜html＞
<div class=”wrap”>
<a href=”https://me-pro.co.jp/” class=”orange”>インラインです</a>
<a href=”https://me-pro.co.jp/” class=”green”>インラインです</a>
</div>
＜css＞
.wrap .orange {
background-color: orange;
}
.wrap .green {
background-color: green;
}
幅(width)と高さ(height)
inlineの幅と高さは要素の中身によって決まるので、指定できません。
ちょっとイメージしづらいと思いますので、inlineのaタグに高さと幅を指定してみます。
＜html＞
<div class=”wrap”>
<a href=”https://me-pro.co.jp/>インラインです</a>
</div>
＜css＞
.wrap {
border: 1px solid green;
}
.wrap a {
width: 200px;
height: 200px;
background-color: orange;
}
わかりやすいよう、aタグを囲っているblockのdivタグに枠線をつけてみました。blockが横幅いっぱいに広がっているのに対し、inlineは幅と高さを指定したのにもかかわらず全く反映されていないことがわかります。
余白
inlineは基本的に左右に余白(margin・padding)のみ指定することができます。厳密には、上下のmarginは指定できませんが、paddingなら指定することができます。しかし、画面幅が小さいときやpaddingを大きく指定してしまうと、デザインが崩れてしまう可能性があります。そのため上下の余白を指定することはおすすめしません。
試しにmargin、paddingそれぞれに20pxずつ指定したいと思います。
＜html＞
<div class=”wrap”>
<a href=”https://me-pro.co.jp/ class=”orange” class=”green”>インラインです</a>
</div>
＜css＞
.wrap a {
margin: 20px;
padding: 20px;
}
.wrap .orange {
background-color: orange;
}
.wrap .green {
background-color: green;
}
このようにpaddingと左右のmarginは反映されていますが、marginの上下が反映されていないことがわかります。
text-alignとvertical-alignについて
inlineはtext-alignとvertical-alignを指定することができます。ただし、text-alignを指定する際は親要素に対して指定する必要があるため、注意が必要です。vertical-alignはinlineの要素に指定すれば問題ありません。
それではinlineの要素を中央に配置してみます。
＜html＞
<div class=”wrap”>
<a href=”https://me-pro.co.jp/ class=”orange”>インラインです</a>
<a href=”https://me-pro.co.jp/ class=”green”>インラインです</a>
</div>
＜css＞
.wrap {
text-align: center; /*親要素のdivに指定*/
background-color: beige;
}
.wrap .orange {
background-color: orange;
}
.wrap .green {
background-color: green;
}
親要素であるdivに背景をつけ、中央になるようtext-alignを指定しました。
そうすると以下の画像のように、inlineのaタグが左右中央に配置されました。
inline-blockの特徴
次はinline-blockです。inline‐blockはblockとinlineの中間要素となります。つまり、並びはinline、要素の中身はblockの要素を持ちます。「要素は横並びにしたいが、幅・高さ・余白を指定したい」という場面で使用します。
では、inline-blockがどのように反映されるのかを見ていきましょう。
並び方について
inline‐blockの並びは先述したように、inlineと同じ横並びです。
では、blockの要素をinline‐blockに指定し並べてみたいと思います。
＜html＞
<div class=”wrap”>
<p class=”orange”>インラインブロックです</p>
<p class=”green>インラインブロックです</p>
</div>
＜css＞
.wrap p {
display: inline-block; /*inline-blockに指定*/
}
.wrap .orange {
background-color: orange;
}
.wrap .green {
background-color: green;
}
inlineと同様に横に並びました！
幅(width)と高さ(height)
inlineでは指定できなかった幅と高さですが、inline‐blockではblockと同じように自由に指定することができます。
先ほどと同様にblockの要素をinline‐blockに指定し、幅と高さをそれぞれ300pxに指定してみたいと思います。
＜html＞
<div class=”wrap”>
<p class=”orange”>インラインブロックです</p>
<p class=”green>インラインブロックです</p>
</div>
＜css＞
.wrap p {
display: inline-block; /*inline-blockに指定*/
width: 300px;
height: 300px;
}
.wrap .orange {
background-color: orange;
}
.wrap .green {
background-color: green;
}
しっかり幅と高さが反映されたことが確認できました！
余白
余白もblockと同様に、padding・marginともに指定することができます。
こちらもpaddingとmarginそれぞれに20pxを指定したいと思います。
＜html＞
<div class=”wrap”>
<p class=”orange”>インラインブロックです</p>
<p class=”green>インラインブロックです</p>
</div>
＜css＞
.wrap p {
display: inline-block; /*inline-blockに指定*/
margin: 20px;
padding: 20px;
}
.wrap .orange {
background-color: orange;
}
.wrap .green {
background-color: green;
}
要素の外側と内側にきちんと余白が入っています！
text-alignとvertical-alignについて
inline-blockはtext-alignとvertical-alignも指定が可能です。inlineと同様に、text-alignを指定する際は親要素に対して指定する必要があります。
それでは親要素のdivタグにtext-alignを指定してみたいと思います。
＜html＞
<div class=”wrap”>
<p>インラインブロックです</p>
</div>
＜css＞
.wrap {
text-align: center;
}
.wrap p {
display: inline-block; /*inline-blockに指定*/
text-align: center;
background-color: orange;
}
text-alignで親要素であるdivタグに対して、中央に配置されるように指定したところ、しっかり反映されていました！blockとinlineの良いとこ取りのinline-blockでした…！
noneの特徴
最後はnoneについてです。noneが指定された要素は非表示になります。
では試しに見てみましょう。
＜html＞
<div class=”wrap”>
<p class=”none”>非表示にする</p>
<p>非表示にしない</p>
</div>
＜css＞
.wrap .none {
display:none; /*noneに指定*/
}
非表示にしたい要素にクラス名をつけて非表示に設定してみました。すると指定した要素だけが非表示になっていることがわかると思います。
このようにnoneを指定したものはブラウザ上で表示されなくなります。
ただしブラウザ上で非表示になりますが、読み込み自体は行われているため表示速度が上がるということはありません。
まとめ
2回に渡り長々とお話ししてしまいましたが、displayプロパティについての理解は深まったでしょうか？
ここまでお話しした4つの値についての知識を身に付けることで、初歩的な部分で躓くことが少なくなると思います。また、参考書やブログを読んでいるだけではわかりづらい部分もあると思うので、実際にいろいろ実装してみるのが一番だと個人的には思っています！
今回の記事が少しでも参考になれば嬉しいです。
最後までお読みいただき、ありがとうございました。