Home > P.247

P.247

  • Last Modified: 2008年12月 2日 23:22

このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。 書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。

また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。 ( ZIP アーカイブには解説文は含まれていません。)

解説

サイト制作の手順はさまざまですが、今回は、すでに完成している図を元に XHTML 文書化し、 CSS を用いてそれぞれパーツを作り込んで完成図に近づけるという流れになります。 これは、既存のサイトをリデザインするなどの場合も同じ工程になります。

このような場合、基になる(完成された)デザインから文書構造を抜き出し、見出しのアウトラインから考えるのがよいでしょう。

XHTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Standards Design</title>
</head>
<body>
<h1><a href="./"><img src="style/img/site-name.gif" alt="Web Standards Design" width="223" height="37" /></a></h1>
<ul id="globalNavi">
	<li class="current"><a href="./">Home</a></li>
	<li><a href="./">About</a></li>
	<li><a href="./">Archives</a></li>
	<li><a href="./">Bookmarks</a></li>
</ul>
<ul class="feeds">
	<li><a href="./">ATOM</a></li>
	<li><a href="./">RSS2.0</a></li>
</ul>
<form id="blogSearch" method="get" action="hoge.cgi">
	<fieldset>
		<legend>
			<label for="searchKeyword">Search</label>
		</legend>
		<div>
			<input type="hidden" name="IncludeBlogs" value="1" />
			<input type="text" id="searchKeyword" name="search" value="" size="20" />
		</div>
	</fieldset>
</form>
<h2>Recent Entries</h2>
<h3>Absolute Positioning</h3>
<ul class="info">
	<li>2007-01-05 Fri. 04:22</li>
	<li>Category: <a href="./">CSS</a></li>
	<li><a href="./">Permalink</a></li>
</ul>
<p>絶対配置の特徴は、XHTML文書の構造に依存しない配置が可能なことです。最下部に記述された要素を、表示上では一番上に配置させることもできます。</p>
<p class="more"><a href="./">Continue</a></p>
<ul class="reaction">
	<li class="comment"><a href="./">Comment</a></li>
	<li class="trackback"><a href="./">Trackback</a></li>
</ul>
<h3>Negative Margin Layout</h3>
<ul class="info">
	<li>2007-01-05 Fri. 04:22</li>
	<li>Category: <a href="./">CSS</a></li>
	<li><a href="./">Permalink</a></li>
</ul>
<p>ネガティブマージンとは、marginプロパティの値に負の数値を指定することを言い、マイナスマージンと呼ぶこともあります。floatプロパティでのレイアウトにネガティブマージンを利用することで、これまで解説した方法では難しかったレイアウトを実現することができます。</p>
<p class="more"><a href="./">Continue</a></p>
<ul class="reaction">
	<li class="comment"><a href="./">Comment</a></li>
	<li class="trackback"><a href="./">Trackback</a></li>
</ul>
<h2>Headline</h2>
<ul>
	<li><a href="./">定義リストの横並び</a></li>
	<li><a href="./">垂直センター配置</a></li>
	<li><a href="./">印刷用CSS</a></li>
	<!-- 中略 -->
</ul>
<h2>Recent Reaction</h2>
<p>当サイトに寄せられたコメントとトラックバックを新着3件表示しています。</p>
<h3>Comments</h3>
<ul>
	<li>2007-01-01: <a href="./">Title</a> - <a href="./">Name</a></li>
	<!-- 中略 -->
	<li class="more"><a href="./">More</a></li>
</ul>
<h3>Trackback</h3>
<ul>
	<li>2007-01-01: <a href="./">Title</a> - <a href="./">Site Name</a></li>
	<!-- 中略 -->
	<li class="more"><a href="./">More</a></li>
</ul>
<dl id="subNavi">
	<dt>Categories</dt>
	<dd>
		<ul>
			<li><a href="./">Artworks</a></li>
			<li><a href="./">CSS</a></li>
			<li><a href="./">Design</a></li>
			<!-- 中略 -->
			<li class="more"><a href="./">More</a></li>
		</ul>
	</dd>
	<dt>Archives</dt>
	<dd>
		<ul>
			<li><a href="./">2007-01</a></li>
			<li><a href="./">2006-12</a></li>
			<li><a href="./">2006-11</a></li>
			<!-- 中略 -->
			<li class="more"><a href="./">More</a></li>
		</ul>
	</dd>
</dl>
<p class="return">
	<a href="#header">
		<img src="style/img/icon_return.gif" alt="ページ上部に戻る" width="33" height="33" />
	</a>
</p>
<ul id="siteInfo">
	<li><a href="./">サイトポリシー</a></li>
	<li><a href="./">お問い合わせ</a></li>
	<li><a href="./">注意事項</a></li>
	<li><a href="./">ヒストリー</a></li>
</ul>
<address>Copyright (C) Web Standards Design All Rights Reserved.</address>
</body>
</html>

Download

Comments:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Trackbacks:0

TrackBack URL for this entry
http://lh3.jp/files/system/mtos/mt-tb.cgi/95
Listed below are links to weblogs that reference
P.247 from lh3.jp

Home > P.247

Tag Cloud
Categories
Archives
Search
Feeds
  • Feed by feedburner.jp

Return to page top