Home > P.247

P.247

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

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

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

Home
- works
  - 2008
    - 実践 Web Standards Design サポートページ
      - sample
        
        6 章
        
        P.247
前： P.242
次： P.251

解説

サイト制作の手順はさまざまですが、今回は、すでに完成している図を元に 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>