今回は、HTMLを学習する上で理解必須の「ブロックレベル要素とインライン要素」についてまとめたいと思います。よしブロックレベル要素とインライン要素は、最初にHTMLを学習していて「?」が出てくるところかな。この記事の内容ブロックレベル要素とはインライン要素とは具体例ブロックレベル要素とはWebデザインの「箱」となる要素です。ブロックレベル要素の例としては、以下のものが挙げられます。<h1></h1><p></p><div></div>インライン要素とはWebデザインを構成する「箱」にはならず、主に文字を修飾するのに使われる要素です。インライン要素の例としては、以下のものが挙げられます。(リンクを生成する要素)<b></b>(太字にする要素)<span></span>(囲った部分をインライン要素化する要素)具体例ブロックレベル要素は「箱」?、そしてインライン要素は文字修飾する?となる方もいると思うので、ここでは具体例を使って説明していきます。bodyタグに以下のような記述をしたとします。<p>3つ目の段落です</p></body>そうすると、下のような画面が表示されます。よしここでは分かりやすいように、CSSで箱に色をつけているよ!前述した通り、h1タグとpタグはブロックレベル要素であるため、積み木のように上から重なっていますね。横いっぱいまで「箱」が広がっていることに注目しましょう。次にインライン要素を見ていきます。以下のように、インライン要素であるb要素を追記しました。<b>2つ目のb要素です</b></body>これを見てみると、下のように表示されます。インライン要素は積み木にならず、文字を修飾するのに使われる要素であることから、横に並んでいくことが分かりますね。それではもう一つ例を挙げてみます。インライン要素であるb要素が、pタグの子要素である場合を見てみましょう。<b>2つ目のb要素です</b></body>見て分かる通り、b要素は横に並んでいることが分かりますね。今回はHTMLを学習する上で理解必須の「ブロックレベル要素とインライン要素」についてまとめてみました。ブロックレベル要素とインライン要素の違いは、Webデザインをする上で非常に重要になってくるポイントでもあるので、今回を機に理解を深めていってください。yoshi19941117TechTechMedia【Ruby基礎】クラスメソッドとインスタンスメソッドの違いについて簡単に...【CSS基礎】floatプロパティを使用してレイアウトが崩れた時の対処方...Railsエンジニアちばよしはる銀座にあるヘルステック企業のRailsエンジニア。初心者から中級者向けに記事を更新しています。お酒とカレーと競馬が好き。TechTechMedia。