1から書くHTML(構成編)

今回はwebページ作成(ハイパーテキスト=テキスト同士が結びついて従来のテキストを超えた(hyper)テキスト(text)なんて言い方もする)のマークアップ言語であるHTML(HyperTextMarkupLanguage)を1から書く方法についてです。

僕もよく書きますが、結局何が必要なのか忘れてしまうので、備忘録も兼ねて。

構成編以降は考えてないですが、続けばいいなぁとは思ってますよ笑

f:id:ShoutaWATANABE:20171010142613j:plain

原則

HTMLはタグと呼ばれるパーツで構成されています。

一つ一つのタグに意味があり、用途があります。

また、HTMLのルールを簡単に説明すると、

  • 単体で使用できるものと、閉じタグとセットでなければいけないものがある

    例)

<p> <!-- 段落を作るタグ -->
    これは閉じタグが必要
    <br><!-- 改行するタグ これは単体 -->
</p>
  • タグと閉じタグの中に、別のタグを入れ子構造にすることが出来る

    例)

<div> <!-- ブロックレベル要素の範囲を指定するタグ -->
    <h1>
        これは大見出しのタグ
    </h1>

    <h2>
        これは中見出しのタグ
    </h2>
</div>
  • タグには様々な属性があり、複合的に使用できる属性もある

    例)

<div class="wrapper">
    <h1 id="title">一番良く使う属性</h1>
    <p class="contents">
        id属性、class属性は一番良く使う属性です。
    </p>
</div>

こんな感じです。 厳密には認識が違うものもあるかもしれませんが、初心者の僕はこういうものだと思って使っています。

要素

html

これがないと始まらないって感じですね。 一番最初と最後に書きます。 ページで日本語を使う時はlang属性を指定する必要があります。

<html lang=ja>

</html>

head

この部分にはページの追加要素になる内容を書きます。 ページのタイトル、見た目を決めるスタイルシートの指定などは全てここに書きます。

<html lang=ja>
    <head>
        <title>ページタイトル</title>
        <link rel="stylesheet" type="text/css" href="xxx.css"><!-- スタイルシートの指定部分 -->
    </head>
</html>

body

ここが表示されるページの内容を書く部分です。 先述したclass属性やid属性などを用いたdivタグなどもこのbodyに書きます。

<html lang=ja>
    <head>
        <title>ページタイトル</title>
        <link rel="stylesheet" type="text/css" href="xxx.css"><!-- スタイルシートの指定部分 -->
    </head>
    <body>
        ここに表示される内容が入ります。
    </body>
</html>

まとめ

今回はHTMLファイルの構成についてまとめました。 タグは慣れてくると簡単に書けるようになると思います。 ただ、次のステップの、スタイルシートの設定の際につまづく場合が多い(というか僕がつまづいた)ので、始めは自分にルールを決めてから書くといいと思います。 最後までお読み頂きありがとうございます。

  • HTMLではタグを使う
  • タグは属性を決めたり、入れ子にして使ったり出来る。
  • 基本的にはhtmlタグに囲まれたhead部分とbody部分で構成されている

※写真引用: 写真素材なら「写真AC」無料(フリー)ダウンロードOK