HTML06_よく使うCSS(レイアウト編)

こんばんは! Ben@睡魔と格闘中です。今日は異例の雪かき三昧だったので疲労ピークですが、娘が今宿題を頑張っているのでブログ書いて起きてます。というわけで、前回に引き続きCSSです。

20160118b.gif
CSSはHTMLの見栄えを設定してくれるものですが、見栄えには文字や背景などの色や大きさなどの装飾のほか、横並びにしたり余白を多くとったりというレイアウトも含まれます。今回はそのレイアウトを中心に紹介します。
マージン
画像や表などで外枠の罫線があったりしますが、その外側の余白です。画像とその周辺の文章との間に見やすいように間を開けたいときなどに使います。以下もそうですがピクセル(px)、ポイント(pt)、パーセントなど様々な単位で設定できます。
パディング
内側の余白です。表やブロック要素などで境界線や罫線を引いたりしますが、その中の文字とかがあまり線にくっつかないようにする余白です。
ボーダー
上の説明にも出ているいわゆる境界線や表の罫線に当たる部分です。線の幅のほかsolid=実線などの線の種類や色も選べます。


20160118c.PNG
とりあえずこれら3つの関係を図にしました。実際のコンテンツの幅を指定してもなぜかはみ出るんだよね?という方は、一番内側のコンテンツの幅のみを設定していることがよくあります。パディング、ボーダー、マージンそれぞれを足した全体のサイズを考慮することでレイアウト崩れを防ぐことができます。CSSの新しいバージョン3では、全体を基準に設定できますが、古いブラウザ用にこのような従来の方法で計算しているサイトも多いです。

文字揃え
いわゆる水平方向の揃えです。右寄せ(right)、左寄せ(left)、センタリング(center)を選びます。センタリングは昔は<center>タグで行っていましたが、最近の風潮でデザインとコンテンツをすみ分けるためにレイアウトもタグ表記は廃止に向かっています。なので、CSSで設定することをお勧めします。
これまで出てきたとおり、いろいろなモノの幅です。全画面幅は100%と指定。画面の小さいスマホなどではよく使います。
高さ
幅ほどではないですが、よく使います。画像のように縦横比を維持したまま幅の指定に合わせて拡大縮小したいときはautoを指定します。


このくらい把握していると、も実際そうでしたが、WEBページ作成に重宝すると思います。最近はスマートフォンやタブレットといった、画面解像度がまちまちないろいろな機器が出ています。それらに対応するための方法を次回ノートしたいと思います。今見てきたら娘の宿題は残り1/3、今日中に寝れるか

この記事へのコメント


この記事へのトラックバック