よく使うhtmlとCSSのソースセット
読んで字のごとく、よく使うhtmlとcssのソースセット。プロパティはよく使いそうなやつで値は全部空。自分用ストックだったりするので、もしコピペする場合は状況に合わせていろいろ追加やカットしてくらさい。
ナビゲーション部分用のソース
サイトのナビゲーション部分によく使ってるソース。意外とこれ毎回書くの面倒なので個人的にこの雛形は気に入ってる。背景画像は通常時もhover時も全部まとめて1枚もの画像になってる前提。
<ul id="navi">
<li id="menu01"><a href=" " title=" "> </a></li>
<li id="menu02"><a href=" " title=" "> </a></li>
<li id="menu03"><a href=" " title=" "> </a></li>
<li id="menu04"><a href=" " title=" "> </a></li>
<li id="menu05"><a href=" " title=" "> </a></li>
<li id="menu06"><a href=" " title=" "> </a></li>
<li id="menu07"><a href=" " title=" "> </a></li>
<li id="menu08"><a href=" " title=" "> </a></li>
</ul>
/* ナビ部分基本 */
#navi{
width: ;
height: ;
background:# url( ) no-repeat;
margin: ;
}
/*----------------------------------------
メニューが横並びのとき用
------------------------------------------
#navi li{
float:left;
}
----------------------------------------*/
#navi li a{
display:block;
width: ;
height: ;
text-indent:-9999px;
}
/*----------------------------------------
メニューボタンの横幅が全部違うとき用
------------------------------------------
#navi li#menu01 a{width: ;}
#navi li#menu02 a{width: ;}
#navi li#menu03 a{width: ;}
#navi li#menu04 a{width: ;}
#navi li#menu05 a{width: ;}
#navi li#menu06 a{width: ;}
#navi li#menu07 a{width: ;}
#navi li#menu08 a{width: ;}
----------------------------------------*/
/* ナビ部分hover,該当コンテンツにhover画像を当てる部分 */
#navi li a:hover,#navi li a.on{background:# url( ) no-repeat;}
#navi li#menu01 a:hover,#navi li#menu01 a.on{background-position: ;}
#navi li#menu02 a:hover,#navi li#menu02 a.on{background-position: ;}
#navi li#menu03 a:hover,#navi li#menu03 a.on{background-position: ;}
#navi li#menu04 a:hover,#navi li#menu04 a.on{background-position: ;}
#navi li#menu05 a:hover,#navi li#menu05 a.on{background-position: ;}
#navi li#menu06 a:hover,#navi li#menu06 a.on{background-position: ;}
#navi li#menu07 a:hover,#navi li#menu07 a.on{background-position: ;}
#navi li#menu08 a:hover,#navi li#menu08 a.on{background-position: ;}
こういうナビゲーション部分のコーディングパターンって結構好みの問題もあるよなぁ・・・。例えばliタグ内を画像にするかテキストにするかとか、cssとjsのどっちでhoverの画像出すかとか。なんかいろいろ書き方あるけど、とりあえず通常時とhover時のボタンを1枚ものの画像(ボタン上テキストも画像)にしてliタグ内はテキストのみ、cssで背景画像としてボタン画像出すよの発想でいくと個人的には上の書き方が一番ソース管理が楽な気がしてる。
ヘッダ部分用のソース
よくある左上にロゴ入ってるようなヘッダで、ヘッダ背景画像にロゴ画像込みで書き出して、テキストを画像置換、絶対配置でロゴ上にマウス持ってきたらリンクついてるようなやつのソース。imgタグで入れてるロゴは印刷用なのでディスプレイ上は非表示(印刷時は表示)。
なんでそんなめんどくさい事するのかというと、印刷時に背景画像をOFFにしててもロゴだけはなんとか印刷に反映してもらえるように+画像よりもテキストの方がSEO的に有利だよ都市伝説の名残り。画像置換はどーたらこーたらの話は別問題として。
<div id="header">
<h1><a href=" " title=" ">タイトルとかのテキスト<img src="ロゴ画像" alt=" " class="print" /></a></h1>
</div>
#header{
position:relative;
width: ;
height: ;
background:# url( ) no-repeat;
margin:0 auto;
}
#header h1 a{
position:absolute;
top: ;
left: ;
display:block;
width: ;
height: ;
text-indent:-9999px;
text-decoration:none;
}
#header h1 a:focus{
outline:0;
}
.print{
display:none;
}
カテゴリタイトル部分用のソース
最近は背景画像の上に通常テキストを乗せて見出しを作る事も多くなってきたけど、各カテゴリで一番デカい見出しは大きめの画像で入れたりもするので、その部分用。
<h2 id="abc" class="category_title">カテゴリタイトル</h2>
.category_title{
width: ;
height: ;
text-indent:-9999px;
margin: ;
}
#abc{background:url() no-repeat;}
#def{background:url() no-repeat;}
#ghi{background:url() no-repeat;}
#jkl{background:url() no-repeat;}
#mno{background:url() no-repeat;}
#oqr{background:url() no-repeat;}
#stu{background:url() no-repeat;}
classでサイズとかマージンとか固めてidで該当背景画像を出してる。上のソースではidとclass両方使ってるけど、bodyタグにid付けれる場合なんかは「#hoge h2」とかにしてhtmlソースをスッキリさせてみたりとか。
アイコン付きリスト
個人的には、これ、何気に使用頻度高い。
<ul>
<li></li>
</ul>
ul li{
width: ;
background:url( ) no-repeat left top;
font-size: ;
line-height: ;
padding: ;
}
デフォルトスタイル初期化CSS
以前このエントリに初期化用のCSSの話書いたので一応リンク。
>>RedLine Magazine : 気になった初期化CSS
なんか意外とこういう普段使いのソース書くのって勇気いるね・・・。「この人効率悪い書き方してるなー」とか思われたら恥ずかしいなーとか思ったりして。
<< CSS3 :target擬似クラスでイメージギャラリー | Firefox3とFirefox2のselectの幅 >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/188
コメント (2)
はじめまして。ナビゲーションのcssを探してこちらにたどりつきました。すごく助かりました。ところで、ひとつ教えてもらいたいのですが、メニューボタンを押して、飛んだ先のページのメニューボタンをマウスオーバーした時と同じ画像で表示するにはどうしたらよいでしょうか?
投稿者: nao | 2010年09月06日 13:40
>naoさん
コメントありがとうございました。
>飛んだ先のページのメニューボタンをマウスオーバーした時と同じ画像で表示するにはどうしたらよいでしょうか?
「一番単純な」方法はまずhtml側でそのページに該当するナビゲーションのa要素にクラス(例えば.current とか)を与えて、CSS側でhover時の内容を指定している部分に一緒に書いちゃうとか、かなと思います。。
↓こんな感じ。
#navi li#menu01 a:hover,#navi li#menu01 a.current{background-position:・・・}
もしくは、body要素にもidを与えてるページなら(例えばそれが#testとすると)
#navi li#menu01 a:hover,#test #navi li#menu01{background-position:・・・}
こんな感じでやってあげれば簡単かなーと思います。
投稿者: Red | 2010年09月07日 09:36