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

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

 

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

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

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

 

・この記事の内容

  • HTML/CSSのレイアウトの仕組みを簡単に
  • ブロック/インライン/インラインブロック要素の違い
  • { display: *** }の指定を図で解説

 

-スポンサードサーチ

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

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

 

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

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

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

のことです。

 

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

(Wordpressの例)

 

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

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

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

 

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

 

具体的にはこんな感じ↓

1.HTML/CSSの「ブロック要素」を知る(知識)

2.CSSで{ display: *** }を指定する(コツ)

 

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

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

【CSS】displayの使い方を総まとめ!inlineやblockの違いは?|サルワカ

 

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

 

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

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

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

 

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

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

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

 

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

 

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の違いは?|サルワカ

 

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

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

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

スポンサーリンク
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA