カラム指定｜ネットショップの作り方

現在地: Home » ネットショップの作り方 » ネットショップ作成 » カラム指定

ネットショップ作成

カラム指定

サンプルのネットショップは、グローバルナビゲーションを配置した、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" />
</head>
<body>
<p class="description">*****各ウェブページの説明を入力(商品キーワードを入れると効果的)*****</p>
<div id="wrapper">
<div id="header">
<h1>*****大見出し*****</h1>
<p class="logo"><a href="index.html" title="*****"><img src="img/logo.jpg" alt="ロゴ画像" /></a></p><!-- 画像を使用しました -->
<!-- 会社情報-1 -->
<ul id="header-info">
<li><a href="#" title="ご利用案内">ご利用案内</a></li>
<li><a href="#" title="個人情報の取扱い">個人情報の取扱い</a></li>
<li><a href="#" title="お問合わせ">お問合わせ</a></li>
<li><a href="#" title="サイトマップ">サイトマップ</a></li>
</ul>
<!-- グローバルナビゲーション -->
<ul id="globalnavi">
<li><a href="#" title="#">*****</a></li>
<li><a href="#" title="#">*****</a></li>
<li><a href="#" title="#">*****</a></li>
<li><a href="#" title="#">*****</a></li>
<li><a href="#" title="#">*****</a></li>
</ul>
</div>
<!-- header end -->

<div id="container">
<div id="contents">
<p class="topicpath">*****パン屑リスト*****</p>
<!--コンテンツここから-->
<h2>小見出し</h2>


<p class="pagetop"><a href="#header" title="このページの先頭へ">▲Top</a></p>
<!--コンテンツここまで-->
</div>
<!-- contents end -->

<div id="sidebar">
<!--サイドバーここから-->
<div>
<p class="sidetitle">*****ローカルナビ*****</p>
<ul class="localnavi">
<li><a href="#" title="*****">*****</a></li>
<li><a href="#" title="*****">*****</a></li>
<li><a href="#" title="*****">*****</a></li>
<li><a href="#" title="*****">*****</a></li>
<li><a href="#" title="*****">*****</a></li>
</ul>
</div>

<div>
<p class="sidetitle">*****その他の情報（ULリスト）*****</p>
<ul>
<li><a href="#" title="*****">*****</a></li>
<li><a href="#" title="*****">*****</a></li>
<li><a href="#" title="*****">*****</a></li>
<li><a href="#" title="*****">*****</a></li>
<li><a href="#" title="*****">*****</a></li>
</ul>
</div>

<div>
<dl>
<dt>*****その他の情報（DLリスト）*****</dt>
<dd>**********</dd>
<dt>*****その他の情報（DLリスト）*****</dt>
<dd>**********</dd>
</dl>
</div>
<!--サイドバーここまで-->
</div>
<!-- sidebar end -->

<div id="footer">
<!--コピーライト-->
<address>Copyright（C）サンプルネットショップ. All Rights Reserved.</address>
<dl>
<dt>サンプルネットショップ</dt>
<dd>***県***市***町1-1-1 サンプルビル2F</dd>
<dd>Tel 0000-00-0000 Fax 0000-00-0000</dd>
</dl>
<!-- 会社情報-2 -->
<ul>
<li><a href="#" title="会社概要">会社概要</a></li>
<li><a href="#" title="特定商取引に関する表記">特定商取引に関する表記</a></li>
</ul>
</div>
<!-- footer end -->
</div>
<!-- container end -->
</div>
<!-- wrapper end -->
</body>
</html>

XHTML上で、コンテンツ部分を先に記述できるタイプです。

#contentsはfloat:right;、#sidebarはfloat:left;、#footerで解除するオーソドックスなレイアウトです。

Next；meta情報指定

▲Top