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

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

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

画像:floatを使った例

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

画像:WEBサイトのアウトライン

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サイトを作ってくださいね!

自分にプログラミングなんて・・・と思っていませんか?

今後10年間で今ある職業の『77%』はなくなると言われています。

人工知能や機械学習を筆頭にVR、AR、ドローンなどの最先端技術の発達はこれからのあなたの働き方に間違いなく影響を与えるでしょう。

将来を見据えてプログラミングができるようになってエンジニアになりたい、自分だけにしかできないクリエイティブな仕事がしたい、、、とお考えの方も少なくないでしょう。

と、同時に「難しそう、、自分にはできないだろう、、、」と諦めている方も多いのではないでしょうか。

弊社マンツーマンレッスンは、お一人お一人に専属のインストラクターがつくので、通常のスクールでは難しい、オリジナルアプリ開発や、フリーランスとしての仕事獲得まで支援しています。

まずは『無料体験レッスン』で弊社コンサルタントと一緒にあなた専用の学習カリキュラムを考えてみてはいかがでしょうか?

詳しくは下の画像をクリックしてください。

cta_mtm2

LINEで送る
Pocket

書いた人

ナナミ

ナナミ

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説