てがろぐで個人サイトを作るための基礎知識

HTMLの基本タグ

HTMLテンプレートやてがろぐスキンをカスタマイズするとき、まずつまずくのはHTMLのタグの意味がわからない、ではないでしょうか。
「どこからどこまでコピーするの？」わたしもその道を通ってきました。
そんな初心者の自分に書くように、よく使われるタグの意味や使い方を紹介したいと思います。

ほぼ全てのタグに共通する基本
HTMLは<開始タグ>内容<終了タグ>という構造で構成されています。
つまり、コピペしたいときはこの部分をまとめてコピペする必要があるわけですね。
これだけ掴んで、まずはサイト内でよく使われているタグたちを見てみましょう。

見出し
<h1>～</h1>で表します。<h1>～<h6>まであります。1が一番大きい文字で、6が一番小さな文字で表示されます。
テンプレートによってはそれぞれの番号に装飾がしてあることも多いです。

段落
<p>～</p>で表します。
<p>hoge</p>
<p>hogehoge</p>
のようにpタグが連続すると自動で改行され、段落間には少しスペースができます。
特にベタ打ち小説サイトの場合は最も使われるタグと言っても過言ではないかもしれません。

画像
<img src="hoge.png" alt="ほげの画像">のように表します。このタグは終了タグはありません。
<img>だけでは画像は表示されないので、src属性というものを用いて画像ファイルの場所を指定してやる必要があります。alt属性は画像が何らかの原因で読み込めなかったときに代わりに表示される文章で、こちらも基本的には必須となります。

リンク
<a href="URL">リンクにしたい部分</a>のように表します。
<a>だけではリンクを貼れないので、href属性でURLを指定します。同じフォルダの別のファイルにリンクするときは相対パスで構いませんが、他のwebサイトにリンクしたいときはhttps://で始まるURLを指定しましょう。

おまけ・相対パスの書き方
相対パスは「そのファイルから見た相手のファイルの場所」を書くものです。例えば、このようなフォルダ構成だったとしましょう。

templete
    index.html
    hoge.png

このとき、index.htmlでhoge.pngを表示させるパスは"hoge.png"になります。
では、このようなフォルダ構成だったら？

templete
    index.html
    png(フォルダ)-hoge.png


答えは"png/hoge.png"です。
さらに、このようなフォルダ構成だったらどうなるんでしょうか？

templete
    code(フォルダ)-index.html
    png(フォルダ)-hoge.png

わかりましたか？　"../png/hoge.png"になります。"../"で自分がいる場所からひとつ上の階層に移動する、という意味です。

相対パスは便利ですが、慣れないうちは絶対パスに頼るのも手ですよ。

リスト
箇条書きの場合は
<ul>
    <li>リストの内容</li>
</ul>
というふうに書きます。

番号付きリストにするには
<ol>
    <li>リストの内容</li>
</ol>
というふうに書きます(どちらも、わかりやすいように改行とインデントを入れています)。
リストにしたい内容を<li>～～</li>で増やし、その前後を<ul>または<ol>でくくると覚えておくといいでしょう。

表
表は複数のタグを組み合わせて表します。まずは主なタグを確認しましょう。

<table>：表全体を囲むタグ。
<tr>：表の一行を囲むタグ。
<th>：表の見出しとなるセルを作成するタグ。
<td>表のデータとなるセルを作成するタグ。

続いて、表の一例を見てみましょう。

<table>
    <tr>
        <th>プラン名</th>
        <th>料金</th>
    </tr>

    <tr>
        <td>ノーマルプラン</td>
        <td>3,000円</td>
    </tr>

    <tr>
        <td>プレミアムプラン</td>
        <td>5,000円</td>
    </tr>
</table>

(こちらもわかりやすいように改行とインデントを入れています)
ざっくり説明すると、<tr>タグで行を作り、<th>タグと<td>タグでそれぞれのセルを作っています。
<th>タグで作られたセルは見出しになり、<td>タグで作られたセルは通常のセルになります。<th>タグは見出しが必要なければ省略可能です。

グループ分け
さて、ここまででおおよそ自分の作品を掲載するためのタグは説明が終わりました。しかし、これらを羅列しているだけでは上手にサイトを表示することができません。
上手にサイトを表示するために必要なもの、それはまとまりです。
これは本文、これはメニュー、これはフッター……というふうに、ある程度コードを固めて配置してやることで上手にレイアウトが整います。ここからは、そのまとまりを作るタグとして代表的なものを紹介します。

<header>
ページの上のヘッダーと呼ばれる部分です。
主にサイトタイトルやロゴ、メニューなどが含まれています。

<nav>
ヘッダー内に含まれるナビゲーションメニューを囲みます。
大抵の場合は<header>タグ内に含まれていることが多いです。

<main>
そのページの中心となるコンテンツを囲みます。
この中でさらにグループ分けをすることがほとんどです。

<article>
そこだけを見ても独立したページとして成り立つようなコンテンツを囲みます。
ニュースサイトのニュース部分のようなイメージです。

<section>
意味のあるグループをまとめるためのタグです。
<article>と似ていますが、そこだけを見ても独立したページとしては成り立ちません。

<aside>
メインコンテンツではない補足的なコンテンツを囲みます。
このサイトだと検索窓やカテゴリリストがあるサイドバーに使われています。

<footer>
ページの下部にあるコンテンツを囲みます。
コピーライトやSNSへのリンクなどを含んでいることが多いです。

<div>
特に意味を持たないタグです。
デザイン上の都合でまとめたい、まとめたいがどれが適切かわからないときに使うことができます。
その性質上、最もよく使われるタグかもしれません。

これらも当然全て終了タグが必要なので、もしテンプレートに手をいれるときは間違って消さないように気をつけましょう。特に入れ子構造になりやすい<div>タグには注意です。

最後に
以上でHTMLの基本的なタグの使い方はわかったような気がしましたか？
分かったような気がしたら、まずはテンプレートに手を入れてみましょう。恐れることはありません。失敗したって死にはしませんから。
ゆくゆくは自作したいなという方も、まずは基本から始めてみましょう。それが一番の近道です。
もしテンプレートを弄っていてわからなくなったら、「タグの名前　使い方」で検索してみましょう。使い方を説明しているwebサイトはここ以外にもたくさんあります。先人の知恵をありがたく頂戴しましょう。
それでは、また別の記事で。