【初心者向け】HTMLのブロック要素の仕組みをまとめました【CSS】

こんばんは、プログラミング初心者の氷犬です。

HTML/CSSの学習をしていて、ゼロからコードを書いてみると思いどおりにいかないことがよくありますよね。

HTML/CSSの勉強を始めてコードを書く練習をしてるけど、学習サイトではうまくいったのに、自分で書くとうまくいかないなぁ…　モノを横並びにするのがムズかしい。
Progateでブロック要素がどうとか言ってたけど、あれはどういうことだったんだろう？　

こんな疑問の声に応えます。

-スポンサードサーチ

HTML/CSSのレイアウトの仕組みを簡単に【おさらい】

Webサイトは基本的に上から下に向かって作っていきます。

Webサイトは、４つのパーツを組み合わせてできていることが多いですよね。

Webサイトの４つのパーツとは、具体的に

1. ヘッダー
2. メインコンテンツ
3. サイドバー
4. フッター

のことです。

Worpressだとファイル名がこんな感じになっています↓

（Wordpressの例）

パーツに分かれてるとはいっても、HTMLの仕組みは「上から下に向かって作る」ようになっています。

よく考えると当たり前ですが、HTML/CSSを学習したての頃は意外と気づかないと思うんですよね。

基本的に「上から下に向かってコーディングする」仕組みなので、「横のレイアウト」を作るにはちょっとした知識とコツが必要です。

この記事では「Webサイトで横のレイアウトを作るための知識とコツ」について解説しようと思います。

具体的にはこんな感じ↓

ブロック/インライン/インラインブロック要素の違い

これから解説する内容は、サルワカ様のサイトでとても詳しく解説されているので、「ゼロからしっかり理解したい」という人はそちらを見ていただくほうがいいと思います。

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？｜サルワカ

一方で、「ちょっと見たけど小難しくてよくわからなかった」とか「軽く見ておきたい」という人はこの記事でサッと確認してもらえれば(^_^)

【ここから本格的な解説】

HTML/CSSの世界には「ブロック要素」というものがあります。

少し難しいですが、一言でいうと「タグの横幅などの性格を決める要素」です。

言葉だとなかなか伝わりにくいものがあると思うので、図を用意しました。

h1からh4・p・a・spanタグの４種類をざっくりと用意しました。

一目見ると、横幅が違うことがなんとなくわかるかなと思います。

この横幅は「ブロック要素」と「インライン要素」の違いによるものです。

HTML/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の違いは？｜サルワカ

実際にゼロからコーディングしたことがない方は、僕が過去にコーディングしたときの記事があるので参考にしてみてください。

【画像あり】はじめてのランディングページ模写【プログラミング学習記録④】

自分のブログをコーディングしてみました【プログラミング学習記録⑥】