HTML – オタク向けサイト作成講座

3.要素を入れる

では実際に要素を入れていきますが、
スマホ版の時に増えるもの・消えるものが有ります。

これはCSSで調整するので、一旦は全て入れておきます。

必要なら画像も用意しておきます。
今回は全部ダミーです。
他のページとも共通になる部分から先に作ります。

■ヘッダー
<head>とは別に、表示上の基本情報を入れます。
だいたいロゴとか、最初に目にしてほしいものです。

<div id="header">
<div class="inner">
	<h1><img src="images/logo.png" width="150" height="90" alt="logo"></h1>
	<p class="menuBtn">MENU</p>
</div>
</div>

</div>

画像（imgタグ）はh1で囲みました。
見出しタグといい、h1～h6まであります。名前のとおり、見出しに使います。
なおルール上、h1はそのページの主題につけるため、一度しか使えません。
テキストを<p>で囲っていますが、これは場所をコントロールするための準備です。
念のためclassも付けておきます。
こうしておくと後から要素を増やした時に調整が効きやすくなります。

※divを忘れてたので足しました

■フッター
一番最後に表示したい情報を入れます。
企業サイトだとここにカテゴリ一覧載せてることが多いです。
特に無いのでそれっぽくコピーライトでも入れておきましょう。

<div id="footer">
	<p class="copy">&copy;copyright</p>
</div>

<p class="copy">©copyright</p>

</div>

©は実体参照という書き方です。
見る環境、主に機械そのものに影響されて表示できなくなる文字が有ります。
これを「機種依存文字」と呼び、表示を揃えるために実体参照に変換して記述します。

ここまで記述したら、一旦そのファイルをコピーして取っておきましょう。
他のページを作るのに使います。

■TOPの中身を作る

メイン画像を入れます。

<div id="mvArea">
	<p><img src="image/mvImage.jpg" width="980" height="400" alt="main"></p>
</div>

</div>

一旦ここも<p>で画像を囲っておきます。

ナビを入れます。

<div id="gnavArea">
	<ul>
		<li><a href="#">カテゴリ1</a></li>
		<li><a href="#">カテゴリ2</a></li>
		<li><a href="#">ブックマーク</a></li>
		<li><a href="#">フォーム</a></li>
	</ul>
</div>

<ul>

<li><a href="#">ブックマーク</a></li>

</ul>

</div>

並列情報はリストタグで配置します。
別に<p>でも良いのですが、グループを作っておくことで分かりやすくなります。
aはリンク用のタグです。WEBでいちばん重要なタグです。

メインを入れます。

<div id="mainArea">
	<ul class="news">
		<li><a href="#">
				<dl>
					<dt><img src="images/news_img01.jpg" alt="20XX.XX.XX" width="200" height="100"></dt>
					<dd>
						<span class="date">20XX.XX.XX</span>
						<span class="text">dummy</span>
					</dd>
				</dl>
			</a>
		</li>
	</ul>
</div>

<dl>

<dd>

<span class="text">dummy</span>

</dd>

</dl>

</a>

</li>

</ul>

</div>

長くなるので一つしか入れていませんが、構成書では最高6つなので、入れておきましょう。
これも並列情報なので大枠はリストにしておきます。
更新情報から直接リンクしたいので、aで囲みます。
その中にもう一つあるdlは「定義リスト」のタグです。
dt　で定義した要素を、
dd　で補完あるいは説明する
という特殊な役割です。
spanはdivと同じように囲むタグですが、箱と言うよりは布のように柔軟な包み方が出来るタグです。

サイド…は構成書ではツイッターのウィジェットなので、今回は置いておきます。

上に戻るボタンを入れます。

<p class="goTop"><a href="#header">↑</a></p>

1	<p class="goTop"><a href="#header">↑</a></p>

構成上無くても平気な方は不要です。
指定しているリンクは、飛ばしたいエリアのIDと同じものを入れます。
#を最初に必ず必要です。これはclassではできません。
昔は<a name=”top”></a>などと指定しなければいけなかったページ内リンクですが、今は不要です。

これでTOPのHTMLは完成です。

さっき作っておいたコピーを使って、他のページも作っておきます。

<div id="contentsArea">
	<div id="sideArea">
		<dl>
			<dt>見出し</dt>
			<dd>
				<ul>
					<li><a href="">サブメニュー1</a></li>
					<li><a href="">サブメニュー2</a></li>
					<li><a href="">サブメニュー3</a></li>
				</ul>
			</dd>
		</dl>
	</div>
	<div id="mainArea">
		<div class="section">
			<h2>文章</h2>
			<div class="inner">
				<p>dummydummydummy.</p>	<p>dummydummydummydummydummydummydummydummydummydummydummydummy.</p>
			</div>
		</div>

		<div class="section">
			<h2>画像一覧</h2>
			<div class="inner">
				<ul class="unker">
					<li><a href="#sub01">ジャンル1</a></li>
					<li><a href="#sub02">ジャンル2</a></li>
					<li><a href="#sub03">ジャンル3</a></li>
					<li><a href="#sub04">ジャンル4</a></li>
					<li><a href="#sub05">ジャンル5</a></li>
				</ul>
			</div>

			<div class="column3">
				<div class="column">
					<p><a href="#">
						<span class="img"><img src="images/photo/thum/item01.jpg" alt="画像1" width="300" height="150"></span>
						<span class="title">タイトル</span>
						<span class="info">詳細説明<br>dummydummy</span>
					</a></p>
				</div>
				<div class="column">
					<p><a href="#">
						<span class="img"><img src="images/photo/thum/item02.jpg" alt="画像2" width="300" height="150"></span>
						<span class="title">タイトル</span>
						<span class="info">詳細説明<br>dummydummy</span>
					</a></p>
				</div>
				<div class="column">
					<p><a href="#">
						<span class="img"><img src="images/photo/thum/item03.jpg" alt="画像3" width="300" height="150"></span>
						<span class="title">タイトル</span>
						<span class="info">詳細説明<br>dummydummy</span>
					</a></p>
				</div>
				<div class="column">
					<p><a href="#">
						<span class="img"><img src="images/photo/thum/item04.jpg" alt="画像4" width="300" height="150"></span>
						<span class="title">タイトル</span>
						<span class="info">詳細説明<br>dummydummy</span>
					</a></p>
				</div>
				<div class="column">
					<p><a href="#">
						<span class="img"><img src="images/photo/thum/item05.jpg" alt="画像5" width="300" height="150"></span>
						<span class="title">タイトル</span>
						<span class="info">詳細説明<br>dummydummy</span>
					</a></p>
				</div>
				<div class="column">
					<p><a href="#">
						<span class="img"><img src="images/photo/thum/item06.jpg" alt="画像6" width="300" height="150"></span>
						<span class="title">タイトル</span>
						<span class="info">詳細説明<br>dummydummy</span>
					</a></p>
				</div>
			</div>
		</div>
	</div>
</div>

<dl>

<dd>

<ul>

<li><a href="">サブメニュー1</a></li>

<li><a href="">サブメニュー2</a></li>

<li><a href="">サブメニュー3</a></li>

</ul>

</dd>

</dl>

</div>

<p>dummydummydummy.</p> <p>dummydummydummydummydummydummydummydummydummydummydummydummy.</p>

</div>

</ul>

</div>