上下左右の4値構文マージン、パディング、ボーダーは上下左右にあり、それらを別々に指定することができる。ように上下左右別のプロパティを使用することもできるが、4値構文によって上下左右をまとめて指定することもできる。dashed;上・右・下・左という順序は必ず覚えてほしい。左右揃え、上下揃えブロック要素の中でテキストなどを行の左・右・中央に揃えたい場合があるだろう。プロパティを使用する。......と言いたいところだが、実はこれ、英語などの“単語単位”の均等割り付けであり、文字単位ではなく、残念ながら日本語には一切対応していない。上下揃えについては一筋縄ではいかない。5px;なんだこれ......そして、このプロパティが使えるのはインライン要素とテーブルのセルだけである。インライン要素に対してこのプロパティを使っても、期待通りの結果を得られないだろう。プロパティは使わず、上下にマージンかパディングで余白を付けるのが一番簡単だろう。プロパティをブロック要素の高さに揃えると期待通りに近い表示となるだろう。これは先述の通り、(親のブロック要素の)幅いっぱいになるように自動計算される。autoは「100%」とは異なり、マージンやパディングを指定しても幅がはみ出したりせず、親要素の(ボーダーやパディングを含まない)内側の幅に合わせられる。プロパティを使って幅を指定すると、ブロック要素の幅を強制的にその幅にすることができる。Webページにおいて大小のボックスを配置したレイアウトを作るには必須のテクニックだ。ところが、ブロック要素は幅をいっぱいに取らなくても、1行を占有することには変わりがなく、極端にいえば、幅がたった1pxでも前後の要素とは改行される。ブロック要素どうしを改行させず、横に並べる方法は次の節で紹介する。繰り返しになるが、ブロック要素の実際の幅はCSSで指定した幅に加え、ボーダー(枠線)とパディング(枠の内側の余白)が追加されるので、大きさの計算には要注意。設定すると、左右の余白が等しくなるように自動計算される。以下は4値構文を利用した例。(フロート)プロパティを使う方法である。3</div>HTMLの記述。シンプルなブロック要素が三つ並んでいる。...}CSSの記述。プロパティがなければ、三つのdiv要素が縦に並ぶだけだが、CSSにより下図のようになる。プロパティを使うと、要素の幅が内容に合わせたサイズになる(もちろん指定することも可能)。プロパティとはいわゆる“回り込み”であり、指定された要素は左または右に寄せられ、続く要素はその反対側に回り込む。......と説明するより、実際に見てみたほうがよくわかるだろう(下図)。されたブロック要素も回り込むのが素敵なところだ。そのおかげで、ブロック要素を横に並べることができる。解除したい!」という場合、それを行なえるCSSプロパティはないが、“clearfix”と呼ばれる小技によって可能となる。class="float">float3</div></div><p>もうfloat解除されてるよ!</p>あら不思議。解除されている!どうしてこうなるのか、原理を説明してもややこしいので、“なるものはなる!”と覚えておこう。ところで、クラス名は何でもいいのだが、このテクニックを考えた昔の偉い人が“clearfix”と名付けたので、俺たちがとやかく言ってもべつにいいけど、まあ何でもいい。要素は外から見れば高さがゼロとして扱われる点だ。※もう少し厳密にいうと、浮いてしまって元の居場所がなくなる。しなければ全体の高さもゼロになってしまう。要素の高さ(スペース)を無視してかぶさってくる(中身は回り込むが)。使って実現してみよう。目標は下図のように、上部のヘッダー、下部のフッターの間に、左側にメイン領域、右側にサイドバーを配置する。よる2カラムレイアウトHTMLは以下の通りで、前回の記事を踏まえたシンプルな構造となっている。id="footer">【フッター】</footer></div></body>CSSを適用しやすくするためにID名を付けたり、前回の記事にはなかったがbody要素の内容すべてを囲むdiv要素(ID名が“wrapper”)を使っているのがコツだが、赤字の部分にこれからCSSを適用していく。300px;}ちなみにこのレイアウトの幅、このブログのものと全く同じだよ。されて、上の図の通りのレイアウトになった。あとは、“wrapper”のdiv要素に幅を指定してページ全体の幅とし、ほぼ完成なのだが......思い出してほしい。しなければならないことを。使う場合は、メイン領域(main要素)とサイドバー(aside要素)をdivタグで囲み、そのdivタグに“clearfix”というクラス名を付ける。あとは、内容を追加したり、スタイルを弄ったりすればもう完成。使い方が特殊だが、覚えてほしい。系プロパティと呼んでいる)。top要素の上端(マージンまでを含む、以下同じ)の位置を下方向に移動させる量(負の値だと逆の上方向、以下同様)right要素の右端の位置を左方向に移動させる量bottom要素の下端の位置を上方向に移動させる量left要素の左端の位置を右方向に移動させる量z-index重なりの優先度。0が基準で大きいほど上(手前)に表示。