ボックスの位置を操作する

博士Ｈ：

今回は配置についてじゃ。
最初のプロパティは、floatについてじゃ。
これはimgのalignと似た効果じゃな。

生徒Ａ：

つまり、文字が指定した要素の周りに
回り込むってことですか？

博士Ｈ：

そうじゃ。
これの特徴は、画像だけではなく、
文字やテーブル、Flash、ボタンなどのあらゆるものに
回り込みを指定出来ることじゃ。

生徒Ｂ：

ん？
「文字を寄せる」って、幅はどうやって決めるんだ？

博士Ｈ：

良いところに気が付いたのぉ。
文字等の場合は、幅の指定は必須なのじゃ。

幅はwidthプロパティで指定するのじゃ。
値は長さとパーセンテージじゃ。

もちろん、clearの代わりもあるのじゃ。
そのまんま、clearプロパティなのじゃ。
じゃが、困ったことに、
両方の回り込み解除はallは無くてbothなのじゃ。

生徒Ｂ：

なんで。

博士Ｈ：

意味的にヘンじゃからじゃろ。
と思う。

あ、ちなみにclearは
ブロック要素にしか適用されないで、
それは頭に入れといてくれなのじゃ。

生徒Ｂ：

ん？
そう言えば、インライン要素を中央に寄せるのって、
CSSではどうやるんだ？

博士Ｈ：

それは、text-alignという、
また別のプロパティを使うのじゃよ。
キーワードは以下の通りじゃ。

left 左寄せ
center 中央寄せ
right 右寄せ
博士Ｈ：

次はpositionプロパティについてじゃ。
ややこしいで、頑張って聞くのじゃぞ。
これにはabsolute、relativeなどの
値があるのじゃ。

生徒Ｂ：

「等」っていうことは、もしかして他にもあるの？

博士Ｈ：

2つあるのじゃが、それについては割愛するのじゃ。

まずは説明しやすいrelativeからじゃ。
relativeは相対配置と言って、
その要素の現在位置を基準にして
表示位置を移動するのじゃ。

生徒Ａ：

移動するって、positionを指定しただけじゃ
どう移動するか分からないんじゃないですか？

博士Ｈ：

もちろん、
どう動かすかというプロパティが別にあるのじゃよ。
topとleftというのじゃ。

これの値には長さとパーセンテージが使用出来るぞい。
それぞれ、下・右へどれだけずらすかを
指定するのじゃよ。
負の値じゃと、上、左方向へ移動するのじゃ。

生徒Ｂ：

topなのに下へ、leftなのに右へ移動なの？

博士Ｈ：

これはabsoluteの場合と合わせる為と言えるかの。
上・左の辺からどれだけ動かすか、ということなのじゃ。

生徒Ａ：

この場合、
パーセンテージだと何をもとに値を計算するんですか？

博士Ｈ：

相対配置の場合は
その要素自身の幅に対する割合じゃ。
例えば、インライン要素に指定した場合、
top:100%じゃと、ちょうど文字の高さ分下にずれるし、
left:100%じゃと、内容の長さ分右にずれるのじゃ。

生徒Ａ：

なるほどなるほど。

博士Ｈ：

後に続く内容は、
その要素がもとの位置にあるかのように
振る舞うのじゃ。

生徒Ｂ：

ああ！
もしかして、
カーソルを乗せると右下にずれるリンクって、
これ使ってるんだろ。

博士Ｈ：

そのとおりじゃ。
よく気が付いたの。

例えば、こんなふうにしておる。
a{position:relative}
a:hover{top:1px;left:1px}

生徒Ｂ：

ふむふむ(..φ)

博士Ｈ：

最後に、absoluteについてじゃな。
これは絶対配置と呼ばれておる。

生徒Ａ：

何が絶対なんですか？

博士Ｈ：

要素の位置を、現在の位置に関係なく
ページ全体に対して指定するからじゃよ。

生徒Ａ：

ああ！
ページの左上からの位置を
topやleftで指定するんですね!

博士Ｈ：

うむ、下からや右からの位置も指定出来るぞい。

生徒Ｂ：

分かった!
その場合はbottomとかrightとかって使うんだろ。

博士Ｈ：

ほほー、冴えとるの。

で、注意じゃが。
パーセンテージの場合は、その要素ではなく
ページに対するパーセンテージなのじゃ。

生徒Ａ：

ってことは、
高さ100％にすると、
ページの上から下までになるってことですか？

博士Ｈ：

そうなるの。

生徒Ｂ：

博士、こういうことするんだから
当然、後ろの内容は絶対配置の要素の存在は
無視するんだよな。

博士Ｈ：

そのとおりじゃ。
おっと、高さはheightプロパティで指定出来るぞい。

生徒Ｂ：

博士、高さ指定したらはみ出したりしない？

博士Ｈ：

うむ、ええところに気が付いたのぉ。
そのはみ出した内容を扱う為のプロパティ、
overflowがあるんじゃ。

値はvisible、hidden、scroll、autoの4つがあるが、
基本的にはautoをオススメじゃ。

visible 内容はボックスの外にはみ出して
書かれるのじゃ。
hidden はみ出した部分は隠れるのじゃ。
scroll はみ出した部分はスクロールで見られるようにするぞい。
つまりボックスにスクロールバーが付くのじゃな。
auto 基本的にscrollと同じじゃが、
内容がボックスにきちんと収まる場合は
スクロールバーは表示されないのじゃ。
生徒Ａ：

うわー、CSSの本領発揮ってところですね!
すごい!

えっと、で、
絶対配置したら重なったりしちゃいますよね。
それってどうするんですか？

博士Ｈ：

重なり順を指定するプロパティもあるんじゃよ。
z-indexじゃ。
これの数値が高いほど、一番上に乗るんじゃ。

生徒Ｂ：

ほほー。

博士Ｈ：

だからと言って、
ソースの内容の順番を
むちゃくちゃにして良い訳ではないぞい。

生徒Ｂ：

ぎっくぅ。。

生徒Ａ：

今日は充実してましたねー。

博士Ｈ：

じゃな。
それでは本日の授業はここまで!