CSS3で色々とできそうな事

CSS3の勉強をちまちまと。

これはCSS3のdisplay:boxを使って、ソース上ではコンテンツが先でサイドバーがあとに記述されているような状況でも、box-ordinal-groupで順番を変更して表示してしまいましょうという方法です。

ケータイで見る時にメニューよりコンテンツを先に...とかいう時に使いたかった手法だわ、一所懸命ソースの順番を考慮して並べ替えたりCSSを配慮しつつ書いていたのが懐かしい。今となってはスマホでの使い勝手を考えてUIを優先する事が大事なのでケータイの事まで考えないというか、そもそもケータイではCSS3使えないしってなもので。

PCでもソースの順を都合よくかけるという点では精神衛生上よろしい感じ。display:inlineで表示順にソースを記述するよりはすっきりするかな。とっても興味深い。

そしてお次。

ページ遷移は、transitionでアニメーションの所要時間をしていして、translateXで移動させています。
/* アニメーション */
.page { 
        -webkit-transition: 0.8s;
        -moz-transition: 0.8s;
        -o-transition: 0.8s;
}
 
/* ページ遷移 */
#a1:target .page { 
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -o-transform: translateX(-100%);
}
#a2:target .page {
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        -o-transform: translateX(-200%);
}
#a3:target .page {
        -webkit-transform: translateX(-300%);
        -moz-transform: translateX(-300%);
        -o-transform: translateX(-300%);
}
で、:targetという擬似クラスでハッシュが変わった時に、該当するページが表示されるようにページが動くという仕組みになってます。

via css3でjquery mobileっぽいのを作ってみた : 半人前ウェブディレクターの奮闘記

アコーディオンとか色々と使い道のある手法。 jqueryがあまり好きではない（表現にかかるところはcssにまかせて、スクリプトは動作に専念すべきという持論の）私にとっては有り難いね、こういうのは。スクリプトでスワイプと連動させられると最高。

2011-08-06 01:10