WEBデザインのパソコンスクールのディーシーエスは生徒2人へのライブ授業

css3の場合に、とても便利なレイアウトのdisplay: box; を書きましょう。
スマホサイトを制作するなら絶対に使います。

今まで、ホームページのレイアウトを制作する場合に
float:left;
clear:both;
<br clear=”all”>
などのようなタグを使い、クリアされていないだの、3カラムなら、これをfloat:left;して、これをfloat:right;して、なんて言う作業がありました。
このfloat、clearで悩んだのは私だけではないでしょう。
しかし、css3の場合には違います。
簡単に番号を書くだけで、左から順番になってくれるのです。
もちろんパソコンのホームページに利用するには厳しいですがスマートフォンサイトには使えますね。

タグも簡単です。
最初に、土台となるcontainerの中に
div#container{
width:900px;
display: -webkit-box;
display: -moz-box;
}
と書く

次にcontainerの中に配置する要素を
div#leftnavi{
width:250px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
}
div#contents{
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
}
と書けば、なんてことない普通に2カラムのサイトが完成します。
float、clearは書かなくていいのです。

div#contents内にある
-webkit-box-flex: 1;
-moz-box-flex: 1;
この要素のおかげで、div#contentsは自動的にwidth:650px;となります。
自動的に、div#containerとdiv#leftnaviの幅から、伸縮するのです。

もちろん-webkit-box-ordinal-groupの番号を逆転すれば、レフトナビではなく、コンテンツが左側に配置されます。
便利でしょ!
スマートフォンサイトに絶対に必要な要素です。

2018年11月
« 2月    
 1234
567891011
12131415161718
19202122232425
2627282930  

* RSS FEED

このサイトのトップへ