店長的備忘録part1

１．リンククリック時に枠表示されるドットラインの削除

リンクをクリックしたときに４方を囲むように表示されるドットラインを削除

a {
 outline: none;
}

２．サイズの異なる文字を同じ行に表記した場合に見栄え良く表示する（平行を保つ？）

通常行間指定する場合の記述は

p {
 line-height: 1.4em;
}

とかですが、数値の後につく単位を削除して記述。

p {
 line-height: 1.4;
}

そうすることで見栄え良く表示可能。参考リンク

３．ロールオーバー時のちらつきを防ぐ記述

CSSのa:hoverを用いて背景画像を切り替えると、
画像がちらついたり砂時計のマークが表示されたりします。

このちらつきを無くす実装方法の備忘録。（CSSスプライトではない）

ul#menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 360px;
}
 
ul#menu li {
	float: left;
	margin: 0;
	padding: 0;
	width: 120px;
	background: #EEEEEE url(images/tips/menu_flicker_ov.gif) no-repeat left top;
}
 
ul#menu li a {
	display: block;
	border: 1px solid #DDDDDD;
	padding: 5px 0;
	background: #FAFAFA url(images/tips/menu_flicker_st.gif) no-repeat left top;
	color: #666666;
	font-size: 0.8em;
	line-height: 1.3em;
	text-align: center;
	text-decoration: none;
}
 
ul#menu li a:hover {
	background: none;
	color: #3366FF;
}

通常はマウスオーバーした際にマウスオーバー用の画像を
読み込むの記述ですが上記の記述の場合は
2つの画像を重ねておいてマウスオーバーの際に
a要素に設定した画像を消すという方法です。

これでちらつきなくロールオーバー処理を行う事ができます。参考リンク

４．現時点で実装してみたいナビメニュー

滑らかに上下スライドするナビゲーション

デモ

IEでもOK（確認済み）

５．IE6～IE8のみ特定のプロパティーを適用させる

表題のとおりですが、いわゆるIEハックっていうやつです。
あまり使わない方が良いですが、どうしてもって時に。