ネットショップの作り方

グローバルナビゲーション指定

SEOとユーザビリティを考慮して、positionプロパティを使用した絶対配置です。なぜSEOとユーザビリティなのかは前項目で確認して下さい。

グローバルナビゲーションのデザイン

サンプルサイトでは、グローバルナビはテキストに背景画像で構成していますが、この方法のメリットとして、テキストベースなので検索エンジンに優しい点があげられます。デメリットとしては、あまり長いカテゴリ名は適さない点です。

サンプルサイトのグローバルナビはfloatで回り込ませていますが、幅は800pxとして考えてあります。つまり、サンプルでは5項目のカテゴリ分けなので、ボタンひとつ当たりの幅は160pxとなります。この幅を超えるテキストの場合は、背景画像の高さなどで調整できますが、デザイン面ではいまいちですね。

回避策として、テキストベースでありながら、画像のみで表現できるCSSテクニックがありますが、当サイト内「上級スタイルシート講座：スタイルシートで指定するロールオーバー(1)、スタイルシートで指定するロールオーバー(2)」を参照して下さい。

<!-- グローバルナビゲーション -->
<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 -->

#header {
  width: 100%;
  height: 300px;
  position: relative; /* ヘッダー内要素の基点 */
  margin-bottom: 2em;
  background: url(img/bg-header.jpg) no-repeat 0 0;
}

/* -- グローバルナビゲーション -- */

#header #globalnavi {
  list-style-type: none;
  width: 800px;
  height: 30px;
  position: absolute; /* 絶対配置 */
  top: 70px;
  left: 15px;
  overflow: hidden; /* 文字サイズ変更時の対応 */
}

#header #globalnavi li {
  text-align: center;
  width: 160px;
  height: 30px;
  float: left; /* 回り込み指定 */
  margin: 0;
  background: url(img/bg-globalnavi.jpg) no-repeat -160px 0;
}

#header #globalnavi li a {
  text-decoration: none;
  display: block; /* リンク領域を拡大 */
  width: 160px; /* 5項目なので */
  padding: 10px 0;
  background: url(img/bg-globalnavi.jpg) no-repeat 0 0;
}

#header #globalnavi li a:hover {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
}

使用画像

楽天に出店する前に

飲食店向けホームページ作成サービス

簡単にお店のホームページを更新「グーペ」

ネットショップ制作

低価格で作るオリジナルロゴ【アーティーロゴ】

あなたのホームページを売れるネットショップにする

低価格ショッピングカート

登録商品数が無制限（ディスク容量内）のショッピングカートです！

ホームページ・ビルダー(R)対応！ レンタルカートe-shopsカート2

レンタルショッピングカートXcart月額1,050円からの格安、高品質なショッピングカートが登場！

低価格で本格的なオンラインショップを構築。CGIの知識は一切不要の高機能レンタルショッピングカート。

無在庫商品仕入れシステム。月額0円でネットショップを開店できます

大手の利用実績が認める高機能ネットショップ「ワイズカート」