トリビア・ライフ - 天狼記

世の中の至る所にあるトリビア(主にPC上での物創りトリビア、生活トリビア)を発見する生活日記

カレンダー

ブログ内タグ検索

カウンター

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • CSSにおける position, floatプロパティで何にハマるのか?

HTML+CSSでホームページ作成やブログ作成で一番理解し難いのが、「position」と「float」プロパティです。Webページを見ても書いてあることは分かるのに何故か思い通りにならない。そんな理由が今日分かりました^^
まず、「position」と「float」プロパティで何故ハマるのか。それは、それぞれ使い方に制約があるからでした…。
ブログ作成(ブログランキング)
基本的なおさらいからです。なるべく簡単な言葉で書いていてポイントは赤字です。

「position」プロパティ:おさらい

・position: static; 配置方法を指定しない。つまりブラウザ依存です。
・position: relative; 配置方法を指定しない場合の位置を基準としてそこからtop: 10px、left: 20px;等のように縦・横ずらす指定方法です。
・position: absolute; 親BOXにposition: relative;が指定されている場合は、親BOXの位置を基準位置としてそこから縦・横ずらす指定方法です。
※親BOXにposition: relative;が指定されていない場合は、ウィンドウ全体の左上が基準位置となります。
・position: fixed; 基本的にposition: absolute;と同じですが、位置固定です。

「position」プロパティ:ハマること
おさらいは、他のいろんなWebページにあるのですが問題はここからです。何にハマるのか?

ずばり以下の制限があるからです。

position: absolute;またはposition: fixed;で作成したボックスは、表示はされますが、存在しないボックスとみなされます。

もっと分かりやく言うと下図のように重なります。存在しないボックスとして扱われているので自分勝手に絶対位置指定された場所に表示されるのです。まぁ、絶対位置だからそういうものですが。親ボックスの位置から計算することに集中してしまい、そもそも絶対位置指定してるということをわすれてしまいがちなのです。



ブログの記事の長さのように動的に変化する場合はpositionプロパティは使わない方がよさそうです。
これでハマりました…。floatを使いましょう。

「float」プロパティ:おさらい
・float: none; 配置方法を指定しない(初期値)
・float: left; 左寄せです。二つの要素それぞれにfloat: leftすると左から順に横にならびます。
・float: right; 右寄せです。二つの要素それぞれにfloat: rightすると右から順に横にならびます。

「float」プロパティ:ハマること
こちらもいろんなWebページがあるのでおさらいだけとしますが、何にハマるのか?

例えば3カラムでそれぞれの要素にfloat: left;としたのに回り込んでしまう。こんな経験をされた方がいると思います。解決する方法は以下の2つをチェックしてみて下さい。どちらかがNGです。

それぞれの要素にwidthが指定してあるか?
幅のサイズを計算して表示出来るサイズ内にあるか?
※ここで忘れがちなのが、marginで指定した横幅とborderで指定した横幅です。内側のBOXならpaddingで指定した横幅も計算が必要です。


意外な所に計算忘れしているので、何度も計算してみるかもしくは、px単位で指定している場合は、横幅を画像ソフトで測るのもありです。


他にもposition, floatプロパティでハマることがあったら紹介して下さい。

コメント

コメントの投稿

   管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。