CSS Sprite

CSS Spriteで設定

  • 画像作成は、Photoshopで
  • 幅200px、高さ50pxをそのままスライド複製をしているためボタンの重なる部分が２pxに見えていますが、表示される部分は、１pxの枠になります

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>縦メニュー：CSS Sprit</title>
<link rel="stylesheet" href="css/style.css"  media="screen, print">
</head>
<body>
<div id="nav">
<ul>
<li id="home"><a href="#"><em>ホーム</em></a></li>
<li id="food"><a href="#"><em>フェフード</em></a></li>
<li id="drink"><a href="#"><em>カフェドリンク</em></a></li>
<li id="info"><a href="#"><em>インフォメーション</em></a></li>
<li id="contact"><a href="#"><em>お問い合わせ</em></a></li>
</ul>
</div>
</body>
</html>

@charset "UTF-8";

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family:
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3",
		Meiryo, 
		"メイリオ", 
		Osaka, 
		"MS P Gothic", 
		"ＭＳ Ｐゴシック", 
		sans-serif;
}
ul {
	list-style-type: none;
}
a {
	text-decoration: none;
}
img {
	border: 0;
}
em {
	visibility: hidden;
}

/* nav */
#nav {
	width: 200px;
	height: 250px;
	margin: 50px 0 0 50px;
	background-color: #FFF;
}
#nav li a {
	width: 200px;
	height: 50px;
	display: block;
	background-image: url(../img/btn.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
}

/* individual */
#nav li#home a {
	background-position: 0 0;
}
#nav li#home a:hover, #nav li#home a:active {
	background-position: -200px 0;
}
#nav li#food a {
	background-position: 0 -50px;
}
#nav li#food a:hover, #nav li#food a:active {
	background-position: -200px -50px;
}
#nav li#drink a {
	background-position:  0 -100px;
}
#nav li#drink a:hover, #nav li#drink a:active {
	background-position: -200px -100px;
}
#nav li#info a {
	background-position:  0 -150px;
}
#nav li#info a:hover, #nav li#info a:active {
	background-position: -200px -150px;
}
#nav li#contact a {
	background-position:  0 -200px;
}
#nav li#contact a:hover, #nav li#contact a:active {
	background-position: -200px -200px;
}

隠し文字

  • 意図的に見えない文字を設定しておくこと
  • 黒色背景の上に、黒い文字（1px）などは違法です（事例があります）
  • 「display:none;」もスパム扱いと言われています（事例はわかりません。噂の域をでません。）


しかし、すべてが「スパム」ではありません。

米GoogleのWysz氏は、ウェブサイトのナビゲーションメニュー設計において、CSSで display:none を使用したからといって即座にスパム行為と判定するわけではないとの見解を明らかにした。
米Google Webmaster CentralチームがFAQを作る目的で募った質問に対して答えたもの。


CSSの display:none の利用はSEOの世界では頻繁に取り上げられるトピックの1つ。
検索エンジンは、クローラが見るウェブページとユーザーが見る（ブラウザが表示する）ウェブページが異なること、つまり隠しリンクや隠しテキストを問題視している。
理由は、訪問者にとって不利益になることとウェブページの適切なランク付けが行えないためだ。
ただし、音声ブラウザやアクセシビリティへの対応、あるいはナビゲーションメニューの視覚表現上の理由でスタイルシートにより非表示にしなければならない場合も当然ある。
つまり、display:none は必ずしも検索エンジンスパムという悪意ある目的のみで用いられるものではなく、正当な、合理的な理由があって用いられる場合もあるわけだ。


この問題について Wysz氏はウェブページ上で display:none を使用して一部のテキストが隠されているからといって即座に検索インデックスから削除するわけではないと説明。
Google（クローラ）が見るコンテンツと、ユーザーが閲覧するであろうコンテンツがほぼ同一であれば問題がなく、一方で隠しテキストや隠しリンクが悪意を持って、故意に行われていると判断されれば、Googleはランキングを下げたりインデックスから排除するなどの対策を講じると説明した。


[追記]
ちなみに display:none でテキストを隠すことが検索エンジンスパムに該当するか否かの議論は2005年10月にも行われている。
この時はエンジニアのMatt Cutts氏が、テキストを隠すことを目的にスタイルシートを利用するのであれば明白なスパムだが、DHTMLやマウスオーバーでテキストが隠れている、あるいは画像ロゴもあるし（CSSで隠れた）テキストもあるという場合もスパムになるわけではないと説明。
例えば株式会社○△□のロゴがあって、そこにテキストで”株式会社○△□”とあったからといってスパムとは判断しない。しかしもし、テキストが延々と羅列されているのであればスパム行為とみなすとしている。

OFF-LEFT
  • 一般的な手法
  • リンク文字のみを、画面の左にはみ出させる（text-indent: -999em;）
  • はみ出したアンカーの領域（点線）を文字の領域のみにする（overflow: hidden;）
「visibility: hidden;」を設定
  • レイアウト領域を確保したまま、文字のみを不可視にする
  • 上の記事の例
「display: none;」を設定
  • レイアウト領域も文字も不可視にする