【9月枠も残りわずか】転職保証コース

【徹底解説!】css「display」で要素の表示を指定する方法

インライン要素やブロック要素などを耳にしたことはありますか?
displayでは、そんな要素の表示の仕方を決めることができます。
では早速、詳しく見ていくことにしましょう!

要素の表示を指定する「display」とは?

様々なタグで囲まれたかたまり1つ1つのことを「要素」と呼びます。

この要素は初期値としてブロック要素やインライン要素などのいくつかの分類がされています。

display: 値;を使えば、その分類を指定し直すことができると考えてください。

 

覚えておきたいdisplayで指定できる3つの要素

displayで指定できる値はたくさんありますが、よく使われる3つの要素について見ていきたいと思います。
これがわかるようになると、他のCSSの指定もスムーズにできるようになるので頑張りましょう!

前後に改行が入る【ブロック要素】

ブロック要素は前後に改行が入ります。
例えば、初期値がブロック要素のものに<div></div>タグがあります。

これを使った場合を見てみましょう。

HTML
<!DOCTYPE html>
<html>
<head>
    <title>例</title>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>
</body>
</html>

このように、ブロック要素は前後に改行が入る要素です。
実際に見えている部分だけでなく、横いっぱいに広がっているイメージです。
そのため、改行をしなくてもどんどん下につながっていきます。

 

文章の一部としての【インライン要素】

例として初期値がインライン要素である<span></span>を見てみましょう。

HTML
<!DOCTYPE html>
<html>
<head>
    <title>例</title>
    <link rel="stylesheet" href="example.css">
</head>
<body>
     <span>aaa</span>
     <span>bbb</span>
     <span>ccc</span>
</body>
</html>

上の図のようにブロック要素と違って横いっぱいに広がらず、見えている部分だけ幅があります。
そのため短いテキストの場合は横につながっていきます。

インライン要素の特徴としては、高さや幅が指定できないという点があります。

 

特徴をあわせ持つ【インライン・ブロック要素】

インライン・ブロック要素はブロック要素とインライン要素の特徴をあわせ持っているイメージです。
少し想像しづらいと思いますが、「インライン要素」のようなものでありながら幅や高さが指定できるものです。

「インラインブロック要素」だけ見ていても、わかりづらいと思うので次の「3つの要素の違いまとめ」を見ることで確認していきましょう。

 

3つの要素の違いまとめ

ここまで出てきた3つの要素の違いを、表形式と実際のコードの両方から確認してみましょう。

3つの違いをまとめたものがこちらです。

 

HTMLとCSSのコードで見たい方は下をクリック!

HTML
<!DOCTYPE html>
<html>
<head>
    <title>例</title>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <div class="box">
        <span class="inline">インライン要素</span>
        <span class="inline">インライン要素</span>
        <span class="inline">インライン要素</span>
        <span class="inline">インライン要素</span>
	<span class="inline">インライン要素</span>
	<span class="inline-block">インラインブロック要素</span>
	<span class="inline-block">インラインブロック要素</span>
	<span class="inline-block">インラインブロック要素</span>
	<span class="inline-block">インラインブロック要素</span>
	<span class="inline-block">インラインブロック要素</span>
	<span class="block">ブロック要素</span>
	<span class="block">ブロック要素</span>
	<span class="block">ブロック要素</span>
	<span class="block">ブロック要素</span>
	<span class="block">ブロック要素</span>
    </div>
</body>
</html>
example.css
*{
  margin: 0;
  padding:0;
}
.box{
  width: 500px;
  background-color: #174a5c;
  color: white;
}
.inline {
  display: inline;
}
.inline-block{
  display: inline-block;
}
.block{
  display: block;
}

画像からわかるように、インライン要素は横向きに並んでいます。
インライン・ブロック要素も横並びにはなっていますが、インライン要素との違いは途切れないところにあります。

 

 

 

基本のコードの書き方

inline

インライン要素にするためには、指定し直したい要素に対してCSSに下のように書き足します。

CSS
display: inline;

 

block

ブロック要素にするためには、指定し直したい要素に対してCSSに下のように書き足します。

CSS
display: block;

inline-block

インラインブロック要素にするためには、指定し直したい要素に対してCSSに下のように書き足します。

CSS
display: inline-block;

 

要素を消すためのnone

noneという値を指定すると、指定された要素は非表示になります。
「スマートフォンサイズの時は表示させたくない!」などのレスポンシブデザイン関連で使われる指定です。
使いたい場合は以下のように指定します。

CSS
display: none;

 

押さえておきたいポイント

他に指定できる値

displayには、上記4つ以外にも指定することのできる値が多くあります。
その中のいくつかを表形式で見ていくことにしましょう。

指定できること
list-item <li>と同じ働きをする
run-in 後ろがブロック要素の場合、改行がない状態で表示される。後ろの先頭に入る。
table tableタグと同じ働きをする。tableタグを使わずに横並びにすることができる。
table-row-group <tbody>と同じ働き
table-header-group <thead>と同じ働き
table-footer-group <tfoot>と同じ働き
table-row <tr>と同じ働き
table-cell <td>と同じ働き
ruby <ruby>を使わずにルビをふることができる
ruby-base <rb>と同じで、ルビを振る対象を決める
ruby-text <rt>と同じで、ルビの内容を決める
inherit 親要素の値を引き継ぐ
flex 指定すると、指定した要素直下の要素が並列になる
grid グリッドレイアウトを作ることができる

 

 

要素の表示を指定する「display」まとめ

いかがでしたでしょうか?
各要素の特徴を掴むことで他のCSSにおいての指定もスムーズにできるようになると思います。

また、指定し直すことができれば、横並びにすることも簡単にできるようになります。

どれがどんな特徴を持っているのかが曖昧になってしまったら、ぜひ上の表まで戻ってみてください。

 

10月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きのプログラミングスクール

で未経験からエンジニアを目指そう!

 

転職保証コースは質の高いカリキュラムで転職成功率98%

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある