技術ブログ(HTML&CSS)

シンプルなHTMLページの作成と基本的な構造の理解
HTMLの雛形
各要素について
説明終わり
まとめ

シンプルなHTMLページの作成と基本的な構造の理解

　今回のお題は、「シンプルな HTML ページの作成と基本的な構造の理解」ということで、雛形にかかれている要素の説明をメインに書いていきます。

HTMLの雛形

　まずは雛形から説明していきます。

<!DOCTYPE html>
<html lang="ja">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>サイトタイトル</title>
 </head>
 <body>
    <header>
    </header>

    <main>
    </main>

    <footer>
    </footer>
  </body>
</html>

　これがHTMLの雛形になります。あくまで私の書き方なので、人によって異なるということをご了承ください。削ろうと思えばもう少し減らせますが、この方が良いと思ったのでこれで行きます。

各要素について

<!DOCTYPE html>

　まずは「ドックタイプ宣言」と呼ばれるものです。これは必ず一番最初に書く必要があります。簡単に言うと、「この文はHTMLという文書タイプで書きます。」ということを意味しています。一言でHTMLと言ってもバージョンが有り、それによって使えるタグが変わってくるので必ず記入しましょう。

<html lang="ja">
</html>

先程のドックタイプ宣言以外はすべてこのタグの中に書いていきます。html要素に直接書けるのはhead要素とbody要素のみとなり、それぞれ１つしか書けません。したがってHTMLファイルの基本的な構造は、まずhtml要素があり、その中にhead要素とbody要素が各1つずつ入るという構造になります。

　lang = “ja”というのは、このサイトが日本語で書かれているということを意味しています。これを書くことで、サイトを開いたときに英語か日本語か選ぶバナーが出てこなくなります。

　ちなみに、<要素>を開始タグ、</要素>を閉じタグと言い、これらを１セットとして考えます。ただし、閉じタグが無い要素もあるので注意しましょう。

<head>
</head>

　head要素です。この中にHTMLファイルそのものに関する情報を記述します。例えばHTML文書のタイトル、文字コードの指定、使用するCSSファイルの指定などを書いていきます。

　link要素によるスタイルシートの指定（CSSファイル）、meta要素による文字コードの指定（cherset）、title要素によるHTML文書のタイトルの指定は最低限必要になります。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

　１つ目のmeta要素は文字コードの指定です。HTML5では文字コードをUTF-8にすることが推奨され、UTF-8に対応して制作することが望ましいとされています。

　２つ目の要素はビューポートの設定です。すべての端末が同じ幅というわけではありません。画面のサイズや方向が大きく異なる場合でも、ページがうまく動作するようにする必要があるので書いておきましょう。
　一言でいうと、これを書いておくことでどのデバイスでもいい感じに表示してくれます。まだ深く習っていないので魔法のようなものという認識で良いのではないでしょうか。

<link rel="stylesheet" href="style.css">

　link要素についてです。リンクと聞いてわかるように、他の場所からファイルを読み込むときに書きます。link要素にはrel属性とhref属性を記入します。

　rel属性にはstylesheetという値を書きます。実は他にもiconなど値を書くことができ、この場合、様々なモバイルプラットフォーム上で特殊なアイコンの種別を示すために使用されます。

　href属性はスタイルシートへのパスを記入します。これを正しく読み込まないとCSSが反映されません。そもそもhref属性にはパスを記入するものです。

<title>サイトタイトル</title>

　title要素についてです。ブラウザーの題名バーやページのタブに表示される題名を定義するための要素です。テキストのみを含めることができ、要素内のタグはすべて無視されます。ページの題名はSEOに大きく影響を与えることになるのでしっかりと考えて題名を決めましょう。

 <body>
 </body>

　body要素です。この要素の中に書いたことがブラウザに反映されます。bodyの中に沢山のタグや要素を書いていくことでウェブサイトが出来上がっていきます。

　bodyの中に書かないほうが良い要素がいくつかあるので気をつけましょう。基本的に装飾関係はすべてCSSでやるので授業どおりにやっていればなんの問題もありません。

　bodyの中に英語を書いていくことでウェブサイトが出来上がるって不思議ですよね。

<header>
</header>

<main>
</main>

<footer>
</footer>

　次はまとめて３つ説明します。

　まずはheaderです。読んで字の如くウェブサイトの頭に当たる部分です。サイトのタイトルやロゴ、メニューと言ったものが記入されます。何がheaderで何が違うかはたくさんマークアップしていけば自ずと分かるようになります。
（トライデントのサイトで言うとこの部分がheaderになります。）

　次はmainです。この中にはサイトの内容、コンテンツといったものを書いていきます。つまりサイトの中身の殆どはこの中に書かれていくことになります。mainの中には「section」や「article」など更に細かくグループ分けされて書かれていきます。
（headerとfooter以外がmainです。）

　最後にfooterです。これはサイトの一番最後の部分の著者に関する情報、関連するリンク、著作権情報等を書きます。こればっかりは実際にサイトを見た方が分かりやすいですね。
（トライデントのサイトで言うとこの部分になります。）

　なぜこのように分けていくかについてですが、サイトを作っていく人がコードを見たときに意味がわかりやすかったり、見やすかったりするので細かく分けて書いていきます。ぶっちゃけ、分けなくてもサイトは作れます。しかし、その後の修正が面倒だったり、CSSをつけるときに手間がかかったりと後々めんどくさいことが増えるくらいなら、ちゃんとグループ分けしてコードを書くことを意識しましょう。

説明終わり

　長々となりましたが雛形の説明は終わりです。これはあくまで雛形であり、まだまだ節目したりなことはあります。しかし、HTMLを書いていくコツさえ掴んでしまえば簡単に書くことができますし、他の要素やタグが出てきてもやること、書き方はだいたい同じです。なので、英語で書かれているのでわかりづらいと思いますが、ゆっくり考えていけば誰でもできるようになります。