【初心者向け】HTMLのブロック要素の仕組みをまとめました【CSS】
こんばんは、プログラミング初心者の氷犬です。
HTML/CSSの学習をしていて、ゼロからコードを書いてみると思いどおりにいかないことがよくありますよね。
こんな疑問の声に応えます。
・この記事の内容
- HTML/CSSのレイアウトの仕組みを簡単に
- ブロック/インライン/インラインブロック要素の違い
- { display: *** }の指定を図で解説
HTML/CSSのレイアウトの仕組みを簡単に【おさらい】
Webサイトは基本的に上から下に向かって作っていきます。
Webサイトは、４つのパーツを組み合わせてできていることが多いですよね。
Webサイトの４つのパーツとは、具体的に
- ヘッダー
- メインコンテンツ
- サイドバー
- フッター
のことです。
Worpressだとファイル名がこんな感じになっています↓
（Wordpressの例）
パーツに分かれてるとはいっても、HTMLの仕組みは「上から下に向かって作る」ようになっています。
よく考えると当たり前ですが、HTML/CSSを学習したての頃は意外と気づかないと思うんですよね。
基本的に「上から下に向かってコーディングする」仕組みなので、「横のレイアウト」を作るにはちょっとした知識とコツが必要です。
この記事では「Webサイトで横のレイアウトを作るための知識とコツ」について解説しようと思います。
具体的にはこんな感じ↓
１．HTML/CSSの「ブロック要素」を知る（知識）
２．CSSで{ display: *** }を指定する（コツ）
ブロック/インライン/インラインブロック要素の違い
これから解説する内容は、サルワカ様のサイトでとても詳しく解説されているので、「ゼロからしっかり理解したい」という人はそちらを見ていただくほうがいいと思います。
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？｜サルワカ
一方で、「ちょっと見たけど小難しくてよくわからなかった」とか「軽く見ておきたい」という人はこの記事でサッと確認してもらえれば(^_^)
【ここから本格的な解説】
HTML/CSSの世界には「ブロック要素」というものがあります。
少し難しいですが、一言でいうと「タグの横幅などの性格を決める要素」です。
言葉だとなかなか伝わりにくいものがあると思うので、図を用意しました。
h1からh4・p・a・spanタグの４種類をざっくりと用意しました。
一目見ると、横幅が違うことがなんとなくわかるかなと思います。
この横幅は「ブロック要素」と「インライン要素」の違いによるものです。
HTML/CSSの世界では、タグごとに「ブロックレベル」というものが設定されています。
・ブロックレベルの違い
- block：ブラウザの横幅一杯に伸びる。ex.h1~h4,p,div
- inline：中のテキストの幅だけ伸びる。ex.a,span,strong
- inline-block：初期値では設定されていない。CSSで指定する
説明用に、先ほどの画像に手を加えてみました。
{ display: block }が設定されている要素は、ブラウザの横幅一杯に伸びてしまうので、横に他の要素を並べることができません。
一方で、{ display: inline }が設定されている要素の横には、他の要素を並べることができます。
{ display: *** }の指定を図で解説
トップナビメニューを例にして、{ display: *** }の指定を見てみましょう。
僕のブログをパソコンで見ると、右上にメニューが表示されます。
このメニューは横並びになっていますよね。
要素を横並びにするには、displayにinlineかinline-blockを指定する必要があります。
別の図を用意してみました。
li要素は初期値に{ display: block }を持っているので、そのままだと横並びになってくれません。
そこで、displayをinline-blockに設定するとこうなります。
無事に要素が横並びになってくれました。
{display: inline}として、ブロックレベルをinlineにしてもいいんですが、inlineは縦の幅が指定できないという弱点があります。
inline-blockは縦の幅が設定できるので、blockとinlineのいいとこ取りの設定と言えますね。
しかし、inline-blockは初期値で設定されていないので、CSSで指定してあげる必要があります。
ブロックの知識はHTML/CSSを学習する上で必須です
このブロックレベルの知識は、実際にゼロからコーディングしてみないと重要性がわからないと思います。
ブロックレベルを理解しておくと「この要素はblockだから横に要素を並べられないな～」とか、頭の中でわかるようになるので、早いうちに身に着けておくといいですね(^_^)
ブロック要素は種類によって「縦の幅が指定できない」とか「中央揃えが設定が違う」という性質の違いがあります。
さらに詳しく知りたい方はサルワカ様のページがすばらしいので、ぜひ見ていただければ。
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？｜サルワカ
実際にゼロからコーディングしたことがない方は、僕が過去にコーディングしたときの記事があるので参考にしてみてください。
【画像あり】はじめてのランディングページ模写【プログラミング学習記録④】
自分のブログをコーディングしてみました【プログラミング学習記録⑥】
Progateでブロック要素がどうとか言ってたけど、あれはどういうことだったんだろう？