メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

プレーンテキスト版バックナンバー

今週＜第49号＞マガジンのおさらい

　　　　　　　　　　　　　　　　　  毎週金曜日配信　What's New 2003/4/25
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
　今週の課題 ■ XHTML講座　第12回 XHTML1.1実践 〜 フローティング

◆ コンテンツのフローティング

フローティングとは、あるコンテンツに別のコンテンツを回り込みさせる手法に使います。例えば、このページの上部に「Web for beginner 作成支援」という画像が右側にあり、テキストが左側に回りこんでいます。

HTMLの文書型定義（DTD）が Transitional の場合、非推奨属性ながら以下の構文が利用できます。

<img src="webfor.png" width="220" height="119" align="right" alt="作成支援">

この要素の中で配置される align属性によって、画像がフローティングされます。残念ながら、XHTML1.1では、この属性を使用することができません。

そこで、スタイルシートを利用してコンテンツをフローティングします。スタイルシートの設定は非常に簡単で、

フローティングさせたい要素にこの設定をするだけで、それがブロックレベルでもインラインレベルでも、すべての要素に適用されます。

◆ ブロックレベル要素を横に並べる

ブロックレベル要素を横に並べる方法は、テーブル以外にありません。しかしフローティングを利用することで、テーブルの表示と同じような表現が可能です。

h1要素を横に並べる　（見出し要素を横に３つ並べました。テーブルの表示も併記しています。）

実は、当サイトのトップページでもフローティングを用いて、テーブルによるレイアウトから大きく変更しました。一見すると、テーブルを使ったように見えるでしょう。

スタイルシートの float属性は、CSS Lavel 1 で制定されているため、比較的多くの視覚系ブラウザで採用されています。テーブルをレイアウトに使わない代替として今後流行するかもしれません。

◆ テーブルのようなレイアウト

ブロックレベル要素を横に並べることができるフローティングを使って、まるでテーブルで作ったようなレイアウトを作成します。

左の図のように、汎用ブロックレベル要素にフローティングを設定し、その中にコンテンツを配置することで、テーブルで作成したレイアウトと同じ表現をさせます。

これによってテーブルでレイアウトを構成する問題点を解決し、表示速度を向上させ、非視覚系ブラウザにもコンテンツ内容が正確に伝わるようになります。

フローティングによるレイアウト　（詳しい XHTML構文は、今週のメールマガジン 「第49号」 をお読みください。）

テーブルによるレイアウト　（先週解説したテーブル構文と比較してください。）

◆ フローティングの解除

フローティングを設定した場合、常にコンテンツがフロート（浮遊）しているコンテンツに回りこもうとします。フローティングを解除しなければ、フロート以降のコンテンツの表示が非常におかしくなってしまいます。

フロートを解除しない場合　わざとおかしな表示になるようにしています。

フローティングを解除する場合には、以下のように設定します。

div#nonefloat { clear: left }　セレクタの名前は任意です。

left とは、フローティングが left に設定されている場合で、right ならば、clear: right と記述し、両方設定されている場合は、clear: both と、両方の回りこみを解除するようにしなくてはなりません。

フロートを解除した場合　上記のスタイルシートを設定しています。