ホームページ作成支援Ran.comX
 

簡単そうごリンク
■様々な配置の指定

1.表示形式を指定

display : ★;     (★はキーワード指定)


               block      (ブロックレベル要素として扱う)
               inline      (インラインレベル要素として扱う・既定)
               list-item    (リスト項目用のボックスを生成する)
               none      (表示されない)



2.表示・非表示の指定

visibility : ★;     (★はキーワード指定)


               visible     (表示・既定)
               hidden     (表示しない)


3.配置方法の指定

position : ★;     (★はキーワード指定)


               static       (特に指定しない・既定)
               relative     (通常表示されている位置から相対的)
               absolute    (親要素に対して絶対的)
               fixed       (親要素に対して絶対的・非スクロール)


4.配置位置の指定

top : ★;         (上端からの位置)
bottom : ★;      (下端からの位置)
left : ★;         (左端からの位置)
right : ★;        (右端からの位置)


               auto     (通常位置に配置・既定)
数値+単位、%でも指定できます。
その場合の数値、単位はコチラを参考にしてください。



5.回り込み指定

float : ★;     (★はキーワード指定)


               left
               right
               none

position : absolute;を指定するとfloatプロパティは無効になります。



6.回り込みの解除指定

clear : ★;     (★はキーワード指定)


               left      (左側の要素に対する回りこみを解除)
               right     (右側の要素に対する回りこみを解除)
               both     (回り込ませる側に関係なく回り込み解除)
               none     (回り込みを解除しない)


7.重ね合わせの順序の指定
画像などを貼り付けた時に、重なってしまう場合の重なりの順序指定です。

z-index : ★;     (★は整数値)

整数値とは、0を基準として数値が大きくなるほど前面に重なり、逆に数値が小さくなるほど背面にまわるというものです。

この指定は以外に面白い効果を生んだりもできる指定なのです。
例えば、DIVなどを重ねて一つのモノを作ったりもできますので、結構重要です。




8.拡大表示の指定

zoom : ★;     (★は数値、%、キーワード指定)

数値とは、本来のサイズを1として、そのサイズに対する比率を数値で指定することで、2なら2倍になり、0.5なら0.5倍になります。
また、%も本来のサイズに対しての割合で、150%なら1.5倍になります。

               normal     (本来のサイズ・既定)



9.内容があふれる場合の処理の指定
heightやwidthでのボックス領域を指定したモノに対して、テキストなどが収まりきらない時がありますが、そのような時の処理法を指定したものです。

overflow : ★;     (★はキーワード指定)

               visible    (領域指定を無視して調整し、全て表示)
               hidden    (収まりきらない場合は表示しない)
               scroll     (スクロールバーをつけて表示する)
               auto      (ブラウザ自動処理)

これに関しては、overflow-x , overflow-yという指定法(Windowsのみ)があり、xが横方向の処理、yが縦方向の処理を単独でできるようになっています。
その場合のキーワードは全て同じものを使用します。






いろいろな場面で何気に出てきているのがこの配置指定。
とにかく、幅広く使われる指定なので、記憶にとどめておいてくださいね。
覚えるとかなり使える指定なのですよ。
COPYRIGHT © 2004-2007 FREEMETHOD ALL RIGHTS RESERVED. ランキングナビ