メニューを学ぶCSSスプライトCSSスプライトを使ってナビゲーションを画像化にする最近は、レスポンシブの仕様などを踏まえ、テキストで作られることが多くなってきているのが現状ですが、まだまだ画像化されているサイトも多く存在します。下の画像を使って、上部の濃い部分のみを表示させます。カーソルが乗ると(a:hover)下部の薄い色のイメージと入れ替わる仕様にします。画像置換とは、HTMLでマークアップしたテキストを隠し、代わりにその箇所を背景画像へと置き換えるCSSのテクニックの一つです。画像に置き換わったテキストは、不要になるので、「text-indent:-9999px」と指定し画面の外に出すことでテキストを見えなくさせ、その代替に背景画像を表示させる技術がよく使われていました。このテクニックが有効な理由は、HTMLコード自体はテキストで記述されているためSEOにも対応されていると考えられていました。src=””記述)で配置されるよりも、テキストで記述されている方がよいと考えます。現在におけるこの手法は、9999pxのボックスを生成して飛ばしているため、パフォーマンスに影響を与えてしまうと言われ始めました。(-9999px手法を採用しているサイトも多々ありますので、完全否定ではありません。Kellum(スコットケラム)氏。おいては、スパム行為と見なされることがあるため、注意が必要です。●隠しテキストと隠しリンクについての注意:https://support.google.com/webmasters/answer/66353?hl=ja練習してみましょう。width:950px、height:100pxのナビゲーションイメージです。【参考サイト】CSSスプライト解説http://www.webcreatorbox.com/tech/css-sprite/https://codezine.jp/article/detail/5574悪用せず適材適所に使用するなどの注意が必要ですね。spritewebデザイナーウェブロールオーバー画像置換スマホでもご覧いただけます。「WEBデザイナーの教科書」は、どなたでも、自由に閲覧使用していただけるように、公開しています。WEBに携わる方・教育の現場などお気軽にお使いください。個人情報について座右の銘お問い合わせ。