カラム指定
サンプルのネットショップは、グローバルナビゲーションを配置した、2カラム左サイドバータイプです。
ユーザーにとって使い勝手の良いネットショップは、階層が分かりやすいグローバルナビゲーションを設置した方が良いと考えます。
XHTMLの基本構造は下記の通りです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta name="Description" content="*** ページの概要 ***" /> <meta name="Keywords" content="*** キーワード ***,*** キーワード ***,*** キーワード ***" /> <title>サンプルネットショップ</title> <link rel="stylesheet" href="base.css" type="text/css" media="screen,tv" /> </head> <body> <div id="wrapper"> <div id="header"> <!-- 見出し --> <h1>キーワード[トップレベルカテゴリー]</h1> <!-- タイトル --> <p class="logo"><a href="index.html">*** 会社名｜店舗名｜タイトル ***</a></p> <!-- 概要 --> <p class="description">各ページの説明を入力(商品キーワードを入れると効果的)。配置は自由に変更可能。</p> <!-- グローバルナビゲーション --> <ul id="globalnavi"> <li><a href="#" title="商品カテゴリ1">商品カテゴリ 1</a></li> <li><a href="#" title="商品カテゴリ2">商品カテゴリ 2</a></li> <li><a href="#" title="商品カテゴリ3">商品カテゴリ 3</a></li> <li><a href="#" title="商品カテゴリ4">商品カテゴリ 4</a></li> <li><a href="#" title="商品カテゴリ5">商品カテゴリ 5</a></li> </ul> <!-- / globalnavi end --> <ul> <li><a href="#">ご利用案内</a></li> <li><a href="#">個人情報の取扱い</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!-- / header end --> <div id="contents"> <!-- コンテンツ ここから --> <h2>*** 見出し ***</h2> <p class="page-top"><a href="#header" title="このページの先頭へ">▲Page Top</a></p> <!-- コンテンツ ここまで --> </div><!-- / contents end --> <div id="sidebar"> <!-- サイドバー ここから --> <p class="sidetitle">*** ローカルナビ ***</p> <ul class="localnavi"> <li><a href="#">*** リンク ***</a></li> <li><a href="#">*** リンク ***</a></li> <li><a href="#">*** リンク ***</a></li> <li><a href="#">*** リンク ***</a></li> <li><a href="#">*** リンク ***</a></li> </ul> <dl> <dt>その他の情報</dt> <dd>*** 文章 ***</dd> <dt>その他の情報</dt> <dd>*** 文章 ***</dd> </dl> <!-- サイドバー ここまで --> </div><!-- / sidebar end --> <div id="footer"> <dl> <dt>サンプルネットショップ</dt> <dd>〒6900822 島根県松江市サンプル町1-1-1<br />サンプルビル2F</dd> <dd>Tel 0000-00-0000 Fax 0000-00-0000</dd> <dd>URL http://www.css-designsample.com</dd> <dd>E-mail info@css-designsample.com</dd> </dl> <ul> <li><a href="#">会社概要</a></li> <li><a href="#">特定商取引に関する表記</a></li> </ul> <!-- コピーライト --> <address>Copyright © CSSデザインサンプル. All Rights Reserved.</address> </div><!-- / footer end --> </div><!-- / wrapper end --> </body> </html>
XHTML上で、コンテンツ部分を先に記述できるタイプです。
#contentsはfloat:right;、#sidebarはfloat:left;、#footerで解除するオーソドックスなレイアウトです。
。
