Home > P.289

P.289

Last Modified: 2008年11月29日 19:49

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

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

Home
- works
  - 2008
    - 実践 Web Standards Design サポートページ
      - sample
        
        6 章
        
        P.289
前： P.287
次： P.293

解説

サンプルを基に XHTML 文書を制作します。

絶対配置を利用すると XHTML 文書の構造から切り離したボックスの自由な配置が可能になりますが、スタイルシートを無効にした状態でも文書の意味が正しく伝わるように XHTML 文書を制作しましょう。

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>Mushline</title>
</head>
<body>
  <h1><a href="./" title="トップページへ戻る"><img src="style/img/title.gif" alt="Mushline" width="216" height="83" /></a></h1>
  <p id="pageImage"><img src="style/img/home_pic.gif" alt="カワイ子ちゃん？" width="201" height="371" /></p>
  
  <div class="section" id="siteInfo">
    <h2><img src="style/img/info.gif" width="220" height="11" alt="Information" /></h2>
    <ul>
      <li>2007-02-20: <a href="./">Artworks</a>に<a href="./">en Blanc et Noir</a>を追加しました。</li>
      <li>2007-01-10: Text text text text text</li>
      <li>2006-12-12: Text text text text text</li>
      <li>2006-09-12: Text text text text text</li>
      <li>2006-08-03: Text text text text text</li>
    </ul>
  </div>
  
  <div class="section" id="contentsMenu">
    <h2>Contents</h2>
    <ul>
      <li class="about"><a href="./">About</a></li>
      <li class="artworks"><a href="./">Artworks</a></li>
      <li class="links"><a href="./">Links</a></li>
      <li class="board"><a href="./">Board</a></li>
    </ul>
  </div>
  
  <div class="section" id="otherContents">
    <h2>Other Contents</h2>
    <p>Related with Pictures, Graphics, 3DCG and My Favorite Music, Website Work, etc...</p>
    <ul>
      <li class="junk"><a href="./">Junk</a></li>
    </ul>
  </div>
  
  <div class="section" id="aboutSite">
    <h2>About This Site</h2>
    <p>当サイトはアサノによるイラストサイトです。<!-- 以下、略 --></p>
    <address>
      Last modified: 2006-09-12 (Tue) 21:53:41 JST <br />
      <!-- 以下、略 -->
    </address>
  </div>
  
</body>
</html>