top > ホームページの作り方 > 4日目 マークアップしてワイヤーフレームを作る

4日目 マークアップしてワイヤーフレームを作る

文章をマークアップしていきます。

  1. 雛形を作る
  2. コンテンツを記述する
  3. マークアップする
  4. ワイヤーフレームを作る
  5. idとclassの使い分け

当サイトでは、HTMLタグやCSSについて詳細な説明は省いています。HTMLやCSSについて知りたい方は以下のリファレンスサイトなどをご参考ください。

雛形を作る

まずHTMLの雛形を作ります。HTMLにはいくつかバージョンがあります。

[2015/3/14追記]

2015年現在であれば、新規にホームページを作るのであれば『HTML5』が好ましいです。古いブラウザにも対応させるのであれば、『HTML4.01』あるいは『XHTML1.0』を選択します。

Googleは、2015年4月からホームページがスマートフォンなどのモバイルに対応しているかどうかを、ランキング要素として使用すると発表しました。スマートフォン向けのホームページにするなら最新のバージョンであるHTML5が制作しやすいですが、HTML4.01やXHTML1.0でも、ちゃんとスマートフォンで表示されるのでご安心ください。

例として、「HTML4.01」のバージョンでの記述を紹介します。

全てのページの共通部分です。新規に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ファイルを保存する必要があります。
HTML4.01のバージョンを使用する際の推奨文字コードは「Shift_JIS」ですが、XHTMLのバージョンでは基本の文字コードが「UTF-8」です。HTML5のバージョンで利用する場合は、文字コードは「UTF-8」しか利用できません。(他の文字コードも実情使えますが、仕様上は使えないことになっています。)
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ページを量産するのは結構面倒なのですが、うまくツールなどを活用すれば簡単に作ることも可能です。

ページの最終更新日:2015.08.16

※当サイトではWebサイトのことを、一般的な通称の「サイト」、「ホームページ」、「HP」などと表記しておりますが全て同一のことです。


« トップページへ戻る
↑ ページのトップへ戻る