タグ: CSS, Web制作

トップページ > サイト作成 > スタイルシート > レイアウトの設定

レイアウトの設定

幅の指定 width

幅の設定をすることができます。

width : 数値

数値には"px"や"pt"などの単位付きの数値や"%"を利用します。

高さの指定 height

高さの設定をすることができます。

height : 数値

数値には"px"や"pt"などの単位付きの数値や"%"を利用します。

余白 margin

余白の設定をすることができます。

margin : 数値

数値には"px"や"pt"などの単位付きの数値や"%"を利用します。

また、"margin-top"、"margin-bottom"、"margin-left"、"margin-right"といった形式で部分的な余白の調整も可能です。

枠と内容の間の余白 padding

枠と内容の間の余白を設定することができます。

padding : 数値

数値には"px"や"pt"などの単位付きの数値や"%"を利用します。

また、"padding-top"、"padding-bottom"、"padding-left"、"padding-right"といった形式で部分的な余白の調整も可能です。

要素の性質 display

要素の性質を設定することができます。

display : 形式

形式には

• inline ： インライン要素にする
• block ： ブロック要素にする
• none ： 要素を表示しない

で指定します。

要素の配置 position

要素の配置を設定することができます。

position : 配置場所

配置場所には

• absolute ： 絶対位置で指定
• relative ： 相対位置で指定
• static ： 配置方法を指定しない

で指定します。

回り込み float

回り込みを設定することができます。

float : 配置場所

配置場所には

• left ： 左への回り込み
• right ： 右への回り込み

で指定します。

回り込みの解除 clear

回り込みの解除を設定することができます。

clear : 解除指定

解除指定には

• left ： 左への回り込みを解除
• right ： 右への回り込みを解除

で指定します。

位置 top bottom left right

位置の設定をすることができます。
あらかじめ、「要素の配置 position」で配置方法を指定する必要があります。

top : 数値
bottom : 数値
left : 数値
right : 数値

数値には"px"や"pt"などの単位付きの数値や"%"、"auto"を利用します。

重ね順 z-index

重ね順の設定をすることができます。

z-index : 数値

数値には単位が付かない整数が入ります。
数値が大きいほど手前に表示されます。

スクロールバーを表示 overflow

スクロールバーを表示することができます。

overflow : 表示

表示には

• scroll ： スクロールバーを表示する
• visible ： 幅と高さを超えて表示する
• hidden ： 幅と高さが足りなければその分を表示しない
• auto ： ブラウザの設定に従う

で利用します。

関連記事