CSSリファレンス・外観

すべてのプロパティは入ってません。テンプレートを利用するという前提でのリファレンスなのでかなり限られたものになっています。 詳しく知りたい方はCSSリファレンスというキーワードで検索すると詳しいサイトが探せます。


また実際の書き方はテンプレートで見ていただくとよりわかりやすいと思います。表で使われている「デフォルト」とは初期設定のことです。

CSSで使われる単位

%(パーセント)

どの割合に対してかは使われるプロパティによって変わる

em

フォントサイズを1とした場合の相対値

ex

小文字の高さを1とした場合の相対値

px

ピクセル、画面の画素1つを1とする。

pt

ポイント、もともと印刷等の単位、1/72インチ

pc

パイカ、12ポイント

in

インチ、2.54cm

mm

ミリメートル

cm

センチメートル

ブロック要素関連のプロパティ・サイズ

width

コンテンツの横幅を指定します。

height

コンテンツの高さを指定します。

ブロック要素関連のプロパティ・余白

margin

コンテンツ外側の余白を指定します。

margin   4辺一括で指定します。一括で指定することをショートハンドと言います。

個別で指定する時は以下の通り。


margin-top 上

margin-right 右

margin-bottom 下

margin-left 左


上下と左右が同じサイズの時は、まとめて書くこともできます。その場合前のほうが上下、後ろのほうが左右です。


(例)margin:10px 20px;   この例の場合上下が10px、左右が20pxということです。


また上下とは別に、左右だけまとめて書くこともできます。その場合上、左右、下の3つが並びます。


(例)margin:10px 20px 5px;   この例の場合上が10px、左右が20px、下が5pxということです。

padding

コンテンツ内側の余白を指定します。

padding   4辺一括で指定します。個別で指定する時は以下の通り。


padding-top 上

padding-right 右

padding-bottom 下

padding-left 左


また上下と左右が同じサイズの時は、まとめて書くこともできます。その場合前のほうが上下、後ろのほうが左右です。


(例)padding:10px 20px;   この例の場合上下が10px、左右が20pxということです。

TOP 

ブロック要素関連のプロパティ・枠線

border   4辺一括で指定します。個別で指定する時は以下の通り。


border-top 上

border-right 右

border-bottom 下

border-left 左

borderはプロパティをまとめて指定することができます。


(記述例)border: 30px solid #333333;

width

線の幅を設定します。色々な単位の指定でも出来ますが、以下のような指定もできます。

  • thin   細い
  • medium 標準
  • thick  太い

(記述例)border-width: 30px;

style

枠線のスタイルを設定します。以下のようなスタイルがあります。

  • none ボーダーなし
  • dotted 点線
  • dashed 破線
  • solid 実線
  • double 2本線
  • groove 立体的にくぼんだ線
  • ridge 立体的に盛り上がった線
  • inset 陥没
  • outset 浮上

(記述例)border-style: solid;

color

枠線の色を指定します。

(記述例)border-color: #333333;

TOP 

ビジュアル関係のプロパティ

display

どのような見た目、表示にするかの設定です。

  • block   ブロック要素
  • inline インライン要素
  • list-item  リスト要素
  • none  非表示

(記述例)display: block;

position

各要素をどのように配置するかです。通常top、left等の位置指定といっしょに設定します。

  • static 通常通り
  • relative 通常位置からの相対配置
  • absolute 絶対配置
  • fix 固定配置(スクロールしても位置が固定したまま。)

(記述例)position: relative;

top

right

bottom

left

位置のオフセット(始点からの距離)の設定に使います。

(記述例)top: 30px;

float

指定の位置に画像などを寄せます。rightやleftを指定するとあとに続くボックス、テキストが横の位置に回り込みます。

  • left 左寄せ
  • right 右寄せ
  • none なし

(記述例)flost: left;

clear

floatで指定した回り込みを解除します。

  • left 左寄せ解除
  • right 右寄せ解除
  • both 左寄せ右寄せ両方の解除
  • none なし

(記述例)clear: both;

z-index

ボックスを3次元的に重ねていきます。数字が大きいものほど手前に表示されます。

(記述例)z-index: 1;

overflow

コンテンツがボックスに収まりきらないときの処理です。

  • visible ボックスを押し広げてすべて表示、デフォルトです
  • hidden はみ出た部分は表示しない
  • scroll スクロールバーが付く
  • auto ブラウザ毎の自動処理

(記述例)overflow: auto;

visibility

コンテンツの可視、不可視

  • visible 可視
  • hidden 不可視

(記述例)visibility: hidden;

TOP 

背景関連のプロパティ

backgroundは背景系の指定に使います。プロパティをまとめて指定することができます。


(記述例)background: #333333 url("sample.gif") repeat scroll;

color

背景の色を指定します。

  • RGB値
  • キーワード
  • transparent 透過

(記述例)background-color: #333333;

image

背景画像をurlで指定します。

(記述例)background-image: url("../image/sample.gif");

repeat

背景画像のリピートの指定です。

  • repeat Y軸X軸両方向へリピート、デフォルト
  • repeat-y Y軸方向へリピート
  • repeat-x X軸方向へリピート
  • no-repeat リピートなし

(記述例)background-repeat: repeat-y;

attachment

背景画像の設置の仕方

  • scroll スクロールすると背景画像もスクロール、デフォルト
  • fixed スクロールしても背景画像は固定

(記述例)background-attachment: fixed;

position

背景画像のもとのボックスに対する位置指定

  • top 上端に設置
  • center 中央に設置
  • bottom 下端に設置
  • left 左に設置
  • center 中央に設置
  • right 右に設置
  • ピクセル単位やパーセントで指定も可能、X軸、Y軸の順

(記述例)background-position: top;

TOP 

リスト関連のプロパティ

list-styleはリストの外観の指定に使います。プロパティをまとめて指定することができます。


(記述例)list-style: square inside;

type

先頭に付くマーカーの指定。

  • disc 黒ドット、デフォルト
  • circle 白抜きドット
  • square 四角
  • decima 数字
  • lower-roman ローマ数字小文字
  • upper-roman ローマ数字大文字
  • lower-alpha ローマ字小文字
  • upper-alpha ローマ字大文字
  • none なし

(記述例)list-style-type: circle;

image

マーカーに画像を使うときの指定。

(記述例)list-style-image: url("../image/sample.gif");

position

マーカーを置く位置の指定。

  • outside 文字列の外側に置く、デフォルト
  • inside 文字列の内側に置く

(記述例)list-style-position: inside;

TOP 

テーブル関連のプロパティ

csption-side

caption(そのテーブルの説明書き)の表示位置を設定します。

  • top 上
  • right 右
  • bottom 下
  • left 左

(記述例)csption-side: bottom;

layout

テーブルのレイアウトに関する設定。

  • auto 自動
  • fixed 固定、内容にかかわらず横幅を固定します

(記述例)table-layout: fixed;

border-collapse

テーブルの各セルの枠線を重ねて表示するか離して表示するかです。

  • collapse 重ねて表示
  • separate 離して表示、こちらがデフォルトのブラウザが多いようです

(記述例)border-collapse: collapse;

border-spacing

separateを設定した場合の隣のセルとの間隔を設定します。

(記述例)border-spacing: 2px;

縦横別に指定する場合は次のように記述します。

(記述例)border-spacing: 2px 5px; 

この場合縦が2px横が5pxです。

TOP