たった10分でできるCSSの裏ワザ①
誰にでも簡単にできるHP制作の中での裏ワザ紹介!
いちいち画像を背景に組み込まなくてもCSSで10分で完結でき
どうぞコピペして、皆さんも色々実践して使ってみてください^^
ご購読の皆様、右下からブログ登録してもらえると嬉しいです♪
(迷惑メールに入ってしまうこともあるので、フォルダチェックお願いします。)
【ナビを簡単に設置する方法】
ナビって意外と作りこむのが面倒なところがあるんですよね。
私も、この作業が一番苦手分野でした。
マウスを乗せた時に、
そして、1pxでもズレると全てが崩れてしまう。
計算しながら画像作成していく工程がどれだけ苦痛だったか・・・
で、編み出したのがコチラの方法です。
(いろいろ方法はありますが、
●一枚の画像を使って画像を切り替える方法
CSSで画像の置き換え指定を設定することで、
画像が切り替わると言う仕組みです。
例えば以下のようなナビ画像を作ります。
背景に設定する画像は、ナビのデザイン(
異なりますが、今回は分かりやすくTOPの横ナビで・・・。
背景画像のheightの半分のheightをアンカーに設定し
background-
通常時の画像のみ表示させます。
上のイラストで見ると・・・
上:デフォルト状態
下:マウスを乗せた時&そのページを開いているとき。
この方法だと、画像ファイルが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;
}
CSSを覚えたい人は必見の小技なので覚えておくと何かと便利ですよ♪
次回はCSS裏技集②をご紹介します。
お楽しみに^^★━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ウェブクリエイトが制作したサイトのPR】
■太陽光はカーポートでメンテナンスも楽々!
http://kmcllc.co.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━