CSSのdisplay:block;とは?ブロック要素について詳しく解説

ナナミ
書いた人 ナナミ
侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

こんにちは!ライターのナナミです。

HTMLやCSSで欠かせない、ブロック要素やインライン要素。
正直なんだかよくわからないけど、とりあえず使っていたりしませんか?

そんなあなたのために、今回はdisplay:block;について徹底解説!

・ブロック要素とは
・display:block;について
・レイアウトの例

を紹介していきます。

display:block;はCSSの基本。
しっかりポイントをおさえて、活用できるようになりましょう!

ブロック要素とは?

ブロック要素は、名前の通りコンテンツをまとめるブロックです。
言い方を変えると、「コンテンツをまとめている箱」という感じですね
では細かく見ていきましょう!

文や画像をエリアで区切っている

ブロック要素の「ブロック」は、「かたまり」という意味です。
コンクリートのブロックだとか、かたまりは色々ありますね。

WEBサイトのブロックは、情報のかたまりです。
トーナメントとかのAブロック、Bブロック、Cブロックみたいな感じが近いですね。

これをWEBサイトに当てはめてみましょう
例えば下記のようなレイアウトだと、

block1

HTML

CSS

・ヘッダーのブロック
・メインのブロック
・フッターのブロック

と分けられていますね。

ブロック要素は、このようにコンテンツのひとかたまりとなる要素です。

幅は親要素の100%

ブロック要素は、幅を指定しない限りは親要素の100%になります。

例えば下記のようにすると

block2

HTML

CSS

画面幅いっぱいに広がっていますね。

親要素に幅を指定していると

block3

HTML

CSS

親要素の幅と同じ幅になりました。

高さを指定できる

ブロック要素は、heightを指定することで高さを指定することができます

block4

HTML

CSS

余白を指定できる

CSSでpaddingを指定することもできるので、要素の余白を指定することができます

block5

HTML

CSS

横並びにするときはfloatを使う

ブロック要素は基本的に横並びのレイアウトにはできません
横並びにしたいときには、floatを使います。

block6

HTML

CSS

floatのリファレンスはこちら
http://www.htmq.com/style/float.shtml

ブロック要素のHTMLタグ

HTMLタグは、divはブロック要素、spanはインライン要素など、タグによって要素の種類が決まっています。

sectionはセクションのまとまり、h1は見出しなど、HTMLタグにはそれぞれ意味や役割があります
レイアウトだけではなく、タグの意味まで考慮してタグを選ぶと、HTMLソースコードのクオリティがググッと上がりますよ!

ブロック要素のHTMLタグは、主に下記などです。

<div>特に意味を持たない、汎用的なブロック要素
<header>ヘッダーコンテンツを示すブロック要素
<footer>フッターコンテンツを示すブロック要素
<main>メインコンテンツを示すブロック要素
<section>セクションのまとまりを示すブロック要素
<article>投稿コンテンツを示すブロック要素
<h1>〜<h6>見出しを示すブロック要素
<form>フォーム入力エリアを示すブロック要素
<p>段落を示すブロック要素
<table>テーブルのエリアを示すブロック要素

CSSでブロック要素にする

HTMLで要素の種類が決まっているけど、レイアウト次第では種類を変えたい時もありますよね
そんな時に使うのがdisplay:block;です。

displayは、ブロック要素やインライン要素など、要素の種類を指定できるプロパティです。

ブロック要素にしたい時には、下記のように使います。

block_css

HTML

CSS

これでインライン要素だろうが何だろうが、お構いなくブロック要素にできますね。

ブロック要素の使用例

ブロック要素はどんな時に使うのか
いくつか例を挙げてみましたので、参考にしてみてください

WEBサイトのアウトライン

ex1

HTML

CSS

大まかに、ヘッダー、メイン、フッターで分けた後、
メインの中で、メインビジュアル、サイドバー、メインコンテンツ、と分けていますね。

このように、それぞれのパーツの役割ごとに要素を分ける時はブロック要素が適切です。

ブログの記事一覧

ex2

HTML

CSS

ブログの記事は、記事ひとつでコンテンツのまとまりになりますね。
articleを使って、それぞれの記事をまとめて並べました。

aタグとCSSで簡単ボタン作成

ex3

HTML

CSS

<a>タグはインライン要素なので、高さや余白が綺麗に指定できません。
しかしdisplay:block;にすればきちんと指定ができるので、簡単にボタンが作れちゃいます。

向いていないレイアウト

ブロック要素は、文字や画像のまとまりを作る役割なので、文字の途中に入れるのは向いていません

例えば、文中の一部を目立たせるために色をつけたいときに、下記のように書くと…

ex4

HTML

CSS

ブロック要素は横並びをしないので、このように段落ちしてしまいます。

文字の途中に区切りを入れたい場合は、インライン要素などを使いましょう。

インライン要素のリファレンスはこちら
http://www.htmq.com/htmlkihon/005.shtml

まとめ

いかがでしたか?
コンテンツを綺麗に並べるには、ブロック要素は必要不可欠です。
display:block;を上手に使って、素敵なWEBサイトを作ってくださいね!


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーランスをされている市川友哉さん。33歳で、プログラミングを学び始め、4ヶ月という短い期間でフリーランスエンジニアとして独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


現役フリーランスエンジニアによる無料体験レッスン実施中!

もし、あなたが、

  • 経験、年齢、学歴に不安がある
  • 挫折しない学習方法が知りたい
  • アプリ開発で困っている
  • エンジニアの”生”の声が聞きたい!
  • 仕事獲得の仕方がわからない
  • エンジニアに転職したいが何をすればいいかわからない

など、プログラミング学習やキャリアのことでお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像から詳しいサービス内容をご確認ください。

cta_mtm3

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。