勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

CSSで1つの要素に複数classを設定して画像を入れ替える

   

メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞれCSSで指定したかった。通常時とマウスオーバー時は普通のbackground指定とhoverでいけたんだけど、アクティブ時に同一要素に複数classをつけるのはよいものの、どうCSSで指定したらよいのか分からなかった。

調べてみると以下方法でいけた。

 

■ソース

 

■その他

CSSパスを指定する際に半角スペースをあけると下位要素につながるのとは別に、つなげて書くと絞込み指定ができるみたい。知らんかった。

 - CSS

  関連記事

images
ガラケー(特にdocomo)でのCSS

PCサイトだとIEでつまずくことが多いけど、 ガラケーはdocomoが難儀やよ、 ...

images
CSSでマウスカーソルの変更

マウスカーソルはCSSで任意に決められるみたい。 リンク時に一律させた方がよいと ...

images
LINE風のふきだしデザイン

LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...

images
ページング用CSS

div.pageNav { //これなくてもいいかも。 clear: both; ...

images
CSSのセレクタを一瞬で拾ってくる

↓↓こちらのサイト様 http://css.miugle.info/ 左側のテキ ...

images
スマホサイトでviewportを指定しても横スクロールバーが表示される

スマホ用のサイトでviewportが指定されており、widthも100%になって ...

images
CSSでプロパティの初期化

CSSでmedia screen and等を指定し、特定の場合のみプロパティの無 ...

images
CSSで一つの要素に対して複数の背景色を指定する方法

divの要素に対して複数の背景色をつけたかった。background-color ...

images
特定のブラウザのみCSS指定

FireFoxだけどうにもデザインが崩れる、 ただ他のブラウザでは希望通りのデザ ...

images
Bootstrapを使用したデザインテンプレート

Bootstrapを使用してもデザインのセンス無いし、 と思っていいものはないか ...