Home > P.251

P.251

Last Modified: 2008年11月29日 17:04

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

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

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

解説

基本的な要素をマークアップし終わったところで、 DOCTYPE を宣言します。本文で説明した、以下の工程にあたります。

DOCTYPE は最終的に宣言する（→ 34 ページ）
必要に応じて xml 宣言をする（→ 36 ページ）

次に、 div 要素を用いて見出しの影響範囲をグループ化した後（ 44 ページの「div 要素による構造化」を参照）、さらに、関連性の高い要素をグループ化して文書構造を補強します。

XHTML

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Standards Design</title>
</head>
<body>

<div id="header">
  <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>
  
</div><!-- end div#header -->

<div id="content">
  <div id="main">
    <div class="section" id="recentEntries">
      <h2>Recent Entries</h2>
      
      <div class="section entry" id="entry002">
        <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>
        <div class="textBody">
          <p>絶対配置の特徴は、XHTML文書の構造に<!-- 省略 --></p>
          <p class="more"><a href="./">Continue</a></p>
        </div>
        <ul class="reaction">
          <li class="comment"><a href="./">Comment</a></li>
          <li class="trackback"><a href="./">Trackback</a></li>
        </ul>
      </div>
      
      <div class="section entry" id="entry001">
        <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>
        <div class="textBody">
          <p>ネガティブマージンとは、marginプロパティ<!-- 省略 --></p>
          <p class="more"><a href="./">Continue</a></p>
        </div>
        <ul class="reaction">
          <li class="comment"><a href="./">Comment</a></li>
          <li class="trackback"><a href="./">Trackback</a></li>
        </ul>
      </div>
      
    </div><!-- end div#recentEntries -->
    
    <div class="section" id="headline">
      <h2>Headline</h2>
      <ul>
        <li><a href="./">定義リストの横並び</a></li>
        <li><a href="./">垂直センター配置</a></li>
        <li><a href="./">印刷用CSS</a></li><!-- 中略 -->
      </ul>
    </div><!-- end div#headline -->
    
    <div class="section" id="recentReaction">
      <h2>Recent Reaction</h2>
      <p>当サイトに寄せられたコメントとトラックバックを新着3件表示しています。</p>
      
      <div class="section comment">
        <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>
      </div>
      
      <div class="section trackback">
        <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>
      </div>
    </div><!-- end div#recentReaction -->
    
  </div><!-- end div#main -->
  
  <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><!-- end dl#subNavi -->
  
  <p class="return">
    <a href="#header">
      <img src="style/img/icon_return.gif" alt="ページ上部に戻る" width="33" height="33" />
    </a>
  </p>
  
</div><!-- end div#content -->

<div id="footer">
  <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>
</div><!-- end div#footer-->

</body>
</html>