CSSの実習(7) - レイアウト関連の指定(1)・フローティング。

フローティングの指定で出来る事。

CSSでのフローティングとは、ある要素を左または右に寄せ、後続するテキストをその反対側に廻り込ませる事です。

通常のウェブブラウザのレイアウトはブロックレヴェル要素を上から下に、一次元的にレイアウトされます。

フローティングを用いと、ブロックレヴェル要素を左または右に寄せる事が出来、その結果二次元的なレイアウトも可能になります。

• フローティングに関するプロパティについての詳細は、フローティング関連の主なプロパティをご覧ください。

今回やりたい事。

今回は以下の事をしてみましょう。

1. HTML文書内に埋め込んだ以下の画像を、左にフローティングさせ、後続のテキストを反対側に廻り込ませます。
   • (幅218ピクセルズ、高さ269ピクセルズ)
2. ただ、廻り込みを指定した場合、そのままにしておくと延々廻り込みとなりますので、適切な処で廻り込みを解除しましょう。
   • 廻り込みを解除しないと、大きな画像の場合思わぬところまで廻り込みの影響が出ますので、廻り込みを行う場合には何処で廻り込みを解くかは考えておく必要があります。

   ここでは、後程現れる<hr>要素(段落間の区切り)で廻り込みを解除する事とします。

3. これ以外にはフローティングは一切行いません。すなわち、デフォルトではフローティングは一切なしとします。

ここでは、実習としてやりたい事を挙げておりますが、もし読者の方がここで挙げているスタイルではなく、別のスタイルにしてみたいと思うのであれば、それを実際にやってみるのが何よりの実習です。

是非挑戦してみてください。

実際のスタイル定義。

さて、これから実際に前回までのスタイル定義ファイル style.css にスタイルを追記していきましょう。

• 前回はリスト関連のプロパティの指定をしております。

* {
    background-color: transparent;
    background-image: none;
    color: #000;
    margin: 0;
    padding: 0;
    border: none 0;
    background-color: #fff;
    color: #000;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    font-size: 100%;
    font-style: normal;
    text-decoration: none;
    font-weight: normal;
    text-align: left;
    line-height: 1.5em;
    text-indent: 0;
    float: none;
    }

/* 特別なクラス名を持った要素のスタイル定義 */
figure.sample img {
    float: left;
    }

hr {
    margin: 3em 0 1em;
    border: 1px solid #888;
    clear: both;
    }

ここまででのスタイル定義ファイルの纏め。

以上のスタイルを纏めると、スタイル定義ファイル style.css は以下のようになっているでしょう。

• 読み飛ばす

@charset "shift_jis";

* {
    background-color: transparent;
    background-image: none;
    color: #000;
    margin: 0;
    padding: 0;
    border: none 0;
    background-color: #fff;
    color: #000;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    font-size: 100%;
    font-style: normal;
    text-decoration: none;
    font-weight: normal;
    text-align: left;
    line-height: 1.5em;
    text-indent: 0;
    float: none;
    }

html {
    background-color: #fff;
    padding: 2em 1em;
    }

h1 {
    margin-bottom: 1em;
    background-color: #ff0;
    color: #090;
    font-style: italic;
    font-weight: bold;
    font-size: 200%;
    line-height: 1.2em;
    text-align: center;
    }

h2 {
    margin: 3em 0 1em;
    border-color: #cc0;
    border-style: solid;
    border-width: 1px 2px 4px;
    background-color: #fff;
    background-image: url("Background-H2.GIF");
    background-repeat: repeat-y;
    background-position: right top;
    color: #090;
    font-size: 120%;
    line-height: 1.2em;
    }

p {
    margin: 1em 0 0 2em;
    text-indent: 1em;
    }

ul {
    margin: 1em 0 0 4em;
    list-style-image: url("ListMarker.GIF");
    list-style-type: disc;
    list-style-position: outside;
    }

figure {
    margin: 1em 0 0 2em;
    }

hr {
    margin: 3em 0 1em;
    border: 1px solid #888;
    clear: both;
    }

a:link {
    color: #090;
    text-decoration: underline;
    }

a:visited {
    color: #000;
    text-decoration: underline;
    }

dfn {
    border-bottom: 2px solid #cc0;
    color: #090;
    }

em {
    padding-top: 4px;
    background-color: #fee;
    background-image: url("Background-EM.GIF");
    background-repeat: repeat-x;
    background-position: left top;
    color: #000;
    }

/* 特別なクラス名を持った要素のスタイル定義 */
figure.sample img {
    float: left;
    }

このスタイル定義ファイルを適用したHTML文書を表示させると以下のようになります。

前回までのスタイル定義の場合

今回のスタイルを適用した場合

画像周りの修正。

さて、実際に表示させてみたところ、画像の右のテキストがぴったり画像にくっ付いてしまい、その結果リストに付けたマーカが画像に喰い込んでしまっております。

また、今回は後続のテキストがそれ程ないため影響が出ておりませんが、後続するテキストが長い場合、画像の横に入り切らなかった文が画像のすぐ下にぴったりくっついて廻り込んでしまいます。

これらは、フロートさせた画像の右と下に適切な余白が入っていない事が原因です。

• このように、フローティングを行う場合には、フロートさせる要素に適切に余白を与えないと思わぬ失敗を犯す事となります。

そこで、フローティングの対象となる<img>要素について、

• 右側には二文字分の余白
• 下側には一文字分の余白

を与える事にします。

具体的には、margin: 0 2em 1em 0; プロパティを与えれば良い事になります。

• 読み飛ばす

figure.sample img {
    margin: 0 2em 1em 0;
    float: left;
    }

この結果、本講での最終的なスタイル定義ファイルは以下のようになります。

• 読み飛ばす

@charset "shift_jis";

* {
    background-color: transparent;
    background-image: none;
    color: #000;
    margin: 0;
    padding: 0;
    border: none 0;
    background-color: #fff;
    color: #000;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    font-size: 100%;
    font-style: normal;
    text-decoration: none;
    font-weight: normal;
    text-align: left;
    line-height: 1.5em;
    text-indent: 0;
    float: none;
    }

html {
    background-color: #fff;
    padding: 2em 1em;
    }

h1 {
    margin-bottom: 1em;
    background-color: #ff0;
    color: #090;
    font-style: italic;
    font-weight: bold;
    font-size: 200%;
    line-height: 1.2em;
    text-align: center;
    }

h2 {
    margin: 3em 0 1em;
    border-color: #cc0;
    border-style: solid;
    border-width: 1px 2px 4px;
    background-color: #fff;
    background-image: url("Background-H2.GIF");
    background-repeat: repeat-y;
    background-position: right top;
    color: #090;
    font-size: 120%;
    line-height: 1.2em;
    }

p {
    margin: 1em 0 0 2em;
    text-indent: 1em;
    }

ul {
    margin: 1em 0 0 4em;
    list-style-image: url("ListMarker.GIF");
    list-style-type: disc;
    list-style-position: outside;
    }

figure {
    margin: 1em 0 0 2em;
    }

hr {
    margin: 3em 0 1em;
    border: 1px solid #888;
    clear: both;
    }

a:link {
    color: #090;
    text-decoration: underline;
    }

a:visited {
    color: #000;
    text-decoration: underline;
    }

dfn {
    border-bottom: 2px solid #cc0;
    color: #090;
    }

em {
    padding-top: 4px;
    background-color: #fee;
    background-image: url("Background-EM.GIF");
    background-repeat: repeat-x;
    background-position: left top;
    color: #000;
    }

/* 特別なクラス名を持った要素のスタイル定義 */
figure.sample img {
    margin: 0 2em 1em 0;
    float: left;
    }

このスタイル定義ファイルを適用したHTML文書を表示させると以下のようになります。

修正前のスタイル定義の場合

今回のスタイルを適用した場合