Hatena::ブログ(Diary)

Higé au lait

 

2011年03月04日

CSS3 Columns を試してみる

Opera 11.10 の最新 weekly で CSS3 Columns なるものが使えるようになったので早速試してみた.

CSS3 Columns は簡単にいうと今まで float や position などを使って行っていた段組を簡単に行えるプロパティたち.

導入したのはこのブログのフッタ部分.

HTML

<div id="footer">
   <div class="section">
   </div>

   <div class="section">
   </div>
</div>

CSS

#footer {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}

#footer div.section {
break-inside: avoid;
}

解説

column-count プロパティでカラム数を決める.これだけで指定したカラム数で要素の中のものをきれいに段組してくれる.しかしこれだけだと中途半端なところで別カラムに移動してしまう場合があるので, div.section で分かれていほしくない要素を囲み,break-inside: avoid を指定して途中で切れないようにしている.

CSS3 Columns を使う前とは少し違う段組になっているもののわかりやすい HTML になった.当然ながら対応していないブラウザは段組にならない.

参考

2010年11月06日

jQuery と CSS3 の :target セレクタを使ってスライドショーを作ってみた

:target セレクタの便利さを試してみたかったので作ってみた.


デモ: jQuery Slideshow with CSS3 :target selector


上下キーでページ切り替え.単純なページ切り替えしか実装していない.文字が追加で表示されるとか横から何か飛び出てくるとかはできない.

JavaScript 側ではフラグメント識別子を変更しているだけという手抜き仕様.


スライドショーといえば Opera Show が手軽なんだけど,Opera 以外じゃ動かないからね.


コード


使い方

HTML
<div>
	<p>page 1</p>
</div>
<div>
	<p>page 2</p>
</div>

<script type="text/javascript">
$("div").slideShow(); //それぞれの div を 1 スライドに
<script>

指定した要素に "slide" というクラスをつけている.

CSS
/* html と body を height: 100% にしているのは .slide の height を 100% にするため*/
html {
	height: 100%; 
}
body {
	height: 100%;
}
.slide {
	height: 100%;
	display:none;
}
.slide:target {
	display:block;
}

あとは .slide をお好みのスタイルにするだけ.