footer東京都を拠点にしたWebサイト制作。公開ここからは実践です。ワイヤーフレームと呼ばれるラフを書いて、まずはウェブページをどのように構成するかを考え、そこに見合ったHTMLタグをどのように使えばいいのか書いていきます。デザイン部分は端折りますが、実際にウェブサイトを制作する際のプロセスだと思っていただいてOKです。完成形のHTMLタグとサンプルファイル有り。ページ末に掲載しています。メニューまずは構成を練るホームページを作ろう!と思いついても、「ではどこから作っていけばいいのだろう?」と思うのが普通です。ここでは、その基本となる「どのようにページを構成するか」を考えます。何を載せたいのかここが一番の軸になります。ウェブページを作るにあたって、何を載せたいか?どんな情報を載せるか?もっと言えば、このページを見る人がどんな情報を得てもらいたいか?を考えましょう。パン屋さんが自分のお店をもっと広く知ってもらいたいとしたら、どんなパンが売られていて、それぞれのパンに対しての想いや情熱、製造工程などを載せ仕込みから店頭に並ぶまでを掲載等がホームページに掲載する情報として浮かびます。他に、ウェブサービスを展開する会社がサービスをもっと使ってもらうためのサイトであれば、そのサービスの概要、そのサービスはどんなメリットがあるか、他社の同サービスと比べてどこが秀でいているか、よくある質問と答えなどなど、ユーザーにとって便利な情報を載せるべきでしょう。何を載せたいのか?言い換えれば、どんな情報を得て欲しいか?という情報を掲載します。ワイヤーフレームを作る構成が出来上がったら、ワイヤーフレームと呼ばれるページの構成を視覚的にわかりやすくした構成図を作ります。手書きでも、Illustratorのようなドローソフト、エクセルやワードなど、各々使いやすいものでOKです。大事なのは、無理しないことです。大まかにページ全体の構造を書く大まかに全体の構造を考えましょう。最初にヘッダー部分、真ん中にメインのエリアが左に、サイドバーとなるエリアを右、一番下にはフッターのエリア。大体のホームページにはヘッダーとメインエリアとフッターは入ることがほとんどなので、サイドバーが入るかどうか、くらいかもしれません。細部を作っていく先ほどの「何を載せたいのか」で考えた載せたい情報を元に中身を割り振っていきます。最初にサイトのロゴが画面の上にきて、その下に他のページへのリンクするメニュー。次にメインとなる大枠があり、右にサイドバーとしてサブの情報。下にはサイト内リンクや、関連ページへのリンク集、プロフィール用のテキスト...などなど、「こんな感じのレイアウトにしたい」というのを思いのまま書いてみましょう。HTMLタグを割り振る細部が出来上がったら通常はデザインを行いますが、今回はHTMLの練習なので構成ができたらHTMLタグでつくり上げる下準備をしましょう。以下の画像のようにどの部分にどのタグを使うかを考えます。「なぜここにこのタグを使うんだろう?」と思いますよね。それをここから説明していきます。適材適所にタグを使用するHTMLのページでも行なったように、タグにはそれぞれ意味があります。画像にはimg、見出しにはh、リンクはa...など、ここまで読んでくればおわかりですね。これをここで使います。構成は先ほどの例で進めていきます。ここから先はbodyタグの中に書いていきます。bodyタグまでのhtmlやheadなどの基本となる箇所は以下参考に。始まりの部分、ヘッダーエリアまずはヘッダーから。ここで出てくるのは、headerh1ulliaです。1つずつ見て行きましょう。headerいきなり見覚えのないタグが出てきました。これはヘッダータグといって、ヘッダ要素やナビゲーションなどのグループに使います。今回はヘッダ要素全体を囲うので使用しています。実際にここにいろいろと入っていくので、全体の箱的なものとして考えてもらえればです。id=”header”等で代用してください。h1見出しのhの最重要要素、h1です。SITE」というサイト名をいれます。下層ページの場合はサイト名にかぎらずそのページで一番重要な見出しをいれることが多いです。見出しが入るのでHTMLはこんなかんじに。SITEh1が増えました。aと単独のタグはわかるけど、間の「>」は何を意味するんだ?そう思った方もいるかと思います。これは「ulの中にli、またその中にa」という意味になります。HTMLにするとこう。ulは基本的にliとセットです。今回は下層ページにリンクするメニューとして見せたいので、liの中にaタグでテキストを囲ってあげればOKですね。テキストは「MENU1」「MENU2」...みたいな感じなのでHTMLはこんなかんじに。SITEMENU1MENU2MENU3MENU4なんか、それっぽくなってきました。header部分は以上です。ページの最重要部分、メインエリアページのキモ、メインエリア。ここにこのページの一番伝えたい情報が入ってきます。ここで使用するタグです。div#mainh2ph3img見ていきましょう。div#maindivはわかりますね。#は今回初めてでてきました。これはid属性のことを#で例えています。(あとあとCSSで出てくるので、シャープはid、とおぼえておくとラクです)id属性とは以下のようなものです。ここはwrapという名前をつけたdivのエリアです。idという名のごとく、自由に名前をつけることができます。いうときに使うかと言うと、divというのがたくさん同じページにでてきたときに、他と区別をするために固有のid名をつけておけば、あとでCSSで「id名がwrapという名前がついているdivに対して、そのdivだけ背景を黒くして」といった指定が可能になります。idと似たものでclassとありますが、この違いは使える回数の違いです。idが一度だけ、classは何回でも使ってもOKです。他にも違いはありますが、とりあえず今のところはこれでOK。いうことで、div#mainのHTMLはこうなります。参考:11.HTMLファイルにclassとidをつけるh2次は見出しのh2。さっきh1がでてきたのでお分かりかと思いますが、このページで2番めに重要な見出しということですね。大見出し問題ないですね。ppタグが出てきました。文章を入れるタグでしたね。これはh2の大見出しに対する説明文章という位置づけ。大見出しテキストテキストテキストテキストテキストテキスト続いていきましょう。