May 2007
5 posts
リキッドイメージとFaux columns:CSS
リキッドやエラスティックレイアウトの時に図を一緒に拡大縮小する方法と、サイドバーの背景の高さを下まで持ってくるやりかたです。
リキッドイメージ、エラスティックイメージ
リキッドレイアウトやエラスティックレイアウトにおいて、コンテンツのイメージも一緒に拡大縮小するようにする方法です。文字をデカくしたい人は図もデカくしたいでしょうから。 図は実際にやってみたスクリーンショットです。リキッドレイアウトなので、フォントサイズは変わっていませんが、画像が縮小しているのが分かるかと思います。
Read more… or Read more right here… »
実際見せるより大きい画像（幅500pxとか）を用意する。
HTMLのimgタグにwidth, height属性を書かない。
...
CSSのコメントを除去する
CSSのコメントは、/* — */ ですが、自分で分かるように区分したりメモをコメントにしていると、CSSのファイルサイズが結構大きくなるものです。だからと言ってエディタで消しちゃうと訳が分からなくなります。
先般、ある人が、CSSファイルをPHPとしてApacheに読み込ませることにより、サーバにはコメント入りCSSなのに、クライアントにはコメント無しのCSSを送るという技を使っていました。
.htaccessファイルにCSSのMIME typeを以下のように記述するだけです。
.htaccess
addtype application/x-httpd-php .css
...
マージンの相殺について：CSS
垂直方向のマージンの相殺(margin collapsing)についてです。特に難しいことはないですが、レイアウトする時は気にする必要があると思います。
A.基本
垂直方向のマージンは相殺されて、長い方のマージンになる。フロートしたボックス、及びposition: absoluteのボックスは相殺されない。
あるボックスがボックスに内包されている場合、かつ外側のボックスにpaddingとborderが無い場合、垂直方向のマージンは相殺されて長い方のマージンになる。
ボックス内が空の場合は、自分自身の上下マージンも相殺されて長い方のマージンにまとまる。
B.Tips
...
フロートとネガティブマージンまとめ:CSS
tableレイアウトをやってた人も計算してからコーディングしてたと思います。CSSのfloatを使用したレイアウトにしても、floatの挙動を正確に覚えれば、緻密な構成が可能になります。以下は私が覚えたときのフロートレイアウトの考え方のまとめです。
A.フロートの基本（フロートしたボックスとしないボックスの関係）
良くあるHTML構造でフロートしてみます。div#wrapperの中のp#content1だけをフロートさせます。content1とcontent2にmarginを設定し、paddingとborderは全てゼロです。
HTML
<div id="wrapper">
<p id="content1">
・・・
</p>
<p id="content2">
・・・
</p>
...
