REDLINE MAGAZINE | よく使うhtmlとCSSのソースセット

よく使うhtmlとCSSのソースセット

読んで字のごとく、よく使うhtmlとcssのソースセット。プロパティはよく使いそうなやつで値は全部空。自分用ストックだったりするので、もしコピペする場合は状況に合わせていろいろ追加やカットしてくらさい。

ナビゲーション部分用のソース

サイトのナビゲーション部分によく使ってるソース。意外とこれ毎回書くの面倒なので個人的にこの雛形は気に入ってる。背景画像は通常時もhover時も全部まとめて１枚もの画像になってる前提。

<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時のボタンを１枚ものの画像（ボタン上テキストも画像）にして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

なんか意外とこういう普段使いのソース書くのって勇気いるね・・・。「この人効率悪い書き方してるなー」とか思われたら恥ずかしいなーとか思ったりして。

2008年04月11日 12:55 | Red | パーマリンク