浜松市を拠点に静岡県西部にてWeb制作&各種デザイン制作を行っております。SOHOならではの身軽さと適正料金にてお客様の企業価値向上に取り組んでいます。Webサイト制作・管理、カタログ制作、広告デザイン、写真撮影等までお気軽にご相談下さい。




ご依頼/お問い合わせはSkypeでも!
(平日 9:00~18:00 | オンライン時のみ)

PHOTOHITOブログパーツ

---お買い物用---

2012年8月1日

走り書きメモ:doctypeとかreset.cssとかhoverで背景透過とか

Filed under: Web & Design,備忘録 — Cript @ 6:37 PM

とりあえず、まとまってないけど忘れないためにメモ。すごく大雑把に書いていて正確性に欠ける点はご容赦ください。

doctype宣言によって画像の間に隙間ができたりするのにはまる。
Transitionalで書けば問題ないんだけどそろそろHTML5という訳でそうもいかないし。
通常は、reset.cssでimgにvertical-align:bottomとしておけばいいんだけど、liでfloatやdisplay:inlineした直下の画像との間にスペースが空いてしまうという問題に直面。


google先生に聞いてみるとこのサイト「リストをfloatで横並びにする際、画像の下に余白が空く」を教えてくれた。ビンゴ! だと思ったけれどulやliにline-height:0を当てると文字がかけてしまいこれまた断念。

あれやこれやこねくり回してるうちに、bodyに当てたline-heightが関係しているのを発見。これをline-height:1にすると隙間はなくなった!

でも、やはりめんどくさいので全体にline-heightを設定したい。で、該当箇所のul,liをline-height:1にしてみた。これで解決かと思いきやなぜか繁栄されない。やはりreset.cssで全体をline-height:1にして必要箇所のみline-heightを設定するのが本来の方法なのだろうか。

この件はここまでで挫折。


リンク箇所のマウスオーバーの表示方法。
よく使われる方法に、リストでリンクを順番に書く。liをdisplay: inlineにして背景に画像を入れる。aをdisplay:blockにする。ってやるとテキストでリンクを書けるけど画像っぽいボタンができあがる。っていうのがあるけどこの時に楽にhoverの表現をする方法。

.ほげ a:hover {background: rgba(255,255,255,0.5);

これはRGB値がアルファー20%の白という意味。
最初Opacityでやってみたのだけれど背景だじゃなくて上のテキストも薄くなってしまったので実用にならなかった。
まぁ、とにかくこれだけで別画像用意したりjavascript用意したりすることなくhoverの表現ができて便利。


ついてに、cssでドロップシャドウ。
box-shadow: 横方向のずれ 下方向のずれ ぼかし具合 シャドウの色

text-shadow: 横方向のずれ 下方向のずれ ぼかし具合 シャドウの色
例:text-shadow: 1px 1px 5px #aaa;
これだけでドロップシャドウが付いてくれるので上記の方法でより画像っぽいリンクボタンが作成できる。

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment