みみぺんブログ

WEBデザイナー、エンジニア、プログラマー向けの記事を投稿します

トップ > CSS初心者入門 > display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】

display:blockの特徴を3分で理解し使いこなそう【CSS初心者入門】

CSS初心者入門 かなきち

【CSS初心者入門】ブロックレベル要素、display: block について3分で解説！ こんにちは、かなきち(@kanakichi0801)です

今回は、CSS初心者入門【第二回】ということで、ブロックレベル要素とdisplay:blockについてわかりやすく解説していくよ！

【CSS初心者入門】第一回目でmarginとpaddingについて解説したけど、それよりも先にdisplay:blockをやるべきだったかなと少し後悔もしました。

それぐらい重要なのでしっかり覚えましょう！今回は、CSS初心者入門とは書いてあるのだけど少しHTMLタグの内容も入るよ！

初期の何記事かは、CSSの基礎を簡単に説明した後にブロックレベル要素の解説に入ります。すぐに解説を読みたい方は スキップ を押してね！

かなきち

これからの記事を読むと
ブロックレベル要素の特徴とdisplay:block;の使い方がわかるよ！


こんな人に読んで欲しい

・CSS初心者の方

・HTML初心者の方

・ブロックレベル要素とインライン要素の違いを知りたい方

・コーディングで苦労したくない方


先ずはCSSの復習

以下の記事でCSSについて詳しく説明しているので今回は触りを書きます。 blog.mimipen.net

CSSとは？

ホームページの見た目を指定するために使用します。CSSは、HTMLと組み合わせて使われます。

CSSの基本構造

h1タグにCSSを使って見た目を指定した場合。

[HTMLの中身]

<h1>たいとる</h1>

[CSSの指定]

h1{
　font-size: 32px;
}


CSS(スタイルシート)のセレクタ、プロパティ、値のイメージ

セレクタ：どこのデザインを変更するか(※h1タグ)
プロパティ：どの要素に変更を加えるか(※font-size=文字の大きさ)
値：どのように変えるか(※32pxという大きさに変える)

HTMLファイルにCSSファイルを読み込ませる方法

HTMLファイルのhead内に以下を記述します。

<link rel="stylesheet" type="text/css" href="[CSSファイル場所]">



CSSについて、もっと詳しく知りたい人は以下の記事を参考にしてください。 blog.mimipen.net

ブロックレベル要素(display:block)とは？

HTML5からブロックレベル要素とインライン要素という呼び方は廃止されました。

このブログでは、違いを紹介するにあたり初期値が display:blockの要素をブロックレベル要素とし、初期値が display: inlineの要素をインライン要素として紹介します。

HTMLタグのほとんどはブロックレベル要素、インライン要素の２つの種類で分けられます。ブロックレベル要素の特徴を簡単にあげると以下の特徴があります。

  • 親要素の大きさが継承され、１つのブロックとして認識される
  • ブロックレベル要素同士は縦に配置される
  • 幅や高さが指定できる
  • 余白(margin・padding)が指定できる


言葉で説明してもわかりにくいかと思いますので、以下で図を使って解説していきます。

ブロックレベル要素は親要素の幅が継承される

ブロックレベル要素は親要素の大きさが継承され同じ大きさになります。 この図のソースコードが以下になります。
[html]

<div>
  <p>ブロックレベル要素</p>
</div>

[css]

div{
  width: 800px;
}

ここでいう親要素とはdivタグを指します。 pタグにはcssを指定してませんが、pタグは親要素の幅800pxを継承し、pタグの大きさは800pxとなります。

この特徴を覚えておけば無駄なコードが削減できそうですね！

ブロックレベル要素同士は縦に配置される

ブロックレベル要素同士は縦に配置されます この図のソースコードが以下になります。
[html]

<p>ブロックレベル要素</p>
<p>ブロックレベル要素</p>

ブロックレベル要素のpタグを2つ書きました。ブロックレベル要素同士は並ぶと縦に配置されます。

以下でインライン要素との違いを解説しています。

インライン要素との違い

インライン要素同士は横に配置されます この図のソースコードが以下になります。
[html]

<span>インライン要素</span>
<span>インライン要素</span>

インライン要素のspanタグを2つ書きました。ブロックレベル要素とは違いインライン要素同士は並ぶと横に配置されます。

ブロックレベル要素は縦に並び、インライン要素は横に並ぶと覚えましょう。これは、ブロックレベル要素とインライン要素の一番わかりやすい特徴の違いと言えます。

ブロックレベル要素には幅・高さ・余白が指定できる。

ブロックレベル要素には幅・高さ・余白が指定できる。 ブロックレベル要素は自由に幅や高さを変えることができ、paddingやmarginも指定できます。

インライン要素の違いも説明したいところですが少々厄介なので次回のインライン要素の説明で詳しく解説したいと思います。

ブロックレベル要素のHTMLタグ一覧

使用頻度が高いブロックレベル要素のタグを以下にまとめました。

・<div>(特に意味はない)
・<h1>〜<h6>(見出し)
・<p>(段落)
・<ul>(リスト) 類似タグ：<ol>
・<li>(リストの項目)
・<dl>(定義リスト)
・<dt>(定義リストの用語)
・<dd>(定義リストの用語の説明)
・<nav>(ナビゲーション)
・<address>(連絡先の情報)
・<header>(ヘッダー)
・<footer>(フッター)
・<main>(文章の中で重要(中心になる)なコンテンツ)
・<section>(セクション) etc...

ブロックレベル要素に変えられる魔法の display: block; について

インライン要素に高さを持たせたい、幅を指定したい。または、インライン要素をブロックレベル要素に変えたいと思った時に以下のプロパティと値を覚えておくと便利です。

[css]

span{
  display: block;
}

spanタグは代表的なインライン要素のタグです。インライン要素をブロックレベル要素に変えるには、そのタグにdisplay: block;をCSSファイルで指定します。

display: block;の記述はCSSでよく使う記述なので覚えておきましょう！また、displayというプロパティは、１記事じゃ書ききれないので、今後も覚えるべきところから少しずつ解説して行きます。

まとめ

前半にブロックレベル要素のHTMLタグの種類とブロックレベル要素の特徴4つ紹介しました。復習になりますが以下が4つの特徴です。

  • 親要素の大きさが継承され、１つのブロックとして認識される
  • ブロックレベル要素同士は縦に配置される
  • 幅や高さが指定できる
  • 余白(margin・padding)が指定できる


後半では、ブロック要素でない要素をブロック要素に変える display: block; について紹介させていただきました。

↓display:blockとよく比較で出されるinline-blockの記事です。 この2つのプロパティーをしっかり理解してコーディングのプロを目指そう！ blog.mimipen.net

他にも、痒いところに手がとどく記事を日々更新中です！ blog.mimipen.net blog.mimipen.net blog.mimipen.net

この記事がいいなっと思ったら読者登録をお願いいたします！



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)