HTML実制作編！ヘッダーとフッター周りのコーディング！【超初心者向けHTML講座6】

　どうもフリーランスプログラマのTakaです。

　さて、これまでHTMLの基礎的なことから、制作にあたって必要な最低限の知識について紹介してきましたが、今回からいよいよ実制作に入っていきたいと思います。具体的にはこちらのページのようなよくある個人のプロフィールページを実際に制作していきます。

　なお、今回からハンズオン形式で実制作に入りますが、中には理解ができないところもあるかもしれません。なるべく分かりやすく解説したいと思いますが、もし気になる箇所があった場合はコメントを残していただければと思います。

制作手順

　まず、今回のサンプルページ制作の作成手順に関しては、下記通りhtmlを記述してからcssで装飾していきたいと思います。

　今回は実際にHTMLファイルを作成して、お決まりの基本構文とヘッダー、フッター周りのコーディングをしていきたいと思います。

アセットの用意

　では、まず始めに今回の制作にあたって使用するアセットを準備していきたいと思いますが、今回は「codecaster」という仮のプロジェクト名で下記のようなディレクトリ構成で作成していきたいと思います。ちなみに、アセットにはいろいろな意味がありますが、ここではhtmlファイル以外の画像やcss、javascriptファイルを指します。

　なお、画像データに関してはあらかじめこちらからダウンロードしておいてください。

htmlファイルの作成

　では、実際に制作していきましょう。

　まずは、「codecaster」ディレクトリ直下に「index.html」ファイルを作成します。

お決まりの基本構文を入力

　作成したらお決まりの構文を下記のように記載していきます。

　上記のそれぞれのタグの意味や役割に関しては下記の記事で詳しく解説しているので参照してみてください。

Fontawesomeを読み込む

　続いて、今回のページではフッター部分で使用しているSNSのアイコンをフォントアイコンを使って表示させたいので、Fontawesomeというオンラインツールキットをhead内で下記（7行目ハイライト）のように読み込んでおきます。

ヘッダーのコーディング

　これで最低限必要な基本構文は記載したので、実際に表示領域にあたるbody内にソースを追記していきます。

　まずは、ページの一番上部にある白背景のロゴとグローバルメニュー部分（下図参照）を下記のハイライト部分のようにコーディングしていきます。

　今回のロゴとグローバルメニューはデザイン上ヘッダー部分に相当するので、上記のように「header」タグに内包するかたちでコーディングします。

　ロゴに関してはこのサイトタイトルの意味合いももっているので大見出しである「h1」タグで指定しています。

　グローバルメニューに関しては、ナビゲーションの意味を持つ「nav」タグで囲って、順序無しリストである「ul」タグで指定しつつ、アンカーリンクでもあるため「a」タグで指定しています。

　この状態でindex.htmlを開くと、下図のようにそれぞれの要素がリンクとして青字とアンダーラインで表示されているのが分かりますね。この段階ではまだスタイルシートで装飾していないので、単純に白地に文字が表示されているだけになります。

フッターのコーディング

　続いて、フッターのコーディングもしていきましょう。

　今回のデモサイトのフッターはコピーライトのみなので下記のハイライト部分のようにシンプルにコーディングしていきます。

　コピーライトを「small」タグで指定していますが、HTML5におけるsmallタグの役割は「免責や警告などの注釈や細目などを表す際に活用」と定義されています。コピーライトもこの細目に含まれるので、HTML5ではコピーライトはsmallタグで指定されるのが一般的となっています。

　ここまでコーディングしたら一旦保存してブラウザで確認してみましょう。下図のように先ほどのヘッダーの情報に加えコピーライトが表示されているのが分かるかと思います。

まとめ

　ということで、今回からサンプルページを実際にコーディングしていくにあたって、基本構文とロゴやグローバルメニューを含むヘッダー周り、それからフッターのHTMLコーディングをしてみました。

　次回は、メインコンテンツのHTMLコーディングをしていきたいと思います。

　てことで、今回はここまで！また！

　次の記事は下をクリック。