頻繁に使用する（かもしれない）プロパティまとめ・その1

使用率が高い（かもしれない）プロパティについて、以下にまとめる。

width,height - 幅、高さを指定する

任意の要素の幅、および高さを指定することができる。

数値（＋単位）	指定した数値分の幅（高さ）を確保する。 指定できる単位はこちら
auto	自動で幅（高さ）を確保する。（デフォルト値）

• hr要素に適用すると、線の太さを指定することができる。
  「background-color」と組み合わせることで、画像を使った罫線を引くこともできる。

text-align - 文字の水平位置を指定する

範囲指定した特定の文字列の水平位置を指定することができる。

left	左に揃える
center	中央に揃える
right	右に揃える
justify	両端で揃える

• hr要素に適用すると、水平線を右寄せ、左寄せに指定できる。
• ブラウザによって反映されない場合がある。

margin - 要素の外側の余白をまとめて設定する

• margin:1 2 3 4;と半角スペースを空けて4つ設定すると、「上」「右」「下」「左」の順に反映される。
• margin:1 2 3;と半角スペースを空けて3つ設定すると、「上」「左右」「下」の順に反映される。
• margin:1 2;と半角スペースを空けて2つ設定すると、「上下」「左右」の順に反映される。
• margin:100;と1つ設定すると、「上」「右」「下」「左」すべての方向に同じ値が適用される。
• 「margin-top」「margin-right」「margin-bottom」「margin-left」を使用し、
  「上」「右」「下」「左」それぞれ個別に指定することもできる

数値（＋記号）	指定した数値分の余白を確保する。 指定できる単位はこちら
auto	自動で設定する（デフォルト）

padding - 要素内の余白をまとめて設定する

• padding:1 2 3 4;と半角スペースを空けて4つ設定すると、「上」「右」「下」「左」の順に反映される。
• padding:1 2 3;と半角スペースを空けて3つ設定すると、「上」「左右」「下」の順に反映される。
• padding:1 2;と半角スペースを空けて2つ設定すると、「上下」「左右」の順に反映される。
• padding:100;と1つ設定すると、「上」「右」「下」「左」すべての方向に同じ値が適用される。
• 「padding-top」「padding-right」「padding-bottom」「padding-left」を使用し、
  「上」「右」「下」「左」それぞれ個別に指定することもできる

数値（＋記号）	指定した数値分の余白を確保する。 指定できる単位はこちら
auto	自動で設定する（デフォルト）

border - 要素の境界線をまとめて設定する

• border:1px solid #FFFFFF;と半角スペースを空けて「線の太さ」「形状」「色」を指定する。
  この場合はすべての方向において同一の設定が適用される。
• 「border-top」「border-right」「border-bottom」「border-left」を使用し、
  「上」「右」「下」「左」それぞれ個別に指定することもできる

線の太さ	指定した数値分の太さを確保する。 指定できる単位はこちら
形状	次の種類がある。実際に試した例はこちら solid - 通常線 dashed - 破線 dotted - 点線 double - 二重線 inset,outset,groove,ridge - 立体線
色	水平線を指定した色にする。 指定するための形式はこちら

border-**** - 要素の境界線を個別に設定する

• border-****:hoge piyo fuga funya;と半角スペースを空けて4つ設定すると、「上」「右」「下」「左」の順に反映される。
• border-****:hoge piyo funya;と半角スペースを空けて3つ設定すると、「上」「左右」「下」の順に反映される。
• border-****:hoge piyo;と半角スペースを空けて2つ設定すると、「上下」「左右」の順に反映される。
• border-****:hoge;と1つ設定すると、「上」「右」「下」「左」すべての方向に同じ値が適用される。

線の太さ	指定した数値分の太さを確保する。 指定できる単位はこちら
形状	次の種類がある。実際に試した例はこちら solid - 通常線 dashed - 破線 dotted - 点線 double - 二重線 inset,outset,groove,ridge - 立体線
色	水平線を指定した色にする。 指定するための形式はこちら

padding・marginとコンテンツの幅と高さ

• コンテンツの幅＝[margin-left・right]+[padding-left・right]＋[border]
• コンテンツの高さ＝[margin-top・bottom]+[padding-top・bottom]＋[border]

コンテンツの中央寄せ

ある任意の要素をブラウザの中央に寄せるに当たり、CSSでは各要素に「margin:auto」をつけることを推奨している。

しかしIEはバグのため、上記方法ではブラウザ上で中央に寄ったことを確認できない。
そこで次の対処が必要になる。（本来text-alignはインライン要素に対してつけるため、推奨しない方法である）

• ページ全体に対して中央に寄せたい場合は、body要素に「text-align:center」を追加する
• 一部分だけ中央に寄せたい場合は、一旦div等で囲った上で、囲ったdiv要素に「text-align:center」を追加する

IE・FireFoxで同じように中央寄せのページを作りたい場合は、暫定として上記の2つを同時に施せば良い。

• 「中央寄せに関するIEのバグと対処方法」について、参考サイトを見つけました。
  CSS:IEでの中央寄せ、margin”auto”が効かない件（Web Artisan Blog - ウェブ アルチザン ブログ）

(c) 2011 laughsketch.com / confeito7