実践 タグの書き方と文書構造

ページ内 目次
  1. きれいな(X)HTMLの自分的書き方
  2. 実践 タグの書き方と文書構造
  3. 積水ハウスHTML + CSS
  4. HTMLをXHTMLに！

ポイント

ただしく、きれいなHTMLを書くポイントは二つです。

  • 文書構造を理解したHTML記述。
  • divでの構造化。

実践

ここからは、実際にくみながら説明していきたいと思います。

普段よく見慣れている、積水ハウスサイトですが、テーブルでくまれているので、これをhtml strctにしていきたいと思います。

(画像の中の文字、FLASHの中の文字は、画像にせずText扱いにします。)

まず始めに

header、content、footerに分けて考える。

積水ハウス

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>積水ハウス（セキスイハウス）｜住宅メーカー（ハウスメーカー）</title>
<link rel="stylesheet" href="css/import.css" type="text/css"  />
</head>
<body>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>

目次へ戻る

中身を考える

header

ヘッダー

<div id="header">
	<h1><a href="index.html"><img src="img/rogo.gif" alt="SEKISUI HOUSE" width="71" height="32"></a></h1>
		<h2><img src="img/sekisuihouse.gif" alt="積水ハウス株式会社" width="104" height="13"></h2>
		<ul id="guide">※
			<li><a href="">investor Relations(English)</a></li>
			<li><a href="">企業・IR情報</a></li>
			<li><a href="">検索・サイトマップ</a></li>
			<li><a href="">カタログ請求</a></li>
			<li><a href="">お問い合わせ</a></li>
		</ul>
</div>

※ cssで個別指定が出来るように、IDを指定してあげましょう。

h2の前は<div class="section">で囲わないとだめですね。

<div id="header">
	<h1><a href="index.html"><img src="img/rogo.gif" alt="SEKISUI HOUSE" width="71" height="32"></a></h1>
		<div class="section">
			<h2><img src="img/sekisuihouse.gif" alt="積水ハウス株式会社" width="104" height="13"></h2>
			<ul id="guide">※
				<li><a href="">investor Relations(English)</a></li>
				<li><a href="">企業・IR情報</a></li>
				<li><a href="">検索・サイトマップ</a></li>
				<li><a href="">カタログ請求</a></li>
				<li><a href="">お問い合わせ</a></li>
			</ul>
		</div>
</div>

ん、でもこれってあまりよくない。

積水ハウスはページのタイトルなのに、かこってるのはguideの部分だけになってしまっています。

全体をかこってやれば・・と思うけど、<div id="header">をつきだしてのマークアップはできないので。

もしやるなら。

<div id="header">
	<h1><a href="index.html"><img src="img/rogo.gif" alt="SEKISUI HOUSE" width="71" height="32"></a></h1>
	<ul id="guide">
		<li><a href="">investor Relations(English)</a></li>
		<li><a href="">企業・IR情報</a></li>
		<li><a href="">検索・サイトマップ</a></li>
		<li><a href="">カタログ請求</a></li>
		<li><a href="">お問い合わせ</a></li>
	</ul>
</div>
<div id="content">
	<div class="section">
		<h2><img src="img/sekisuihouse.gif" alt="積水ハウス株式会社" width="104" height="13"></h2>
	</div>
</div>
<div id="footer">
</div>

contentの中に入れてやるとか。

<div id="header">
	<h1><a href="index.html"><img src="img/rogo.gif" alt="SEKISUI HOUSE" width="71" height="32"></a></h1>
	<p id="sitename"><img src="img/sekisuihouse.gif" alt="積水ハウス株式会社" width="104" height="13"></p>
	<ul id="guide">
		<li><a href="">investor Relations(English)</a></li>
		<li><a href="">企業・IR情報</a></li>
		<li><a href="">検索・サイトマップ</a></li>
		<li><a href="">カタログ請求</a></li>
		<li><a href="">お問い合わせ</a></li>
	</ul>
</div>

h2をやめてpにしてidをつけるとか。

個人的に<p id="sitename">がしっくりきたので、これで行きたいと思います。

目次へ戻る

content

FLASH部分

flash部分

<div id="content">
	<ul id="menu">※
		<li><a href="">戸建住宅</a>
			<ul>
				<li><a href="">鉄骨2階建て</a></li>
				<li><a href="">鉄骨3階建て</a></li>
				<li><a href="">木造住宅</a></li>
			</ul>
		</li>
		<li><a href="">分譲住宅・宅地</a></li>
		<li><a href="">分譲マンション</a></li>
		<li><a href="">賃貸住宅経営</a></li>
		<li><a href="">shamaison.com</a></li>
		<li><a href="">医療・看護</a></li>
	</ul>
	<p id="topimage"><img src="img/sekisuihouse.gif" alt="積水ハウス株式会社" width="574" height="287"></p>※
</div>

※特別なやつにはIDを忘れずに。

目次へ戻る

企業情報、関連情報 部分

企業情報、関連情報

<dl id="infonav">
	<dt>企業情報</dt>
	<dd>
		<ul>
			<li><a href="">企業・IR情報</a></li>
			<li><a href="">ニュースリリース</a></li>
			<li><a href="">サステナビリティレポート</a></li>
			<li><a href="">採用情報</a></li>
			<li><a href="">CMギャラリー</a></li>
		</ul>
	</dd>
	<dt>関連情報</dt>
	<dd>
		<ul>
			<li><a href="">住宅金融支援機構</a></li>
			<li><a href="">住団連</a></li>
			<li><a href="">日本住宅ローン</a></li>
		</ul>
	</dd>
</dl>

ddの中にulを入れています。前のパターン(ナビの部分)と同じようにしようか迷いましたが、次のお知らせ部分と合わせるため、dl dt ddにしました。

目次へ戻る

お知らせ 部分

お知らせ

<dl id="news">
	<dt>お知らせ</dt>
	<dd id="assist">
		<ul>
			<li><img src="../img/list.gif" alt="過去記事一覧" width="69" height="20"></li>
			<li><img src="../img/rss.gif" alt="RSS" width="69" height="20"></li>
		</ul>
	</dd>
	<dd><a href=""><span class="date">2007.05.11</span> 北陸３県の地域情報をリニューアルしました。</a></dd>
	<dd><a href=""><span class="date">2007.05.01</span> 木造戸建て商品「縁の家（ゆかりのいえ）」のページを公開しました。</a></dd>
	<dd><a href=""><span class="date">2007.04.27</span> 「持続可能性報告書(環境・CSRに関する取組み)2007」のページを追加しました。</a></dd>
	<dd><a href=""><span class="date">2007.04.11</span> 賃貸住宅新商品「ヴィラーチェ Villace」のページを公開しました。</a></dd>
	<dd><a href=""><span class="date">2007.04.05</span> 戸建住宅商品「イズオーダー」「ビーエコルド 」のページを公開しました。</a></dd>
	<dd><a href=""><span class="date">2007.04.05</span> 地震動エネルギー吸収システム＜SHEQAS（シーカス）＞のページを公開しました。</a></dd>
	<dd><a href=""><span class="date">2007.04.05</span> ハイブリッド光触媒塗装外壁「ECORDEC ウォール」のページを公開しました。</a></dd>
	<dd><a href=""><span class="date">2007.03.29</span> 「サステナブル デザイン ラボラトリー」のサイトを追加しました。</a></dd>
	<dd><a href=""><span class="date">2007.03.23</span> お客様情報の事故について</a></dd>
	<dd><a href=""><span class="date">2006.12.20</span> 「ステキな暮らしがみつかる『シャーメゾン』のお部屋探し」サイトをリニューアルしました。</a></dd>
</dl>

過去記事一覧とRSSボタンもなかに入れてあります。

<dl id="news">
	<dt>お知らせ</dt>
	<ul>
		<li><img src="../img/list.gif" alt="過去記事一覧" width="69" height="20"></li>
		<li><img src="../img/rss.gif" alt="RSS" width="69" height="20"></li>
	</ul>
	<dd><a href=""><span class="date">2007.05.11</span> 北陸３県の地域情報をリニューアルしました。</a></dd>
	<dd><a href=""><span class="date">2007.05.01</span> 木造戸建て商品「縁の家（ゆかりのいえ）」のページを公開しました。</a></dd>
</dl>

このように書くことができないので注意です。dlのなかにはdtとddしかいれることができません。

footer

footer

<div id="footer">
	<ul>
		<li id="privacy"><a href="">お客さま情報保護方針</a></li>
		<li id="copyright"><a href="">COPYRIGHT &copy; SEKISUI HOUSE, LTD. ALL RIGHTS RESERVED.</a></li>
		<li id="attention"><a href="">弊社ウェブサイト利用上のご留意事項</a></li>
	</ul>
</div>

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/72

このページの先頭へ戻る