Dreamweaver-パネルでcssを作成しよう!-カテゴリ「ボックス」

「Dreamweaver-パネルでcssを作成しよう」第4回目はカテゴリ「ボックス」プロパティを見直していきます。
(前回のカテゴリ「ブロック」はこちら)

width
横幅を指定します。
height
高さを指定します。
Float
配置を指定します。

left
左寄せの指定をします。またはその後に続く要素に関しては、左寄せに指定した要素の右に回り込みをするよう指定します。

right
右寄せの指定をします。またはその後に続く要素に関しては、右寄せに指定した要素の左に回り込みをするよう指定します。

none
特に何も指定しません。

clear
回り込みの解除を行います。

left
左寄せされた要素の回り込み解除を指定します。

right
右寄せされた要素の回り込み解除を指定します。

both
右又は左寄せされた全ての要素の回り込み解除を指定します。

none
回り込み解除はしません。

padding
余白の指定をします。marginはある領域とある領域の間の余白であるのに対し、paddingはひとつの領域の中での余白です。

top
上の余白を指定します

right
右の余白を指定します

bottom
下の余白を指定します

left
左の余白を指定します

margin
余白の指定をします。paddingはひとつの領域内での余白であるのに対し、marginはある領域とある領域の間の余白です。

top
上の余白を指定します

right
右の余白を指定します

bottom
下の余白を指定します

left
左の余白を指定します

img01_02

marginやpaddingはショートハンドプロパティを使用することで表示を簡潔に整理することができます。
padding: {10px 20px 30px 40px;} (左側(10px)から、上右下左)
padding: {10px 20px 40px;} (左側(10px)から、上・左右・下)

ちなみに、divなどで囲ったおおきなボックス(くくり)を、web上の画面内で
左右に対しまん中表示させる際には、
margin:0 auto; (上下は0、左右はauto)指定をします。
webサイト全体が画面の左寄せで表示されているサイトが今でもよくみられますが最近では画面センターで表示されるよう設定するのが通常です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>