トップ » 参考資料・TIPS集 » TIPS » CSS講座 » CSS基礎講座　CSSで楽しよう！vol.5　レイアウト編（2 page）

CSS基礎講座　CSSで楽しよう！vol.5　レイアウト編

～レイアウトしてみよう！float攻略！

印刷用ページを表示する

関連タグ

( 2008/6/2　グリニッジ有限会社　金井佳子　)

いよいよ段組！

早速、設計図通りに幅を指定してみましょう！
CSSで、スタイル指定の仕方はこうなります。#(シャープ)の後に、ID属性で指定した名前を書きます。（div#container　の様に、要素の後に#を続けても同じ意味です。）

PLAIN TEXT
CODE:
  1. /*　全体を囲うdiv　*/
  2. #container{
  3.     width:550px;
  4. }
  5. /* 画像の部分 */
  6. #pic_area{
  7.     width:210px;
  8. }
  9. /* 文章の部分 */
  10. #text_area{
  11.     width:330px;
  12.     padding-left:10px;
  13. }

これで、幅は指定出来ました。

次に画像の部分を左に、文章の部分を右に回り込ませます。CSSでのレイアウトで、良く使われる方法として、floatプロパティがあります。このプロパティにleft、つまり左を指定すると、

ボックスを左に配置、後に続く要素を右に回り込ませる。

という意味になります。
早速、pic_areaを左に配置し、後続のtext_areaを回りこませましょう！

PLAIN TEXT
CODE:
  1. /*　全体を囲うdiv　*/
  2. #container{
  3.     width:550px;
  4. }
  5. /* 画像の部分 */
  6. #pic_area{
  7.     width:210px;
  8.     float:left;
  9. }
  10. /* 文章の部分 */
  11. #text_area{
  12.     width:330px;
  13.     padding-left:10px;
  14. }

さて、うまく回り込んだでしょうか？
どうやら上手くいかないようです・・。

floatでのレイアウトでの注意点

実はこのfloatを使ったレイアウト、仕様そのものも少々複雑なのですが、
なんといってもIEに独自にバグがあり、いくつか気をつけなければ上手くいかない、コーダーを悩ませる代表的なプロパティです。

IEのfloatに関するバグは、

バグ１：
floatの後続のボックスに幅(width)が指定してある場合、floatしたボックスと、後続のボックスの間に隙間が空く。

バグ２：
後続のボックスの幅を、自動的に短く調整(?)してしまう。

例）

左のdiv50px
右のdiv80px

上の例ではIEで隙間が出来ているのが解ります。
今回floatが上手くいかなかった原因は、この隙間の分、親(container)のボックスより幅が大きくなってしまい、カラム落ち(入りきらなくなり、下に落ちる)したためです。試しにcontainerのwidthを560pxに広げてみて下さい。IEでは、段組が出来ています。

しかし、Firefoxでは下に表示されています。

これは、動作としてはFirefoxが正しく、IEは後続のボックスであるtext_areaを自動的に短く調整してしまっているため、一見上手くいったかの様に見えているだけです。バグ２ですね。

このバグを解消するため、floatを使ったレイアウトでは注意点が2つあります。

注意１：floatを指定したボックスには必ずwidthを指定する。
注意２：後続のボックスを回り込ませるためには、後続のボックスもfloatする。(そのためwidthを必ず指定する。)

これで、隙間も解消され、ブラウザ間の表示のずれもなくなります。CSSは最終的に、こうなります。

PLAIN TEXT
CODE:
  1. @charset "shift_jis";
  2.  
  3. /* 余白を初期化 */
  4. * { margin:0;    padding:0;  }
  5.  
  6. /* 基本の設定　テキストのサイズやフォントの種類を設定しておきます */ 
  7. body {
  8.     font-size:80%;
  9.     font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3" , sans-serif;
  10.     padding:20px;
  11. }
  12.    
  13. /*　全体を囲うdiv　*/
  14. #container{
  15.     width:550px;
  16. }
  17.  
  18. /* 画像の部分 */
  19. #pic_area{
  20.     width:210px;
  21.     float:left;
  22. }
  23.  
  24. /* 文章の部分 */
  25. #text_area{
  26.     width:330px;
  27.     padding-left:10px;
  28.     float:left; 
  29. }

なんとか、レイアウトが上手くいきました。
次回は、各々の要素にスタイルをつけ、いよいよ完成！です。

ページ: 1 2

トラックバックURL

コメントをどうぞ

※初回のみ、管理者の承認が必要となります。