Greensleeves v2.0 / Tag: CSS
Notes about things I'm interested in.
Tag: CSS が付けられているエントリーが 8 件見つかりました。
いままで Double margin float bug を回避するとき
div {
float: left;
margin-left: 20px !important; /* IE6 以下はバグで 40px のマージンが取られる*/
margin-left: 10px;/* for IE6 */
}
とかやってたんですが、これだと強制的に specificity が最高になってあまり賢くないかなぁとか思ったので、調べてみたら display: inline; を使う方法があった。
div {
float: left;
margin-left: 20px;
display: inline;
}
float した要素に、display: inline; を指定すると、このバグが消え去るらしい。
でもそれって、他の所謂モダンブラウザに影響ないのか調べてみると、CSS2 Specification にこう記載されていた。
- If 'display' has the value 'none', user agents must ignore 'position' and 'float'. In this case, the element generates no box.
- Otherwise, 'position' has the value 'absolute' or 'fixed', 'display' is set to 'block' and 'float' is set to 'none'. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
- Otherwise, if 'float' has a value other than 'none', 'display' is set to 'block' and the box is floated.
- Otherwise, the remaining 'display' properties apply as specified.
なるほど、float が none 以外だと display は block にセットされるのか。とりあえず大丈夫そうだね。
background-position プロパティって、% 指定と px 指定のときで画像配置の挙動が微妙に違うんですね。
今の一言で、自称 CSS 使いのくせに仕様書をきっちり読んでないのがバレた気がしますが、気にしない。忘れないように一応メモっておきます。
With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
CSS2 Specification の項目には上記のように記載されています。簡単に言うと、たとえば background-position: 14% 84%; と宣言した場合、宣言した要素の '14% 84%' のポイントに 指定した画像の '14% 84%' のポイントが来るように配置するということになります。簡単に図で表してみると下図のような感じになります。
位置を '50% 50%' とかにしてみると確かに配置位置はど真ん中になるので、それでピンと来そうな気もしますが今まで全く気がつきませんでした。
リファレンスサイトを見て回ってみても説明が間違っていたり、（誤解しそうな内容なのに）注意書きが無かったり、とかだったんで間違って覚えている人が案外多いかもしれません。え？僕だけ？
何となく del.icio.us の subscription を眺めていたら、面白い CSS ギャラリーを見つけたのでご紹介。
緑色系のデザインに特化しているので、緑好きな僕は即、ブックマークへ。ギャラリーの中で個人的に気に入ったのが CSS3.info とか Fine Store とかですかね。大仰に画像を使わないでいて、かつシンプルな構成が好みなんです。
ギャラリー自体はまだ数がそんなに多くないので、今後に期待です。
ウェブサイトのスタイルを編集しようと思った際、作ったばっかりの頃はいいけど、何ヶ月か後に編集しようとすると「あれ？これどうなってるんだっけ？」とか自分で作ったはずのスタイルなのに意図を見失う場合が稀にあります。それを防ぐために、今のうちにスタイル記述に関するルールを作っておこうと思いました。もちろん CSS を一から書き直すときや、複数人で CSS を編集するような場合でも使えるような配慮も忘れずに。
その際、他の人はどうしてるのか気になったので、色々調べていたら hxxk.jp - CSS の記述ルール記事のまとめのエントリーにドンピシャなまとめがあったので、いろいろ参考にして作ってみました。
guideline.css の作成
前述のまとめで取り上げられていた Code-404 の.css ファイルの先頭にルールを明確に記述しておく
記述定義の方法が一番しっくりきたので、それをベースに guideline.css を作成。.css ということになってますが中身はコメントアウトした大まかな CSS 編集ガイドラインだけしか書いてありません。
guideline.css の中身
- CSS プロパティの記述順序について。CSS2 Specification の出現順序を参考に記述順序を作成。CSS2.1 の改訂でサポートされなくなるプロパティとページ/オーラルメディアについてのプロパティは割愛しています。
- CSS ハックの記述法について
- プロパティの Shorthand 記述について
- CSS の分割について
簡単にまとめると上のような感じになりました。詳細は guideline.css をご覧ください。
あとは分割された reset.css、element.css、layout.css についても頭に細かい記述ルールを書いて、import.css でまとめて、お終い。だけど、今はまだルールは決めたけど時間が足りないので記述はそれに従って書いていない。それは後ほどに。
表示デバイスや表示空間の条件などによって、最適な形にレイアウトを変更または出力する手法のことを "Adaptive Layout" といいます。これを初見したのが A List Apart: Articles: Switchy McLayout: An Adaptive Layout Technique の記事で、目から鱗落ちまくりだったんですが、CSS3 の Media Queries を使えば少し劣る感じはするけど CSS Only で似たようなものが出来そうだったのでちょっと試してみました。まだ、勧告候補（Candidate Recommendation）下じゃん。とか、対応ブラウザ少ないじゃん。とかいう突っ込みは禁止。
たとえば、body 要素の背景色をブラウザの表示空間幅が 640px 以下の場合に赤、641px から 800px まで緑、801px からは青としたい場合、CSS に以下のように記述すれば上手くいきます。
CSS
@media screen and (max-width: 640px) {
body { background: #f00; }
}
@media screen and (max-width: 800px) and (min-width: 641px) {
body { background: #0f0;}
}
@media screen and (min-width: 801px) {
body {background: #00f;}
}
- 表示域幅 640px 以下
- 表示域幅 641px 以上、800以下
- 表示域幅 801px 以上
Opera 9.2 と WebKit は Media Queries の一部をサポートしているみたいで、ちょっと Opera で試しに見てみたんですが上記の場合、表示域幅が その条件になったときに上記スタイルが自動的に適応されるんじゃなくて CSS が読み込まれたときに条件と合致するスタイルだったら適応される。という感じの挙動でした。
Poll results: 50.4% of respondents maximise windows | 456 Berea Street にもあるようにディスプレイの横解像度が 1024px から 1600px 超までかなりばらけていて、かつブラウザ窓を最大化してる人、してない人。と閲覧状況も複雑になっているので、Media Queries が本格的にサポートされるようになってくると、幅ごとの最適レイアウトも意識されて、Adaptive Layout な考えもメジャーになってくるかもしれませんね。
Javascript を書く際、CSS のセレクタを使って要素を取得できると色々と楽です。このようなことを実現できるライブラリは、prototype.js の $$() メソッド等があるわけですが、特に cssQuery() は CSS3 の Stractural pseudo-class も大体使えるので結構面白いんじゃないかと思って試しにつかってみました。
実際に使ってみる
XHTML
<ul id="test">
<li>1st element</li>
<li>2nd element</li>
<li>3rd element</li>
<li>4th element</li>
<li>5th element</li>
<li>6th element</li>
</ul>
CSS
ul#test li {
margin: 0 0 1em;
padding: 1em;
border: 1px solid #ccc;
list-style: none;
}
たとえば上記のような XHTML と CSS があったとして、偶数番目の li 要素だけ文字色を #ffcc00、背景を #777777 に変えたい場合
window.onload = function () {
var elements = cssQuery('ul#test > li:nth-child(even)')
for(var i=0; i < elements.length; i++){
elements[i].style.color = "#ffcc00";
elements[i].style.backgroundColor = "#777777";
}
}
このやり方は応用して色々別のところで使えそう（例えばコメント欄の奇数偶数でスタイルを微妙に変えてみたりとかよく見ますね）ですし、CSS3 のセレクタをどうしても使いたい場合に重宝するんじゃないでしょうか。とはいえ Javascript を切られたらそれでお仕舞いなので、簡単なスタイル程度で留めておいたほうがいいとは思いますが。
たとえば h1 要素にロゴ画像を表示させたい場合、ただ CSS の background-image プロパティにロゴ画像を指定したのでは、テキストがロゴの上に被さって邪魔になってしまいます。かといって h1 要素は SEO 等を行う際、重要な位置を占めるタグなので中身に img 要素を使うのもなんだかもったいない気がする。
そこで CSS の Tips の一つに要素内のテキストを画像に置き換える（置き換えているように見せる）方法を使ったりするわけですが、僕の知ってる限り、やり方には幾つか方法があります。それを少しまとめてみました。
CSS を書く際、ブラウザごとのデフォルトスタイルの差異を吸収するため * を使ったリセットを行う。という有名な Tip があります。
この手法は便利で今もここの CSS で使わせてもらっているんですが、しかしある問題を抱えている模様。それは CSS techniques I use all the time | The Montoya Herald で詳しく書かれています。言及部分を抜粋してみると。
This eliminated all differences in padding and margin across browsers so I was free to go about styling my page. Unfortunately, this isn’t a good practice. It’s very heavy on the rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling, especially when you want to have default styled submit buttons.
簡単に言ってしまえば、ページが巨大になるとレンダリング速度に影響が出てくることと、使えるデフォルトスタイルまで殺してしまうことが懸念される。ということらしいです。
氏は同時に、自分の初期化用の CSS も載せているのでそこら辺を参考にリセット用の CSS を組んでみるのもいいかもしれません。億劫な人には Yahoo! UI Library: Reset CSS とかもお勧め。