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 96 times, 1 visits today)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

エヌ・キャリア・アカデミーは「21世紀のこれからの激変する社会を生き抜き、第一線で活躍することのできる人材を世に送り出していく」ことを教育理念にかかげ、IT系の職業訓練を実施している職業訓練校です。

この記事は、エヌ・キャリア・アカデミーのスタッフが執筆しています。

企業ホームページ:https://n-career.jp/

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次