CSSの記事一覧

<div>〜</div>の中でfloatをクリアするのはさほど難しくありません。
floatした後続の要素でクリアすれば良いだけです。

html

<div>
<img src="写真">
<p id="date">撮影日時</p>
<p>テキスト</p>
</div>

css

div img{
float: left;
}
div #date{
float: right;
}
div p{
clear: both;
}

もし後続する要素がなくても<br style="clear:both;" />を一番下に書き込めば良いだけです。例えば以下のように。

<div>
<img src="写真">
<p id="date">撮影日時</p>
<br style="clear:both;" />
</div>

しかし以下のようなhtmlとcssを書いた場合、floatをクリアするにはどうしますか？

html

<ul>
<li>リスト1<l/i>
<li>リスト2<l/i>
<li>リスト3<l/i>
</ul>

css

ul li{
float: left;
}

FirefoxやSafariで見るぶんにはafter擬似要素でクリアするだけで良いのですが、IE6、7のことを考えるとそうもいきません。そこでhtmlに通常は必要のない無駄な記述を追加することになります。

<ul>
<li>リスト1<l/i>
<li>リスト2<l/i>
<li>リスト3<l/i>
<li style="display: none;"><br style="clear:both;" /></li>
</ul>

<br style="clear:both;" />を<ul>〜</ul>内に直接書くことは出来ませんのでこのような面倒な書き方になります。一応これでW3CのチェックでもValidになります。しかし、腑に落ちない。なぜスタイルのためだけに通常は必要のないhtmlを追加しなくてはいけないのか、それもIEのためだけに。<div>〜</div>に<br style="clear:both;" />を記述するのもちょっとためらうのに。

そう思っていたのですが、とても有用な方法を見つけました。いつも拝見させて頂いているの小粋空間さんの『CSS の after 擬似要素で回り込みを解除する』というエントリーです。

方法は至って簡単、cssを以下のように記述するだけです。

ul{
zoom: 100%;
}
ul:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

FirefoxやSafariなどのafter擬似要素に対応したブラウザはul:afterでfloatをクリアし、IE6、7対策として、ulに zoom: 100%;を指定します。zoomプロパティは、もともとIEの独自拡張で、指定要素を拡大表示するためのものですが、これを記述すると自動的にfloatがクリアされるようです。

この方法を使うとfloatのクリア忘れなどが減ってコーディング作業がとても効率化しました。唯一デメリットはzoomはIE独自のものなのでCSS valid にならなくなります。

« 元に戻す

こちらのエントリーで詳しく説明されていますが、同リンク先よりrotator.zipをダウンロードして解凍して出来たフォルダをまるごとサーバーにアップロード。そのフォルダの中にランダム表示したい画像をアップロード。cssに下記を追記します。

#rotator{
background: url(/rotator/rotator.php) no-repeat top center;
width: 350px; /*横幅のサイズはお好きなように */
height: 230px; /*縦幅のサイズはお好きなように */
}

htmlのランダム表示したい箇所に

<div id="rotator"></div>

を追加すれば完了です。
とても簡単にランダム表示が実現されます。
ヘッダーの画像を毎回変えたりとか、見る人が楽しんでくれそうな仕掛けを作れそうですね。

« 元に戻す

Mac版 IE5に専用のCSSを読み込ませる方法。

/*?*//*/
@import "ie5mac.css";
/**/

＠import/*〜〜〜?*/で囲むことによってほかのブラウザはコメントと認識するのですが、Mac版 IE5だけは普通に読み込んでしまうというCSSハックです。

Mac版 IE5にCSSを読み込ませない方法

@import 'main.css';

Mac版 IE5は＠importの命令文を二重引用符（""）ではなく一重引用符（''）で囲うと、その外部スタイルシートを読み込まなくなります。これを利用して一旦読み込んだ外部スタイルシートから「@import 'main.css';」のようにメインとなるCSSを読み込むことでMac版 IE5をCSSの対象外にすることが可能です。

« 元に戻す