HTML/CSS基礎 第7回 『ブロック要素とインライン要素』

マークアップしたい対象の文字列を、タグで囲んだ情報の単位を要素といいます。要素は囲んでいるタグによりブロック要素とインライン要素に分かれます。使用するタグがどちらになるかを理解しながらコーディングを進めていくことが必要となります。

目次

ブロック要素

ブロック要素とは、使用するたびにその要素の前後で改行される要素となります。以下のコードとブラウザの表示内容を見比べていただくと理解しやすいかと思います。

<body>
    <h1>1日のあいさつ</h1>
    <p>おはよう</p>
    <p>こんにちは</p><p>おやすみなさい</p>
</body>
HTML/CSS基礎

HTMLで「p」タグを改行せずに書いても、ブラウザで表示した際にはきちんと改行されていることが確認できます。以下に、代表的なブロック要素のタグを紹介させていただきます。

「p」タグ      段落を構成する

「div」タグ     意味を持たないブロック要素を構成する

「h1~h6」タグ   見出し

「ul」タグ      順序のないリスト

「dl」        定義リスト

 

インライン要素

インライン要素とはブロック要素や文章に含まれる要素を指し、テキストと同じレベルで扱われるため、前後で改行されることはありません。これらの並び方は、CSSで自由に調整することが可能です。

<body>
    <a href="https://www.google.com/">Google</a>
    <a href="https://www.google.com/">Google</a>
    <a href="https://www.google.com/">Google</a>
</body>
HTML/CSS基礎

HTMLではすべて改行してコーディングしましたが、ブラウザには改行されずに表示されることが確認できます。以下に、代表的なインライン要素のタグを紹介させていただきます。

「a」タグ      リンクの設定をする

「br」        改行

「em」       協調(イタリック体)

「span」      範囲の指定

以上がブロック要素とインライン要素となります。

次回はリンクと画像の貼り付け方について説明いたします。

(Visited 58 times, 1 visits today)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

株式会社NEUGATEは、都内で企業研修や職業訓練を運営している会社です。主に、IT系の教育事業に力を入れています。
この記事は、株式会社NEUGATEの教育事業部が執筆をしています。

企業ホームページ:https://neugate.co.jp/

コメント

コメントする

目次