World of granshe.
[PR]
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
CSSで作る画像のロールオーバー
CSS Happylife様の
Javascriptを使わずにやるimg要素のロールオーバーサンプル
のエントリーを拝見しまして、
ロールオーバーの新しいやり方を発見したので、
今まで使っていたやり方もあわせてご紹介します。
- 画像をCSSの背景として指定する場合(文字ナビゲーションなし)
- 画像をCSSの背景として指定する場合(文字ナビゲーションあり)
- 画像をimgタグでHTMLにはりつける場合
セレクタの指定方法-5年目の真実その2-
前回、clearfixのお話をしましたが・・・
まだ、私の知らない真実があったようです。
しかも超初歩的なこと。
今まで、
<div id="main">
こういう場面において
<ul>
<li id="here">いち</li>
<li>に</li>
<li>さん</li>
<li>よん</li>
<li>ご</li>
</ul>
</div>
id="here"に対してCSSで指定をしたいときは
#main ul #here { プロパティ; }
と書いてごまかしてきたが
実は
#main ul li#here {プロパティ;}
って書けばいいんですよね!?
今までずっと、このくっつける記述方法を知らなくて
なんか違和感あるなーって思ってたんですが、
#main ul li #here (#mainの中のulの中のliの中の#here)じゃなくて
#main ul li#here (#mainの中のulの中の、#hereが指定されてるli)ってことなんですね!?
もうなんだか泣きたいです。
CSSのガイドライン
参照元 : taichi kaminogoya様
最近、自分以外の人のCSSをじっくり見る機会があって、
その時に思ったのは
「HTMLの書き方は、多少の差異はあれどあまり個人差はないが、
CSSは、書き方やファイルの作り方に個人差があるのではないか?」
ということです。
今まで、他の人の書いたCSSを研究してこなかったわけではありませんが、
顔が見える人(つまり知人)のCSSを見て比較する機会がほとんどなかったので、
CSSの書き方もその人の性格を表すんだろうか?なんていうことも思っています。
さて、本題ですが、
他人のことが気になると、自分のことも気になるわけで、
私はCSSを書く際にどうやってファイルを分けているのか?
セレクタはどういう書式で書いているのか?プロパティはどうなんだろう?
が気になり、
以下で現在の自分の作り方をまとめてみました。
clearfix-5年目の真実-
Web制作を始めて6年以上、
CSSをさわり始めて5年は経つでしょうか。
floatを使うたびに、最後に以下のおまじないを入れなければならず、
空のdivを使わなければならない自己嫌悪と共に生きてきました。
これ↓
<div style="clear: both"></div>
先日、研究室で2005年には発売されたであろうWeb雑誌を見ていると、
clearfixなるコードが記述されていました。
そのときは、「なんかおもしろそうだ」程度で全く気に留めていなかったんですが。
友人に話を振ってみると、現在ではもう定番になっているものだそうで…。
はい、ごめんなさい、私は今の今までずっと <div style="clear: both"></div>
で過ごしてきました。
というわけで、clearfixについてのメモ。
情報元:norisfactory様
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
これがclearfixなんですね!
今までずっと<div style="clear: both"></div>
を使ってきた私って何なんでしょう!
仕様だと思って諦めずに、調べてみないと解らないこともあるんですね。
メモおわり。
Copyright © 2008 A.Yu-ri all rights reserved.