2016年3月15日火曜日

CSSスプライトを作ってみた

こんにちは山田です。

サイト内に、メニューやボタンなど細かい画像がバラバラとありますが、
それを、一枚の画像にまとめて、ページの読込速度を速める方法があります。
CSSスプライト というのですが、作ってみたのでその備忘録になります。

■元画像
ペイントで簡単に作成


■HTML
 

■CSS
/*----------------------------------------------------------
ナビゲーション
------------------------------------------------------------*/

#navi{
 position:absolute;
}

#navi ul{
 list-style:none;
}

#navi li a{
 display:block;
 width:108px; 
 height:53px; //←幅と高さを指定
 text-indent:-9999px;
}

#navi li#top{
 background:url(../images/menu.gif)no-repeat 0px 0px; //←最初から表示したい画像
}
#navi li#top a:hover{
 background:url(../images/menu.gif)no-repeat -108px 0px; //←マウスオーバー時の画像
}

/*-----------------
同じ要領で残りも書く
------------------*/
#navi li#news{
 background:url(../images/menu.gif)no-repeat 0px -53px;
}
#navi li#news a:hover{
 background:url(../images/menu.gif)no-repeat -108px -53px;
}
#navi li#about{
 background:url(../images/menu.gif)no-repeat 0 -106px;
}
#navi li#about a:hover{
 background:url(../images/menu.gif)no-repeat -108px -106px;
}
#navi li#contact{
 background:url(../images/menu.gif)no-repeat 0px -159px;
}
#navi li#contact a:hover{
 background:url(../images/menu.gif)no-repeat -108px -159px;
}
#navi li#faq{
 background:url(../images/menu.gif)no-repeat 0px -212px;
}
#navi li#faq a:hover{
 background:url(../images/menu.gif)no-repeat -108px -212px;
} 
■画像の数値について
以下のように画像の位置を指定しています。

Related Posts:

  • 404.1、404.2という状態コードとは?こんにちは山田です。  Webサイトの運用や開発者なら誰でも、 「404 - ファイルが見つかりません」や 「401 - 権限がありません」 などのエラー メッセージを見たことがあると思います。 この時、特定のHTTP状態コードが出たときに、 自分で作成したエラー画面を指定してあげるこ… Read More
  • ページネーションに、並び替えや絞り込みがあった場合を調べてみた②こんにちは山田です。 年末ですね。今年も一年の締めになりました。 年神様を迎えられるように、身辺を整理しましょう。 (山田家では、そもそも鏡餅は幾年も飾っていませんが気持ちだけ) さて毎度のことながら、グーグルのリファレンスを読んでおり 解読が増えた項目がありました。  ↓↓↓ コンテ… Read More
  • 三項演算子とは?こんにちわ、開発者のⅠです。 山手線の新型車両が11月30日にデビューしたのですが、翌日から運転を取りやめているようです。いつ復帰するのかも現時点では不明とのことで、見切り発車だったとは思いたくないのですが、今後が気になる話です。 さて、今回は三項演算子についてのお話です。 この三項演算子の構… Read More
  • DOM読み込み時に動作させる $(document).readyこんにちは山田です。 DOMという言葉を最近知りました。 ■DOMとは :XMLやHTMLで記述された文書をプログラムやスクリプトから参照あるいは操作するための方法を提供する仕組み(出典|ASCII.jpデジタル用語辞典) というわけで DOMの読み込み完了時のみに処理をいれたい時に使う関数の… Read More
  • ページネーションに、並び替えや絞り込みがあった場合を調べてみた①こんにちは山田です。 冬至になりましたね。日が短いと観光地が値崩れするので 個人的にはベスト旅行シーズンの到来でウキウキしてしまいます。 さて本日は、 ページネーションについて深堀してみました。 結論からいうとまだよくわかりません。 ■そもそもの目的 SEO対策としてURLの正規化をして、検索… Read More

1 件のコメント:

  1. Harrah's Resort and Casino - Dr. Maryland
    Address: 777 광주광역 출장마사지 Harrah's 태백 출장마사지 Rincon 의왕 출장마사지 Way Rincon Way, Rincon, OR 순천 출장마사지 92082Phone: (701) 논산 출장안마 751-7066 Website: www.caesars.com.

    返信削除