たった10分でできるCSSの裏ワザ①

Posted by ウェブクリエイト webcreat on 2013年7月4日 in 制作 |
奥深きSEO

たった10分でできるCSSの裏ワザ①

誰にでも簡単にできるHP制作の中での裏ワザ紹介!

いちいち画像を背景に組み込まなくてもCSSで10分で完結できる超速攻法です(笑)
どうぞコピペして、皆さんも色々実践して使ってみてください^^

ご購読の皆様、右下からブログ登録してもらえると嬉しいです♪
(迷惑メールに入ってしまうこともあるので、フォルダチェックお願いします。)

【ナビを簡単に設置する方法】

ナビって意外と作りこむのが面倒なところがあるんですよね。
私も、この作業が一番苦手分野でした。
マウスを乗せた時に、正確に画像が切り替わらないと非常にみにくい。
そして、1pxでもズレると全てが崩れてしまう。
計算しながら画像作成していく工程がどれだけ苦痛だったか・・・(笑)

で、編み出したのがコチラの方法です。
(いろいろ方法はありますが、私はデザインする上でも一番簡単で便利かと思います)

●一枚の画像を使って画像を切り替える方法

CSSで画像の置き換え指定を設定することで、マウスを乗せた時に
画像が切り替わると言う仕組みです。

例えば以下のようなナビ画像を作ります。
背景に設定する画像は、ナビのデザイン(上部なのかサイドなのか)で
異なりますが、今回は分かりやすくTOPの横ナビで・・・。

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

ナビを一枚の画像で作る方法

背景画像のheightの半分のheightをアンカーに設定し
background-positionをtopに設定することで、
通常時の画像のみ表示させます。

上のイラストで見ると・・・

上:デフォルト状態
下:マウスを乗せた時&そのページを開いているとき。の状態になりますね。

この方法だと、画像ファイルが1つで済み、メニューが変わった時なども
便利で管理がしやすいのです。(個人的に)

●実際の設置例

(htmlコーディング)************************************************************
<ul id=”globalNavi”>
<li><a href=”/” >HOME</a></li>
<li><a href=”/guidance/”>お仕事の内容</a></li>
<li><a href=”/work/”>お仕事の流れ</a></li>
<li><a href=”/reference/”>サポート体制</a></li>
<li><a href=”/voice/”>女の子の声</a></li>
<li><a href=”/faq/”>よくあるご質問</a></li>
<li><a href=”/com/”>会社概要</a></li>
</ul>

(cssサンプル)************************************************************

#headerArea #globalNavi {
width: 962px;
height: 47px;
position: absolute;
top: 112px;
background-image: url(../iimg/gnavi.jpg);
}
#headerArea #globalNavi li, #headerArea #globalNavi li a {
height: 46px;
}
#headerArea #globalNavi li {
float: left;
display:inline;
}
#headerArea #globalNavi li a {
display:inline-block;/*ieHack*/
overflow:hidden;
text-indent:-9999px;
}
#headerArea #globalNavi li a {
display:block;
}
#headerArea #globalNavi li a.active, #headerArea #globalNavi li a:hover {
background-image: url(../iimg/gnavi.jpg);
}
#headerArea #globalNavi .m1, #headerArea #globalNavi .m1 a {
width:86px;
}
#headerArea #globalNavi .m2, #headerArea #globalNavi .m2 a {
width:145px;
}
#headerArea #globalNavi .m3, #headerArea #globalNavi .m3 a {
width:146px;
}
#headerArea #globalNavi .m4, #headerArea #globalNavi .m4 a {
width:145px;
}
#headerArea #globalNavi .m5, #headerArea #globalNavi .m5 a {
width:146px;
}
#headerArea #globalNavi .m6, #headerArea #globalNavi .m6 a {
width:146px;
}
#headerArea #globalNavi .m7, #headerArea #globalNavi .m7 a {
width:148px;
}
#headerArea #globalNavi .m1 a:hover {
background-position:0px -46px;
}
#headerArea #globalNavi .m2 a:hover {
background-position:-86px -46px;
}
#headerArea #globalNavi .m3 a:hover {
background-position:-231px -46px;
}
#headerArea #globalNavi .m4 a:hover {
background-position:-377px -46px;
}
#headerArea #globalNavi .m5 a:hover {
background-position:-522px -46px;
}
#headerArea #globalNavi .m6 a:hover {
background-position:-668px -46px;
}
#headerArea #globalNavi .m7 a:hover {
background-position:-814px -46px;
}
#headerArea #globalNavi .m1 a.active {
background-position:0px -92px;
}
#headerArea #globalNavi .m2 a.active {
background-position:-86px -106px;
}
#headerArea #globalNavi .m3 a.active {
background-position:-231px -92px;
}
#headerArea #globalNavi .m4 a.active {
background-position:-377px -92px;
}
#headerArea #globalNavi .m5 a.active {
background-position:-522px -926px;
}
#headerArea #globalNavi .m6 a.active {
background-position:-668px -92px;
}
#headerArea #globalNavi .m7 a.active {
background-position:-814px -92px;
}
※私はul(リスト)で囲んでいますが、Divやddで囲む方も多いです。

いかがでしたでしょうか?
CSSを覚えたい人は必見の小技なので覚えておくと何かと便利ですよ♪

次回はCSS裏技集②をご紹介します。

お楽しみに^^★━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ウェブクリエイトが制作したサイトのPR】
■太陽光はカーポートでメンテナンスも楽々!
http://kmcllc.co.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

タグ: , ,

Comments are closed. Would you like to contact the author directly?

Copyright © 2013-2020 ホームページ制作 さいたま市・川口市 ウェブクリエイト All rights reserved.
This site is using the Multi Child-Theme, v2.1.1, on top of
the Parent-Theme Desk Mess Mirrored, v2.2, from BuyNowShop.com.