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

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

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

Back To Top

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

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

サンプルサイトのグローバルナビは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;
}

使用画像

グローバルナビの背景画像

Back To Top

楽天に出店する前に
今年こそインターネットで販路拡大！楽天市場の出店資料請求はこちら
成功店舗が続々！楽天市場が成功店舗の秘訣を公開！詳細はこちら
飲食店向けホームページ作成サービス
簡単にお店のホームページを更新「グーペ」
ネットショップ制作
低価格で作るオリジナルロゴ【アーティーロゴ】
ネットショップ機能付きレンタルサーバー
低価格ショッピングカート
ホームページ・ビルダー(R)対応！ レンタルカートe-shopsカート2
低価格で本格的なオンラインショップを構築。CGIの知識は一切不要の高機能レンタルショッピングカート。
ショッピングカートとデザインテンプレートでネットショップを簡単開設！【 OneStyle My Shop 】
オリジナルデザイン代行で販促力の高いネットショップを【MakeShop】/
無在庫商品仕入れシステム。月額0円でネットショップを開店できます
大手の利用実績が認める高機能ネットショップ「ワイズカート」
レンタルショッピングカートXcart月額1,050円からの格安、高品質なショッピングカートが登場！

CSS.Design sample Home