パソコンQ&A

スタイルシートのfloat

この方法とテーブルの違い
SEO対策になる…左にメニュー、右に本文というレイアウトの場合、 テーブルだとどうしてもメニューが先に記載されますが、この方法だとメニューを後から記載でき、 本文がHTML上部に来ます。
レイアウトの変更が楽…float部分を入れ替えるだけで、左右の入れ替えができます。
転送量が減る…上手に書けばテーブルに比べてページ容量が1/3ぐらいになる場合があります。

[関連項目] floatはちゃんとclearしましょう
[関連項目] floatの親ボックスの背景を表示するには
[関連項目] floatのmarginが2倍になるときの簡単な回避方法

フロートの概念
フロートの概念1 フロートの概念2 フロートの概念3

ページを2カラムにする方法
HTML

<div id="place1">
〜〜〜〜〜
</div>
<div id="place2">
〜〜〜〜〜
</div>
<div class="clear"><br /></div>


空divはあまりよくないので<br />を入れて、スタイルシートで隠します。

スタイルシート

#place1{
  float:left;/*左に寄せます*/
  width:400px;/*floatを使うときは必ず幅を指定します*/
}
#place2{
  float:right;/*右に寄せます*/
  width:400px;
}
.clear {
  clear: both;/*floatの影響をクリアします*/
  font-size: 0;/*以下は<br />を隠します*/
  line-height: 0;
  height: 0px;
  visibility: hidden;
}


ページを3カラムにする方法
これは上の2カラムにする方法を応用するとできます。
2カラムの中に2カラムを作るイメージです。
HTML

<div id="bplace1">
<div id="place1">
〜〜〜〜〜
</div>
<div id="place2">
〜〜〜〜〜
</div>
<div class="clear"><br /></div>
</div>
<div id="bplace2">
〜〜〜〜〜
</div>
<div class="clear"><br /></div>


スタイルシート

#place1{
  float:left;
  width:200px;
}
#place2{
  float:right;
  width:400px;
}
#bplace1{
  float:left;
  width:600px;
}
#bplace2{
  float:right;
  width:200px;
}
.clear {
  clear: both;
  font-size: 0;
  line-height: 0;
  height: 0px;
  visibility: hidden;
}


height:100%;として領域の下を揃えるには…
[関連項目] テーブルで高さ100%にできない

height:〜〜%;の正しい仕様[CSS2の仕様書]
包含ブロックの高さに対する割合を指定する。 包含ブロックの高さが明示されておらず、内容領域の高さに依存していれば、'auto'として解釈する。

とあります。
つまり領域(子領域)を縦いっぱいにしようとするには、その外側の領域(親領域)のheightが指定されていないとできません。
また親領域height:auto;であった場合には、子領域をheight:100%;と指定してもheight:auto;と解釈されます。

対応策としては親領域のheightをauto以外の%なりpxなりで指定します。

またこれと同じ問題でbody内に<div style="height:100%;">〜〜</div>を子領域としてではなく単体で指定した場合、DOCTYPE宣言によって解釈が変わります。(表示が変わります。)
(正確にはこの場合、divはbodyの子領域ですが)
DOCTYPE宣言について
互換モードであれば、ブラウザの表示面を親要素の高さであると拡大解釈しするため、div要素の高さは下まで広がります。
標準準拠モードではheight:auto;と解釈されます。

ではこの対策は…
ルート要素の包含ブロック(これを初期包含ブロックと呼ぶ)はUAが定める。[CSS2の仕様書]

とあります。

html,body{
  height: 100%;
}


つまりdivの親要素はbody、bodyの親要素はhtmlということで、htmlとbodyの両方を100%と指定するのです。


背景色を偽装して下揃えになっているように見せる方法

あいうえお





[ソース]

<div style="width: 80%;">
  <div style="width: 50%;background-color: #999;"><br />
    <div style="width: 50%;float: left;">あいうえお</div><br />
    <div style="margin-left: 50%;background-color: #ccc;">あ<br>い<br>う<br>え<br>お</div>
  </div><br />
</div>


[関連項目]floatはちゃんとclearしましょう

△上に戻る

このページはリンクフリーです。設定などは自己責任で…
Copy Right kikky

kikky.net