#前置き
「HTML5&CSS3デザインブック」を読んだ。
大きくは、近年のWebデザインについて語られていた。
SIerとして、table ベースで作られていた社内向けWebページしかメンテしてこなかったので、
現在のWebページの作り方という意味で、本書は非常に勉強になった。
ここでは、備忘的に内容で気になったものをまとめる。
#近年のWebページデザインとしてのボックス
近年のWebページでは段組みといって、テキストや画像を複数の段に分けてデザインする。
複数の段を実現するために、ボックスを複数並べ、それぞれのボックスに画像やテキスト、
メニュー等を入れ、それらの配置をコントロールする。
#フローティングボックス
要素を <div> タグで囲み、これらをボックスとする。
ボックスは float 属性を指定し、他のボックスから影響を受けない、フローティングボックスという状態にする。
フローティングボックスを実現するために、float の指定が他の要素と干渉しないよう clearfix（クリアフィックス）と呼ばれる設定を適用する。
<!-- ボックス化 -->
<div class="boxA">
</div>
/* clearfix */
.boxA:after {contents: "";
display:block;
clear : both}
/* フローティングボックス化 */
.boxA {float: left}
#ボックスの並び順
width 属性等で全体のパーセンテージ比率を100%以内にすることで、
clearfix 適用範囲内のフローティングボックスの並び型を変えることができる。
また並び順を変えるためには、float 属性の value 指定を left / right で指定することで
変えることもできる。
#レスポンシブWebデザイン
表示するデバイスの横幅によって、フローティングボックスの並びを、これまでの技術をもとにコントロールすること。
css 内に メディアクエリ を記載し、表示デバイスの画面幅によって適用する css 、適用しない css を設定することが可能。
/* メディアクエリ */
@media (min-width:768px) {
/* hogehoge */
}
#最後に
ざっくりだったが、基本的なことは大体上記な感じ。
ボックスを使用したデザインは、今後UI変更等があった場合、業務でも使えるかもしれない。
ともかく、HTMLやCSSの基本は知っていても、実際どうやってデザインすりゃいいんじゃ、という方にお勧めの一冊。