4日目 マークアップしてワイヤーフレームを作る
文章をマークアップしていきます。
当サイトでは、HTMLタグやCSSについて詳細な説明は省いています。HTMLやCSSについて知りたい方は以下のリファレンスサイトなどをご参考ください。
雛形を作る
まずHTMLの雛形を作ります。全てのページの共通部分です。新規にhtmlファイルを作成します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/import.css" type="text/css" media="screen">
<title> </title>
</head>
<body>
<div id="header"></div>
<div id="contents"></div>
<div id="footer"></div>
</body>
</html>詳細を見ていきます。
- 1行目：DOCTYPE宣言
- DOCTYPE宣言はHTML文書のバージョン情報をあらわすものです。いくつか種類がありますが、初心者には一番扱いやすいバーションがこれになります。
- 2行目：htmlタグ
- HTML文書の先頭を表しています。
- 3行目：headタグ
- ヘッダ情報を記述する部分で、実際のホームページには表示されません。
- 4行目：文字コードの指定
- 文字コードを指定します。shift_jis以外にiso-2022-jpやutf-8、euc-jpなどがありますが、どれを使用してよいかわからない人は｢shift_jis｣で問題ありません。 文字コードの指定はヘッダの一番最初に行います。そうしないとそれ以前に出てきた日本語が文字化けする可能性があります。また、同じ形式でHTMLファイルを保存する必要があります。
- 5行目：基準スタイルシート言語を指定する
- これを指定しておかないとブラウザによってはCSSが有効になりません。
- 6行目：基準スクリプト言語を指定する
- これを指定しておかないとブラウザによってはJavaScriptが有効になりません。
- 7行目：サイトの説明を記述する
- サイトの説明を文章で記述します。検索エンジンにも表示される部分なのでしっかり考えましょう。
- 8行目：ページのキーワードを記述する
- 以前はSEOのために用いられていましたが、スパムで悪用されたため、Google（参考：Official Google Webmaster Central Blog: Google does not use the keywords meta tag in web ranking）やYahoo!（参考：Yahoo Search No Longer Uses Meta Keywords Tag）ではSEOには全く有効ではないとのことですが、おまじない程度に入れておくくらいにとどめておきましょう。
- 9行目：外部スタイルシートの指定
- 外部スタイルシートの場所などを指定します。
- 10行目：タイトルを記述
- ブラウザの上部に表示されます。
- 11行目以降：コンテンツを記述
- bodyタグ以降にコンテンツを記述し、bodyタグとhtmlタグを閉じます。 コンテンツ部分はサイトによって異なるのですが、ヘッダ部分とコンテンツ部分、フッター部分はどんなサイトでも必要だと考えます。
コンテンツを記述する
まず、<body>～</body>の間にこれまで書いてきたサイトの内容を記述します。
当サイトの場合は以下のようになります。
7日間でできるCSSベースのホームページの作り方 top > 0日目 ホームページを作る前に用意するもの 0日目 ホームページを作る前に用意するもの ホームページを作るためには、いくつか必要なものがあります。まずそれらを用意しましょう。 ・紙とペン ・HTMLエディタ ・HTML/CSS辞典 ・レンタルサーバーの契約 ・ドメイン取得 ・FTPクライアント ・テスト環境
マークアップする
マークアップしていきます。使うタグは以下の種類がほとんどです。
- h1～h6
- p
- dl, dt, dd
- ol, li
- ul, li
- div
- span
- em
- strong
- table, tr, td
7日間でできるCSSベースのホームページの作り方
top > 0日目 ホームページを作る前に用意するもの
<h1>0日目 ホームページを作る前に用意するもの</h1>
<p>
ホームページを作るためには、いくつか必要なものがあります。まずそれらを用意しましょう。
</p>
<ol>
<li>紙とペン</li>
<li>HTMLエディタ</li>
<li>HTML/CSS辞典</li>
<li>レンタルサーバーの契約</li>
<li>ドメイン取得</li>
<li>FTPクライアント</li>
<li>テスト環境</li>
</ol>ワイヤーフレームを作る
Webページ内で要素をカテゴライズします。これをワイヤーフレーム（枠組み）化と言います。つまり、ヘッダ部分やメニュー部分、サブメニュー部分にわけ、<div>タグで囲みます。
<div>
<div>
7日間でできるCSSベースのホームページの作り方
</div>
<div>
top > 0日目 ホームページを作る前に用意するもの
</div>
<div>
<h1>0日目 ホームページを作る前に用意するもの</h1>
<p>
ホームページを作るためには、いくつか必要なものがあります。まずそれらを用意しましょう。
</p>
<ol>
<li>紙とペン</li>
<li>HTMLエディタ</li>
<li>HTML/CSS辞典</li>
<li>レンタルサーバーの契約</li>
<li>ドメイン取得</li>
<li>FTPクライアント</li>
<li>テスト環境</li>
</ol>
</div>
</div>idとclassの使い分け
私がよくやるidとclassの使い分けを紹介します。 先ほど作ったワイヤーフレームの<div>タグにidで名前をつけます。それ以外にidは使用しません。ただし、カテゴライズしても複数回出てくるものに関してはclassを使用します。
一方で、classはその他になります。テーブルとリストなどのスタイルを指定するにはclassを使用します。
なぜこうするかというと、実はCSSには優先順位があってidが一番優先されます。実際にCSSコーディングするとわかるのですが、この方法が一番、無駄にclass名を振らないで簡素にコーディングできるのです。
<div id="top">
<div id="header">
7日間でできるCSSベースのホームページの作り方
</div><!-- /#header -->
<div id="topicpath">
top > 0日目 ホームページを作る前に用意するもの
</div><!-- /#topicpath -->
<div id="contents">
<h1>0日目 ホームページを作る前に用意するもの</h1>
<p>
ホームページを作るためには、いくつか必要なものがあります。まずそれらを用意しましょう。
</p>
<ol>
<li>紙とペン</li>
<li>HTMLエディタ</li>
<li>HTML/CSS辞典</li>
<li>レンタルサーバーの契約</li>
<li>ドメイン取得</li>
<li>FTPクライアント</li>
<li>テスト環境</li>
</ol>
</div><!-- /#contents -->
</div><!-- /#top -->参考サイト
ワイヤーフレームについて、それとワイヤーフレームの重要性について書いてあります。是非読んでみてください。
ステップアップ！当サイトのコラム
Webページを量産するのは結構面倒なのですが、うまくツールなどを活用すれば簡単に作ることも可能です。