第9回ホームページ作成講習会

準備

注意事項

お約束

CSSのパスは各自の環境に合わせ調整すること。

前回の補足

idやclassとstyle属性の併用

当たり前ですが、idやclassとstyle属性は併用できます。
……言ったっけ?

前回の補足

text-alignプロパティ

text-alignプロパティはalign属性と同意とか言いましたが、厳密には異なります。
例えば、画像を右側に寄せるには、

こんな感じで3つの手法がありますが、上2つと下1つは全くやっていることが異なります。
下1つはフロートという重要な概念を用いて画像を右に寄せています。フロートについてはこの後解説します。(もっとも、align属性を用いた手法は非推奨で、普通CSSを使います。HTML5ではalign属性自体が廃止される予定。)

前回の補足

text-alignプロパティ

LO img要素自体にalign属性を用いるとこんな表示になります。

フロート

この講習会を受けている意識の高い人の中には、既にウェブサイトの一つや二つ作り始めているんじゃないかと思います。しかしimg要素を使っている時に第8回の知識だけでは「何か」ができなくて困ってる人が多いんじゃないでしょうか。

前スライドのimg要素自体にalign属性を用いた例は、ボックスのフロート(浮動化)という手法を用いています。同じことがCSSのfloatプロパティとclearプロパティを使ってもできます。

まあとりあえず、次のスライドを見て下さい。フロートはまだ用いてないですけど。

フロート

LO左の画像は、LOの画像です。ごにょごにょごにょごにょごにょごにょごにょごにょごにょごにょごにょごにょごにょごにょごにょ

フロート

前スライドの例は、「新聞みたいな感じで画像の隣に文字を複数行書こう」(文字の回り込み)として失敗した例です。

このようにただimg要素の横に文字列を書いただけでは横に一行だけ文字列が表示されるだけです。

こんな時は、img要素をフロート、すなわち通常の場所から取り外し右とか左とかに浮動させれば解決します。イメージで言うと天空のラピュタ的な奴です。(違うかも)

floatボックスの表示位置を指定。(フロート)
left、right、none(初期値、フロートしない)を取れる。
clearfloatを解除。
left(左だけ解除)、right(右だけ解除)、both(両方解除)などを取れる。

フロート

ソフトフォーラム左の画像はLOです。
ごにょごにょごにょごにょごにょごにょごにょごにょごにょごにょごにょごにょごにょ

これは、前回の補足で触れたimg要素に対するalign属性と同じ役割をします。

フロート

ソフトフォーラム ソフトフォーラム 人生オワタ

上と下は同じ表示になります。真ん中に挟んでも同じです。floatプロパティは要素をフロートさせるので、同じブロックレベル要素内ならばimg要素をどこに書いても表示は同じです。

フロート

ソフトフォーラム わぁい! わぁい!

同じ方向に複数の要素をフロートさせると、後に来た要素が前の要素の右か(要素の合計幅が親要素の幅よりも大きい場合)下に表示されます。要素同士は重ならず、親要素の上辺を飛び出ることもないです。(例でいうと白い領域の上)

フロート

今度はclearプロパティも使ってみます。

ソフトフォーラム ソフトフォーラム
わぁい!
ロリコン

「わぁい!」はimg要素同士の間に表示されますが、「ロリコン」はclear: bothを宣言したので画像の下に表示されます。

フロート

レイアウトへの応用

フロートには他にも色々厳格なルールがありますが、煩わしいので本講習会では触れません。
気になった人は「CSS float ルール」とでもググって下さい。

分かりやすいimg要素でフロートについて説明しましたが、このフロートはサイトのレイアウトに頻繁に用いられます。

前にやった通りtable要素を使ってもレイアウトはできますが、floatプロパティをdiv要素などと組み合わせて使う手法のほうがより一般的です。

フロート

レイアウトへの応用

フロート

レイアウトへの応用

実際の表示

今まではdiv要素で同じ高さの場所に複数のブロックレベル要素を配置することができませんでしたが、このfloatプロパティを用いることでそれが可能になります。

menuとmainの幅の合計が100%を超えると「(要素の合計幅が親要素の幅よりも大きい場合)下に表示されます。」というルールによってレイアウトが崩れるので注意。
なお、例ではborderが設定されてるのでぴったり100%にしてもborderの分幅がでかくなってるのでレイアウトが崩れます。(widthやheightプロパティはボックスモデルのコンテント領域にのみ有効でしたよね)

なお、floatプロパティを使う際の注意点として、img要素などの予め幅のあるものは例外ですが、div要素などは必ずwidthプロパティで幅を定めて下さい。そうでないとレイアウトがgdgdになります。

フロート

floatプロパティの問題点

ここからは難しいので補足的な説明になります。(対象としては脱初心者したぐらいの人向け)

floatプロパティは便利ですが、これが原因でレイアウトが崩れちゃうことがよくあります。

ソフトフォーラム ロリコン

フロート

floatプロパティの問題点

親要素のdiv要素内に子要素であるimg要素と「ロリコン」という文字列が配置してあります。

本来、親要素のdivに子要素であるimg要素が内包されるはずですが、例ではimg要素が底から突き出ています。これを製作者たちはレイアウトが崩れていると考えます。

実は、CSSの仕様上フロートは要素を浮かせたものなので、フロートしたimg要素は親要素に内包されないのでこの表示はある意味正しいっちゃ正しいのです。(「ロリコン」はフロートさせてないのでフツーに親要素に内包されています。)

※Internet Explorerなどの一部のブラウザではなぜか子要素が内包されてしまうバグがあるっぽいです。

この問題への対策はいくつかあります。

フロート

floatプロパティの問題点

ソフトフォーラム ロリコン

フロート

floatプロパティの問題点

前スライドの例では、親要素内の最後に

を追加しました。

これは、このfloatプロパティの問題がfloatプロパティでフロートさせた要素をclearプロパティでクリアしていないことに起因することを利用したものです。

要は、floatさせ放しはだめだからちゃんとclearでクリアしようねってことです。

フロート

floatプロパティの問題点

しかしながら、HTMLは文書構造を表すためのものなので、中身が空のdiv要素をレイアウトのために挿入するのは規約上誤りを含みます。

逆に、以下のように何か文字列を挿入すれば問題はないんですが、いつも何か入れる文字列があるとは限りませんよね。

フロート

floatプロパティの問題点

そこで2004年ぐらいにオーストラリア人だかオーストリア人だかの人が考えたのが、以下のclearfixなる手法です。

※例ではclearfix用の宣言はclassに定義し、style属性にはこのdiv要素でのみ用いたスタイルを定義しています。

フロート

floatプロパティの問題点

このclearfixクラスをCSSに加え問題となっている親要素から呼び出せば、空のdiv要素の挿入と同じ効果が得られます。

なお、紹介したclearfixは一例で、他にも色々な手法が存在します。「clearfix」とググればもっと短い記述で済むバージョンもあるので、探してみて下さい。
個々のプロパティの説明も今回は難しいので省略します。気になる人はググってk(ry

フロート

floatプロパティの問題点

しかしもっと簡単な手法もあります。

親要素divのstyle属性に「overflow: hidden;」(値はautoでも可だがhiddenの方が一般的)が加わりました。これだけです。

overflowプロパティは要素からはみ出したコンテントの表示方法を指定するプロパティですが、ここでは詳しい説明は省略します。

※なお、中級者以上でoverflowプロパティの意味を知っている人は、autoはともかくなぜhiddenで高さが自動調整されるのか疑問を持つかと思いますが、初期値visibleやautoの場合とhiddenではブラウザ内部での高さの計算方法が違うらしいです。参考までに。

フロート

floatプロパティの問題点

しかしながら、overflowプロパティを用いた手法はIE6以下などの古いブラウザは非対応です。

っつーことで、古いブラウザ切り捨てるならoverflow、面倒くさくても完全対応させたいならclearfix、CSSの規約を無視するなら空の要素の挿入を用いて下さい。

あー、それと
http://rain119.seesaa.net/article/136365549.html
こんな場合にもこの手法は用いられるようです。参考までに。

フロート

以上でフロートの説明は終わりです。難しかったと思いますがちゃんとしたウェブサイトを作ろうとした際には必ず使用するので、使いながらでいいのでマスターしましょう。

なお、レイアウトにはフロートを用いなくてもpositionプロパティによる絶対配置、相対配置、固定配置などの手法も使えます。たぶん後で触れられると思う。