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

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

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

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

気軽にコメントしてください。また間違っている箇所があったらご指摘ください

制作手順

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

制作手順の概要

  1. HTMLコーディング
  2. CSSで装飾
  3. JavaScript処理

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

ちなみに今回はヘッダーとフッターからコーディングしていきますが、特に作業順序に決まりはないので、プロジェクト毎に判断してください

アセットの用意

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

index.htmlと同じ階層にassetsディレクトリがあり、その中に画像やcss、javascriptファイルが格納される感じですね

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

htmlファイルの作成

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

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

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

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

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

ちなみに、このお決まりの構文はSublime TextやAtomなどのエディタツールのプラグインを使えばショートカットで一発で出せるので便利ですよ

Fontawesomeを読み込む

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

ヘッダーのコーディング

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

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

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

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

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

ちなみに、ロゴのリンク先として「/」を指定していますが、これはルートパスと言って「/」がはそのサイトのトップページへのリンクとなります。ナビゲーションの各リンクはこの時点では未確定なので「#」で代替しています

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

フッターのコーディング

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

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

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

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

まとめ

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

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

本記事のまとめ

  • アセットやディレクトリ構造の理解
  • HTMLファイルの作成
  • 基本構文とヘッダー、フッター周りのHTMLコーディング

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

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

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

シェアありがとうございます!

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!

人気記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です