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

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

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

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

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

雛形を作る

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

[2017/9/24追記]

2017年現在であれば、ホームページを新規に制作する場合、リニューアルする場合『HTML5』を利用しましょう。

[2015/3/14追記]

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

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

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

全てのページの共通部分です。新規にhtmlファイルを作成します。

<!DOCTYPE html>
<html lang="jp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<title></title>
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
	<header>
		<h1>サイト名</h1>
	</header>
	<nav>
		<div id="gnav">
			<ul>
				<li><a href="">メニュー</li>
			</ul>
		</div><!-- /gnav -->
	</nav>
	<div id="contents">
		<div id="main">
		</div><!-- /main -->
		<div id="sub">
		</div><!-- /sub -->
	</div><!-- /contents -->
	<footer>
		<div id="copyright">Copyright (C) 2017 XXX. All Rights Reserved.</div>
	</footer>
</body>
</html>

詳細を見ていきます。

1行目:DOCTYPE宣言
DOCTYPE宣言はHTML文書のバージョン情報をあらわすものです。いくつか種類がありますが、現在なら最新版のHTML5を選びましょう。HTML5では、Document Type宣言はとてもシンプルです。
2行目:htmlタグ
HTML文書の先頭を表しています。
3行目:headタグ
ヘッダ情報を記述する部分で、実際のホームページには表示されません。
4行目:文字コードの指定
文字コードを指定します。文字コードもいくつかありますが、HTML5のバージョンで利用する場合は、文字コードは基本的には「UTF-8」を選択しましょう。他の文字コード(Shift_JISなど)を使用することも可能です。
文字化けを防ぐためにも、一番最初(head開始タグの次)に設置するようにしましょう。
5行目:viewport設定
スマートフォンなどPC以外のデバイスも対応するなら必須です。
色々書き方はあるのですが、GoogleのWebサイトでも使用されるコードを推奨します。
6行目:keywords属性
keywords属性はその名の通り、Webページのキーワードを記述するmetaタグですが、SEO対策として用いられる目的が多いです。ただし、それも現時点ではあまり効果がないとも言われています。おまじない程度に設置する程度ですね。
7行目:description属性
description属性はWebページの説明文を記述するmetaタグです。こちらもSEO対策として用いられる目的が多いですが、Googleなどの検索結果ページも表示される部分ですので、非常に重要になってきます。
8行目:titleタグ
titleタグは必須です。ブラウザの上部にも表示されますし、SEOの意味合いも非常に重要ですので、わかりやすいタイトルを付けるように心がけましょう。
9行目:IEのHTML5対策
IE8以前はHTML5に対応していないので、HTML5のコードを記述すると正常にWebページが読み込まれない可能性があります。それを回避するためのJavaScriptを読み込みます。
ここではGoogleで配布されているJavaScriptを利用すると便利です。
12行目:ファビコン設定
ファビコンは、ブラウザのタブなどに表示されるアイコンです。設置しなくてもよいですが、あるほうが区別ができてユーザビリティー的には良いかと思います。「link」要素は必ず「rel」と「heaf」が必須です。
13行目:CSSの読み込み
外部スタイルシートの場所を指定します。CSSは外部ファイルとしたほうが管理しやすいです。
14行目:JavaScriptの読み込み
外部JavaScriptの場所を指定します。JavaScriptもCSS同様外部ファイルとしたほうが管理しやすいです。
17行目以降:コンテンツを記述
bodyタグ以降にコンテンツを記述し、bodyタグとhtmlタグを閉じます。
コンテンツ部分はサイトによって異なるのですが、ヘッダ部分とコンテンツ部分、フッター部分はどんなサイトでも必要だと考えます。
ヘッダー部分には「header」タグを、メニュー部分には「nav」タグを、フッター部分には「footer」タグを利用することをお勧めします。

コンテンツを記述する

まず、<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ページを量産するのは結構面倒なのですが、うまくツールなどを活用すれば簡単に作ることも可能です。

ページの最終更新日:2017.09.24

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


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