Menu Que.how Home Category プライバシーポリシー
サイト作り

HTMLの超基本的なタグの一覧とその簡単な使い方【HTML・CSS入門】

HTMLを書いていく上で、使用頻度が高く、最も基本的なタグの一覧と、その使い方を簡単に解説していきます。

pタグ・段落

pタグは、何かの文字列が1つの段落であることを示すのに使用するタグです。以下のコードでは、p要素が3つあり、3つの段落があることを示しています。

<p>なにかの文章</p>
<p>なにかの文章</p>
<p>なにかの文章</p>

上のコードを表示すると以下のようになります。

p要素は自動的に改行され、段落と段落の間にはデフォルトの状態だと、1行分のスペースが入るようになっているのが特徴です。

spanタグ・途中の文字列の変更に

spanタグは、例えば pタグで用意した段落の、一部の文字列のみデザインを変更したい時などに使用します。

以下のHTMLとCSSを用意して、ブラウザで表示してみましょう。

<p>なにかの<span>文章</span></p>
<p>なにかの<span class="red">文章</span></p>
<p>なにかの<span class="large">文章</span></p>
.red {
    color: red;
}

.large {
    font-size: 1.5rem;
}

上のHTMLコードの1行目のように、ただ spanタグで囲うだけでは、表示結果のように何の変化も起こしません。なので、class属性とCSSを用意するのが基本的な使い方です。

aタグ・リンク

aタグは、特定のテキストをリンクとして扱うために使用します。リンクのアドレスは『href属性』の値とし、リンクにするテキストは aタグで囲います。

<p>何かを検索する際は<a href="https://www.google.com">Google</a>をご利用ください。</p>

上の画像のように、aタグで囲うと、デフォルトの状態ではテキストが青色になり、下線も追加されます。

青色になったGoogleというテキストをクリックすると、『https://www.google.com(Googleの検索ページ)』へ、ページが移動します。

brタグ・改行

brタグを使用すると、文書の途中で改行させることが出来ます。

<p>何かを検索する際は<br>Googleをご利用ください。</p>

スペース確保のための改行

以下のように、要素の上下に空白を用意するために brタグを使う事は適切な使用方法ではありません。

<p>何かの文字列</p>
<br>
<br>
<br>
<p>何かの文字列</p>

もし、要素の上下などに適切なスペース、段落と段落との間隔を広げたい場合には、以下のように、CSSで marginなどを設定します。

以下のコードで設定している『margin-bottom』は、要素の下に空白を用意することが出来ます。

p {
    margin-bottom: 64px;
}

h1, h2...・見出しタグ

hの後に番号が振られているタグは見出しタグであり、h1 ~ h6まであります。

記事のタイトルや、記事中の見出しに使用するタグです。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

上の表示結果のように、デフォルトの状態では、h1が最も文字サイズが大きく、番号が大きくなる程、文字が小さくなっていきます。

それぞれ文字の大きさが異なりますが、文章の途中で文字サイズを変更するためだけに使用するのは、適切な使用方法ではありません。あくまでも、見出しであることを示すタグです。

imgタグ・画像

imgタグは画像を表示させるのに使用し、src属性で画像のURL、alt属性で画像の説明を設定します。

alt属性は無くても画像は表示されますが、検索エンジンに画像が何であるかを説明するのに役立ちます。また、imgタグに終了タグは必要ありません。

<img src="https://louliz.com/image/20200117020925737536046?w=300" alt="白い花と赤い花">

ulタグとliタグ・リスト

リストを作成したり、箇条書きにするには、ulタグとliタグを組み合わせます。

<ul>
    <li>何かのテキスト</li>
    <li>何かのテキスト</li>
    <li>何かのテキスト</li>
</ul>

リスト全体を ulタグで囲い、リストの項目1つ1つを liタグで囲います。これらのタグを使用すると、上の写真のように、自動的に各項目の先頭に『・』がつきます。

文章で箇条書きにする際に『・』を直接入力するよりは、ulとliタグを使用した方が html文書として構造的になります。

olタグ・順序ありのリスト

リスト項目に1、2、3や、A、B、Cなどの順序をつけて表示させるには、olタグを使用します。各項目は ulタグの時と同じく、liタグを使用します。

<ol>
    <li>何かのテキスト</li>
    <li>何かのテキスト</li>
    <li>何かのテキスト</li>
</ol>

デフォルトだと、上の写真のように先頭の項目から順に、1、2、3と番号がふられていきます。

type属性やcssの設定で、番号ではなく、アルファベットや平仮名を振ることも出来ます。

さいごに

以上が最も基本的な HTMLタグとなります。