CSSでのWebデザイン

CSSレイアウト(float)

floatを使って、コンテンツを横に並べることは可能にする。

対象IDのコンテンツを左に寄せる。

#leftitem { float: left; }

対象IDのコンテンツを右に寄せる。

#rightitem { float: right; }

floatを設定した後、後続のコンテンツは通常配置にしたい場合、フロートの解除は必要。
注意:clearが設定したコンテンツはmargin-topが利かないので、上段のコンテンツのmargin-bottomで対応

#normalitem { clear: both; }

CSSレイアウト(postion)

postionを使って、自由に画面上に要素を配置することは可能になる。

座標を指定して、表示位置を決める。ウィンドウの右上に配置する場合:

#positem {
    position: absolute;
    right: 0;
    left: 0;
}

重なり順を指定したい場合、z-indexを指定する。

#positem {
    position: absolute;
    right: 0;
    left: 0;
    z-index: -1; /*後ろに配置*/
}

基準ボックスを指定して、配置の基準位置はウィンドウではなくて、親要素に変更する。

#parentitem {
    position: relative;
}

値fixedを使って、要素を固定配置できる。要素を左下に固定する場合:

#fixeditem {
    position: fixed;
    left: 0;
    bottom: 0;
}
>> CSS - CSS要素一覧

top



mail to me:mailaddress
Copyright(c) 2018 zcm.