ブロック?インライン要素? タグの種類とdisplayプロパティについて知ろう

今回のお題

クライアント

企業理念の下に「詳しくはこちら」というリンクを作ってください。四角いボタンっぽい感じのデザインが良いです。

HTMLタグの性質・要素の種類

ブロックレベル要素とは
インライン要素とは
HTML5のコンテンツカテゴリー

CSSのdisplayプロパティ

displayプロパティでできること
最初に覚えたい、displayの値5つ

実習

1.ボタン風に装飾したリンクを作る
2.右端に配置する

HTMLタグの性質・要素の種類

HTMLの要素は、初期状態で“幅”がどこまで伸びるのかによって、ブロックレベル要素・インライン要素の２つに大別されます。

HTML5ではブロックレベル要素・インライン要素という区分をされなくなりましたが、この２つの性質がなくなったわけではありません。
レイアウトを作る際に必要ですので、それぞれ性質と特徴を見ていきましょう。

ブロックレベル要素とは

ブロックレベル要素とは、中身に関わらずデフォルトで親要素の幅いっぱいまで伸びる要素のことを指します。

検証ツールで確認してみましょう。
sectionやdivタグ、hタグ、見出しタグは、どれも親要素の端まで横幅が伸びていますね。囲われているのが「自社プロダクト」など短い文言でも関係ありません。

インライン要素とは

インライン要素は、中身の大きさまでしか幅がない要素のことを指します。

こちらも、検証ツールで確認してみましょう。

hタグやpタグは文字数に関わらず、幅いっぱいに広がっていました。
しかし、aタグで囲まれた箇所は、文字の分しか幅がありません。

インライン要素は親要素いっぱいの幅を確保していないので、前後にもインライン要素があれば横並びで表示されます。pタグ内にある<strong>が分かりやすい例です。

例えば、<strong>タグをブロックレベル要素のdivに変更すると、以下のように改行されます。

HTML5のコンテンツカテゴリー

かつて、HTML要素はブロックレベル要素・インライン要素の２つで区分されていました。ですが、HTML5から、要素の分類が“コンテンツカテゴリー”と呼ばれるものに変更されました。

このため「ブロックレベル要素・インライン要素は廃止された」と表現されることもあります。が、“コンテンツカテゴリー”はブロックレベルとインラインを細分化して、同じ特徴を持つ要素ごとにまとめたような分類方法です。

ブロックレベル要素・インライン要素という区分は、下記で解説するdisplayプロパティの初期値とも言いかえられます。Webページのレイアウトを作っていくうえで、必要な知識であることに違いはありません。

CSSのdisplayプロパティ

ブロックレベル要素とインライン要素の表示形式の違いは、displayプロパティの初期値がどちらかと考えて問題ありません。

初期値に関しては、検証ツールのComputed（計算済み）パネルで確認できます。

displayプロパティでできること

CSSでdisplayプロパティの値を変更することで、要素の表示形式を変更できます。

今までのHTML/CSS学習で「display:flex;」という指定を書いてきました。
displayプロパティはflexboxでレイアウトを組みたいときだけではなく、ブロック要素をインライン要素に変更する、などの活用方法もあります。

最初に覚えたい、displayの値5つ

displayプロパティには様々な値がありますが、利用頻度が高いのは下記5つです。
それぞれの特徴を簡単に見ていきましょう。

display: block
display: inline
display: inline-block
display: none
display: flex

displayプロパティで使える値の一覧については display - CSS: カスケーディングスタイルシート | MDN をご確認ください。

①display: block

display: block;は、指定された要素を1つのブロック（かたまり/まとまり）として扱います。

ヘッダーやセクション、段落などは、１つのまとまりですね。
それぞれのまとまり（display: block;）が上から下へと並んでいくことで、1枚のWebページが構成されています。

②display: inline

display: inline;の要素は、段落などのブロックを構成する一部として扱われます。

HTML5のコンテンツカテゴリーでも、インライン要素とされていた要素は“フレージング・コンテンツ(Phrasing content)”に含まれています。
強調に使っているstrongや、リンク機能を持たせるaタグなどが代表的です。

③display: inline-block

display: inline-block;は、inlineとblockの中間的な存在。
デフォルトでインラインブロックの性質を持つ要素はありませんが、レイアウトをしやすいように使われることが多いプロパティです。

④display: none

display: noneはその要素を表示しない、簡潔に言えば非表示設定です。
display: noneの要素は存在しないもののように扱われます。

⑤display: flex

display: flexは、指定した要素をフレックスコンテナ（フレックスボックス）として扱います。「この要素内はフレックスボックスレイアウトを使うよ！」と宣言するようなイメージです。

Flexboxレイアウトを使いたい時の指定には、下記の2つがあります。

display: flex;
display: inline-flex

display: flexを指定した場合、その要素（フレックスコンテナ）はブロックレベル要素の性質を持ちます。inline-flex を指定した場合はインライン要素の性質を持ちます。

実習

実際にdisplayプロパティを使いながら、今回のお題部分を作ってみましょう。
リンク先は空（ href=# ）で作ります。

企業理念の下に「詳しくはこちら」というリンクを作ってください。四角いボタンっぽい感じのデザインが良いです。

1.ボタン風に装飾したリンクを作る

まずは、ボタン風にするリンクをhtmlに挿入してみましょう。

index.html

<section>
    <h2>会社理念</h2>
    <h3>EdTechで人々に力を与えたい</h3>
    <p>自分の力を100%発揮できてない人はたくさんいると思います。本来持っているポテンシャルを我々のサービス/テクノロジーで開花させること。 </p>
    <p>眠っている才能を呼び覚まし、<strong>社会に貢献できる人材を創造すること。</strong>それが我々のミッションです。</p>
    <a href="#">詳しくはこちら</a>
</section>

ブラウザで見てみましょう。
<a>はインライン要素。
何もCSSを指定しない状態だと、以下のように表示されます。

CSSで背景色や文字色を指定して、ボタン風のデザインを作ります。
「詳しくはこちら」にだけCSS適用できるよう、クラスを追加しましょう。

index.html

<a href="#" class="more">詳しくはこちら</a>

追加したクラスをセレクタに、以下4つのスタイルを指定します。

paddingを追加
背景色を青に
文字色を白
文字装飾はなし

style.css

.more{
  padding: 1rem 1.5rem;
  background: #3A70B8;
  color: #FFFFFF;
  text-decoration: none;
}

2.右端に配置する

次に、「詳しくはこちら」を右端（右揃え）で配置します。
インライン要素は左右marginを指定することはできますが、autoを使って中央配置や右揃えにすることはできません。

autoを指定できないのは、本体インライン要素には左右marginが無いため。

検証ツールで見てみましょう。
aタグに焦点を合わせても、CSSで未指定の場合は左右marginは表示されません。

インライン、インラインブロックの要素は、横方向に並んでいく性質があるため、右側に余っているスペースはmarginとしてカウントされないのです。
marginが存在していない以上、autoを使うことはできません。

対して、ブロックレベルの要素は、縦方向に並んでいく性質があります。
widthを指定して幅を狭くした場合も「要素が上から下に（改行された形で）並ぶ」という性質は変わりません。

a.moreを使って実験してみましょう。
displayプロパティをblockに変更し、widthを指定してみます。

インラインだったときとは異なり、右側の空きが余白として扱われていますね。

marginが存在しているので、margin-left: auto; を指定することで要素を右に持ってくることができます。

style.cssを追加・修正する

以上のことを踏まえて、.moreに対するスタイル指定を調整してみましょう。