ここからは実践です。ワイヤーフレームと呼ばれるラフを書いて、まずはウェブページをどのように構成するかを考え、そこに見合ったHTMLタグをどのように使えばいいのか書いていきます。
デザイン部分は端折りますが、実際にウェブサイトを制作する際のプロセスだと思っていただいてOKです。
完成形のHTMLタグとサンプルファイル有り。ページ末に掲載しています。
まずは構成を練る
ホームページを作ろう！と思いついても、「ではどこから作っていけばいいのだろう？」と思うのが普通です。ここでは、その基本となる「どのようにページを構成するか」を考えます。
何を載せたいのか
ここが一番の軸になります。ウェブページを作るにあたって、何を載せたいか？どんな情報を載せるか？
もっと言えば、このページを見る人がどんな情報を得てもらいたいか？を考えましょう。
例えば、パン屋さんが自分のお店をもっと広く知ってもらいたいとしたら、どんなパンが売られていて、それぞれのパンに対しての想いや情熱、製造工程などを載せ仕込みから店頭に並ぶまでを掲載等がホームページに掲載する情報として浮かびます。
他に、ウェブサービスを展開する会社がサービスをもっと使ってもらうためのサイトであれば、そのサービスの概要、そのサービスはどんなメリットがあるか、他社の同サービスと比べてどこが秀でいているか、よくある質問と答えなどなど、ユーザーにとって便利な情報を載せるべきでしょう。
何を載せたいのか？言い換えれば、どんな情報を得て欲しいか？という情報を掲載します。
ワイヤーフレームを作る
構成が出来上がったら、ワイヤーフレームと呼ばれるページの構成を視覚的にわかりやすくした構成図を作ります。手書きでも、Illustratorのようなドローソフト、エクセルやワードなど、各々使いやすいものでOKです。大事なのは、無理しないことです。
まずは大まかにページ全体の構造を書く
大まかに全体の構造を考えましょう。例えば以下のように。
最初にヘッダー部分、真ん中にメインのエリアが左に、サイドバーとなるエリアを右、一番下にはフッターのエリア。
とてもシンプルですね。大体のホームページにはヘッダーとメインエリアとフッターは入ることがほとんどなので、サイドバーが入るかどうか、くらいかもしれません。
細部を作っていく
先ほどの「何を載せたいのか」で考えた載せたい情報を元に中身を割り振っていきます。
例えば、最初にサイトのロゴが画面の上にきて、その下に他のページへのリンクするメニュー。次にメインとなる大枠があり、右にサイドバーとしてサブの情報。一番下にはサイト内リンクや、関連ページへのリンク集、プロフィール用のテキスト…などなど、「こんな感じのレイアウトにしたい」というのを思いのまま書いてみましょう。
HTMLタグを割り振る
細部が出来上がったら通常はデザインを行いますが、今回はHTMLの練習なので構成ができたらHTMLタグでつくり上げる下準備をしましょう。以下の画像のようにどの部分にどのタグを使うかを考えます。
「なぜここにこのタグを使うんだろう？」と思いますよね。それをここから説明していきます。
適材適所にタグを使用する
HTMLのページでも行なったように、タグにはそれぞれ意味があります。画像にはimg、見出しにはh、リンクはa…など、ここまで読んでくればおわかりですね。これをここで使います。構成は先ほどの例で進めていきます。
ここから先はbodyタグの中に書いていきます。bodyタグまでのhtmlやheadなどの基本となる箇所は以下参考に。わからない方は以前の記事へ：「4.HTMLファイルを作ってみよう」
sample site
始まりの部分、ヘッダーエリア
まずはヘッダーから。ここで出てくるのは、
h1
ul
li
a
です。1つずつ見て行きましょう。
header
いきなり見覚えのないタグが出てきました。これはヘッダータグといって、ヘッダ要素やナビゲーションなどのグループに使います。今回はヘッダ要素全体を囲うので使用しています。
こうなりますね。
実際にここにいろいろと入っていくので、全体の箱的なものとして考えてもらえればです。html5から対応のタグなので、html5で書きたくないという方、xhtmlやhtml4.01で書いている場合はdiv id=”header”等で代用してください。
h1
見出しのhの最重要要素、h1です。ここには今回「SAMPLE SITE」というサイト名をいれます。下層ページの場合はサイト名にかぎらずそのページで一番重要な見出しをいれることが多いです。
見出しが入るのでHTMLはこんなかんじに。
SAMPLE SITE
h1が増えました。中身はサイト名です。
ul>li>a
ul, li, aと単独のタグはわかるけど、間の「>」は何を意味するんだ？そう思った方もいるかと思います。これは「ulの中にli、またその中にa」という意味になります。HTMLにするとこう。
ulは基本的にliとセットです。今回は下層ページにリンクするメニューとして見せたいので、liの中にaタグでテキストを囲ってあげればOKですね。テキストは「MENU1」「MENU2」…みたいな感じなのでHTMLはこんなかんじに。
SAMPLE SITE
なんか、それっぽくなってきました。header部分は以上です。
ページの最重要部分、メインエリア
ページのキモ、メインエリア。ここにこのページの一番伝えたい情報が入ってきます。ここで使用するタグです。
h2
p
h3
img
見ていきましょう。
div#main
divはわかりますね。#は今回初めてでてきました。これはid属性のことを#で例えています。（あとあとCSSで出てくるので、シャープはid、とおぼえておくとラクです）
id属性とは以下のようなものです。
ここはwrapという名前をつけたdivのエリアです。
idという名のごとく、自由に名前をつけることができます。どういうときに使うかと言うと、divというのがたくさん同じページにでてきたときに、他と区別をするために固有のid名をつけておけば、あとでCSSで「id名がwrapという名前がついているdivに対して、そのdivだけ背景を黒くして」といった指定が可能になります。
idと似たものでclassとありますが、この違いは使える回数の違いです。idが一度だけ、classは何回でも使ってもOKです。他にも違いはありますが、とりあえず今のところはこれでOK。
ということで、div#mainのHTMLはこうなります。
h2
次は見出しのh2。さっきh1がでてきたのでお分かりかと思いますが、このページで2番めに重要な見出しということですね。
HTMLは以下です。
大見出し
問題ないですね。
p
pタグが出てきました。文章を入れるタグでしたね。これはh2の大見出しに対する説明文章という位置づけ。
大見出し
テキストテキストテキストテキストテキストテキスト
続いていきましょう。
h3, img, p
また見出しのh3, それに画像のimg, そしてまた文章のpです。問題ないですね。同じものが二回繰り返されていますので注意。HTMLはこうなります。
大見出し
テキストテキストテキストテキストテキストテキスト
中見出し
![]()
テキストテキストテキストテキストテキストテキスト
中見出し
![]()
テキストテキストテキストテキストテキストテキスト
imgには必ずつく属性srcがあります。中身はまだ決まってないのでダブルクオーテーション連続にしています。画像が決まった段階でいれれるようにですね。仮にapple.jpgという名前の画像ファイルを表示しようとなるとこんなかんじに。
alt属性はなくても支障はないですが、SEO的に画像の説明文として入れておいたほうがいいので、セットにしておくと後がラク。
メインエリアはこんなかんじですね。
メインエリアの横に位置する、サイドバー
続いてサイドバー。バナーや下層ページへのリンク、新着情報表示として使ったりします。
使うタグは以下。
h4
p
ul
li
a
img
aside
また見慣れないタグが出てきました。asideタグは、サイドバーに使うのに相応しいタグ。スマホ表示のときはフッターの上に移動したりさせたりします。
headerやdiv id=”main”と同じですね。見慣れないタグでも、使い方は全く一緒なんです。
h4, p
先ほどメインエリアで出てきたのと一緒ですね。
見出し＋本文というシンプルな構造。
ul>li>a>img
入れ子要素きました。headerエリアにでてきたメニューとほぼ一緒ですね。テキストが画像に変わっただけです。バナーなので、imgが出てくるのは当然ですね。
※ちなみに上記の書き方で余白が空いているのは見やすいからそうしているだけであってタブキーで余白を作っています。これは改行しようが余白を開けようが表示には関係ありません。
最後に締めくくりのフッターエリアです。
これも新しいタグです。footerタグ。最初に似ているタグが出てきたのを覚えていますか？
一番最初に書いた、headerタグの対に位置するタグです。言葉の意味から推測できそうですが、フッター要素全体を囲うタグとして使用します。
ここでのタグです。
ul
li
a
HTMLはこうですね。
h5
今回の中で一番弱い見出し、h5です。h系のタグは6までなのでこの下にあとひとつという具合です。
「メニュー」を見出しにしたいのでHTMLは
こうなりますね。
ul>li>a
対に最後のタグです！これも今まで出てきたのと同じ、簡単ですね。
メニューという見出しの下に表すフッターメニュー用のリストです。そしてクリックすると別のページに飛ぶ…という風にしたいので、HTMLは以下。
テキストリンクなので、全体をulで囲み、テキストリンクをliとaで囲ってあげればOK。
で、これが3セットあるので、単純に3つ複製してあげればOKですね。
完成！
はい、これでHTMLのコーディングが出来ました！作ったファイルを「sample.html」等の名前で保存して、ダブルクリックしてブラウザで表示させてみましょう。見た目は簡素ですがhtmlタグが打てていると思います。
html, head, bodyタグも追加した完成形は以下。今回作ったサンプルファイルはこちら。ご自分のと見比べてみてください。ダウンロードは開いたあと、右クリックから「名前をつけて保存」。
いかがでしたか？意外と簡単、やっぱり難しい…色々あると思いますが、流れが掴めたのではないかと思います。次はCSSを学び装飾をしていきましょう。
sample site
SAMPLE SITE
大見出し
テキストテキストテキストテキストテキストテキスト
中見出し
![]()
テキストテキストテキストテキストテキストテキスト
中見出し
![]()
テキストテキストテキストテキストテキストテキスト
