HTML/CSS基礎第6回『ブラウザに文字を表示するには』

2023年7月12日2024年5月22日

復習

第3回ではHTMLの基本構文を紹介させていただきました。少し間が空いてしまったので再度掲載させていただきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>MY HOMEPAGE</title>
        <meta name = "description" content="私のホームページです">
    </head>

    <body>
        <h1>ここは私のホームページです</h1>
    </body>
</html>

<head>ダグについての説明は第4回で行いましたのでご確認ください。

今回は<body>タグについて解説させていただきます。<body>タグには、開始タグと終了タグとの間に見出し・文章・リンク・画像など、ブラウザに表示される様々なコンテンツを記述していきます。今回は文字列を表示するためのタグを紹介していきます。

ブラウザに文字を表示する

基本的には<body>タグの中では、タグを使用しなくても文字を表示することができます。しかし、表示する文字に役割を与えるためにも積極的にタグを使っていきましょう。

見出し<h1>～</h1>

見出しには「h1」～「h6」を使用します。「h」は英語で見出しを意味する「heading」の頭文字で、数字が小さいほど大見出しであることを意味し、大きな文字が表示されます。

見出しタグは大見出しである「h1」から使っていきます。それ以降は順に「h2」「h3」と使用します。文字の大きさだけを考慮して数字を飛ばすと検索されずらくなってしまうため、そのようなことは原則行ってはいけません。文字のサイズについて調整する場合はCSSという見た目を調整するためのシステムを利用します。

文章<p>～</p>

文章表示するためには<p>タグを使用します。「p」は英語で段落を意味する「Paragraph」を意味しています。<p>タグを使うと囲まれた文章が段落になり段落ごとに改行されます。長い文章になるときは改行がないと非常に見づらいので、<p>タグを利用して段落を分けて表示してみてください。

改行<br>

文章が長くなってきた際に、HTML内で改行をしてもブラウザには反映されません。改行したいタイミングで改行タグ<br>を使用してください。

サンプルコード

以下にサンプルコードを掲載いたします。

    <body>
        タグを設定しなくてもテキストを表示することは可能ですが、
        改行は反映されません。<br>
        改行タグを使用することで、<br>任意の場所で改行を入れることができます。
        <h1>見出しを表示しています</h1>
        <h2>見出しを表示しています</h2>
        <h3>見出しを表示しています</h3>
        <h4>見出しを表示しています</h4>
        <h5>見出しを表示しています</h5>
        <h6>見出しを表示しています</h6>
        <br>
        <p>文章を表示するには「p」タグを使用します。</p>
        <p>「p」タグを続けて使うと、段落と段落の間にスペースが空きます</p>
    </body>

上記コードをブラウザで表示すると以下のようになります。