CSS_Tips
ここでは、CSSでよく使われる、テクニックを紹介します。
ロールオーバー
ロールオーバーは２枚の画像を組み合わせ、その前景と背景を、マウスオーバー時に切り替えることです。
このどちらも、結果は同じ動作ですが、なにが違うのでしょうか？・・・
Javascriptを利用した場合、もし閲覧者が、scriptを禁止している場合は、その効果がないのです。
画像を使わずボタンを作る
人間の目というものは、いい加減なもので色の変化により平面であっても立体に見えてしまいます。
これをうまく利用することで、あたかもボタンのように見せる事が可能なのです。
たとえば、このようなものです。
このように、borderをうまく利用すれば、不要な画像を使わなくてもすみます。
.botton{
border:solid 1px #cccccc;
border-width: 1px 2px 2px 1px;
border-color: #cccccc #999999 #000000 #cccccc;
padding: 5px 10px;
text-align:center;
}
ノートのように下線を引く
文章を表現する場合に、よく利用されるテクニックのひとつですが、
これも単にborderを利用しただけのことです。
css+javascriptを利用して、デザインを瞬時に変更する
CSSの醍醐味は、この方法にあるのではないでしょうか？・・・
このようなことをするには、HTMLを文章構造により、正しくマークアップしておかなくてはいけません。