Web Survive

Webで生きる道を模索するブログ

プロパティについて

スタイルの種類、つまりどのような効果を与えるかが「プロパティ」であり、
効果の具体的な内容や程度を「値」としてセットで指定します。

以下、特に使用頻度の高いプロパティを解説します。

ボックスモデルのプロパティ

HTMLの要素はそれぞれ自分の領域をもっています。
領域は丸でも三角でもなく「四角形」と決まっていて、
この四角形の領域のことを「ボックス」といいます。
ボックスはさらに次の4つの領域によって構成されます。

css-property-box-model

このような仕組みを「ボックスモデル」といい、
CSSでページの見た目を決めていくうえで、もっとも大切な考え方です。
ボックスモデルに関係するのは次のようなプロパティです。

プロパティ

効果

指定できる値

初期値

適用できる要素

margin

マージンの一括指定

長さ、%,、auto

0

すべての要素(表面部要素を除く)

margin-top,margin-right,margin-bottom,margin-left

上下左右のマージン

長さ、%,、auto

0

 すべての要素(表面部要素を除く)

border

 ボーダーの一括指定

太さ、形状、色をスペース区切りで、

各プロパティを参照

すべての要素

 border-width  ボーダーの太さ  長さ、thin,medium,thick

medium

すべての要素
 border-style

ボーダーの形状

 solid,dotted,dashed,noneなど

none

すべての要素

border-color

ボーダーの色

#rrggbb, #rgb,カラー名、transparentなど

colorプロパティの値

すべての要素

border-top,border-right,border-bottom,border-left

上下左右ボーダー

太さ、形状、色をスペース区切りで

各プロパティを参照

すべての要素

padding

パディングの一括指定

長さ、%

0

すべての要素(表面部要素を除く。th・td要素は可)

padding-top,padding-right,padding-bottom,padding-left

上下左右パディング

長さ、%

0

すべての要素(表面部要素を除く。th・td要素は可)

width

内容の幅

長さ、%,、auto

auto

すべての要素(非置換インライン要素、表の行要素と行グループ化要素を除く)

height

内容の高さ

長さ、%,、auto

auto

すべての要素(非置換インライン要素、表の行要素と行グループ化要素を除く)

max-width,max-height

内容の最大幅と最大高さ

長さ、%,、none

none

width/heightプロパティを参照

min-width,min-height

内容の最小幅と最小高さ

長さ、%

0

width/heightプロパティを参照

margin/paddingプロパティ

css-property-box-model-image

マージンとパディングは、marginプロパティとpaddingプロパティで指定します。
どちらも値の数によって
上下左右のどこに適用されるかが次のように変わってきます。

頭の中でよく整理しながら指定しましょう。

・値が1つ・・・「上下左右」
・値が2つ・・・「上下」「左右」
・値が3つ・・・「上」「左右」「下」
・値が4つ・・・「上」「右」「下」「左」

たとえば「mragin:5px 10px 8px」という指定は3つなので、
上から5px、左右が10px、下が8pxのマージンとなります。
「padding:1em 2em 1.5em 1.8em」という指定は値が4つなので、
上が1em、右が2em、下が1.5em、左が1.8emのパディングとなります。

マージン、パディングとも、
上下左右(-top、-right,、-bottom、-left)の4辺に分割し、
別々の値を設定することもできます。

たとえば「margin-top:5px」「padding-left:10px」と指定します。

要素間のマージンの相殺

要素間のマージンについて、
上下は相殺(大きいほうの値が適用されますが、左右は相殺されない、という決まりがあります。)

borderプロパティ

ボーダーはborderプロパティで指定します。
値には「太さ」「形状」「色」をスペース区切りで指定します
(たとえば「1px solid #ff6600」と指定)。
太さには「thin」「medium」「thick」という細・中・太の3段階の値のほか、
任意の太さが指定できます。
形状にはいろいろありますが、
一重線の「solid」、点線の「dotted」、破線の「dashed」
二重線の「double」がよく使われます。

太さ・形状・色(-width、-style、-color)を別々に指定したり、
上下左右(-top、-right、-bottom、-left)の4辺に分割し、
別々の値を設定することもできます。
たとえば「border-bottom:2px dashed #cc0000」と指定します。

width/heightプロパティ

内容の幅はwidthで、高さはheightプロパティで指定します。
あくまで内容の幅と高さであって、
マージン、ボーダー、パディングは含まれない点に注意
してください。

視覚整形モデルのプロパティ

それぞれの要素が生成したボックスを、
どのように表示したり配置するのかを決めるしくみを
「視覚整形モデル」といいます。
次のようなプロパティが利用できます。

displayプロパティ

生成するボックスの種類を指定します。
「block」「inline」「list-item」「none」などの値が指定できます。
通常、ブロックレベルとして生成されるボックス(たとえばli要素)に
「inline」と指定してインライン化したり、
逆にインラインとして生成されるボックス(たとえばa要素)に
「block」と指定してブロックレベル化する、といった目的で利用します。

displayプロパティの使いどころ

css-property-display

positionプロパティ

ボックスの配置方法を指定します。
相対配置、絶対配置、固定配置を意味する
「relative」「absolute」「fixed」や、
元の位置(通常配置)に戻すための「static」という値が指定できます。

top、right、bottom、leftプロパティで細かく位置決めでき、
さらにボックスの重なり順序をz-indexプロパティで指定できます。

positionプロパティで「relative」と指定した場合、
要素本来の位置が基準となって配置されるのに対し、
「absolute」では親ボックスの位置が基準となる
(「fixed」ではさらにスクロールに対して固定的に配置される)点に注意してください。

配置方法(positionプロパティ)

css-property-position

なお、「absolute」の基準位置となる親ボックスは、
positionプロパティで「relative」などの値が指定され、
配置方法が決められていなければなりません。
もし配置方法が決まっている場合には、
さらに先祖要素にさかのぼります。
それでも配置方法が決まっている要素が存在しない場合には、
最終的にbody要素が基準位置となることに注意してください。

位置決めと重なり順序

css-property-position-location

flortプロパティ

ボックスを左右にシフトさせることを「フロート」といいます。
floatプロパティでは「left」「right」などの値が指定できます。
画像を左や右に配置し、テキストを回り込ませるのが代表的な使い方です。

フロートの解除(クリア)にはclearプロパティを利用し、
「left」「right」「both」という解除方向を値として指定します。

実務的には、マルチカラム(段組み)レイアウトを実現するために、
これらのプロパティがよく使われます。
メイン部分を左に、サイド部分を右にフロートさせ、
後続の内容をクリアさせる、といった使い方です。

フロート(floatプロパティ)

css-property-float

マルチカラム(段組み)レイアウトにフロートを利用

css-property-float-layout

なお、ボックスのなかにフロートした要素しかない場合、
ボックスの高さが自動的に縮みます、

そのため、ボックスの背景色を指定している場合は特に、
高さが不足しているような印象を受ける点に注意していください

line-heightプロパティ

行の高さを指定します。「%」「em」「pt」など
さまざまな単位が利用できますが、「%」と「em」は継承
(先祖要素からの計算値の引き継ぎ)の問題が、
「pt」は継承に加えて、フォントサイズとの兼ね合い
(フォントを大きくした場合にテキストの重なりが発生)の問題がありますので、
「1」や「1.5」といった実数で指定しておく方法がよく使われます。

先祖要素

ある要素を包含している要素を総称して「先祖要素」と呼びます。

行の高さ(line-heightプロパティ)

css-property-line-height

vertical-alignプロパティ

行のなかのテキストや画像の上下位置や、テーブルセルの内容の上下位置を指定します、
「baseline」「top」「middle」「bottom」などの値が指定できます。

vertical-alignプロパティの代表的な値

css-property-vertical-align

視覚整形モデルのプロパティ

プロパティ

効果

指定できる値

初期値

適用できる要素

display

ボックスの種類

inline、block、list-item、noneなど

inline

すべての要素

position

ボックスの配置方法

static、relative、absolute、fixed

static

すべての要素

top

right

bottom

left

ボックスの上下左右からの位置指定

長さ、%、auto

auto

配置が決められている要素(positionプロパティの値が「static」以外の要素)

z-index

ボックスの重なり順序

整数、auto

auto

配置が決められている要素(positionプロパティの値が「static」以外の要素)

float

ボックスのフロート

left、right、none

none

すべての要素

clear

フロートのクリア

left、right、both、none

none

ブロックレベル要素

line-height

行の高さ

normal、実数、長さ、%

normal

すべての要素

vertical-align

行内やセル内での上下位置

baseline、top、middle、bottomなど

baseline

インライン要素、th・td要素

視覚効果のプロパティ

visibilityプロパティ

ボックスの可視・不可視を指定します。
「visible」が可視、「hidden」が不可視の値です。

displayプロパティで「none」と指定した場合は「非表示化」であり、
ボックスは生成されませんが、
visibilityプロパティで「hidden」と指定した場合は「不可視化」であり、
ボックスが生成されたうえで内容が見えない状態になる、という違いに注意してください。

「display:none」と「visibility:hidden」の違い

css-property-visibility

oberflowプロパティ

ボックスの切り抜き方法
(内容がボックスからはみ出す場合の表示方法)を指定します。

「visible」「hidden」「scroll」などの値が指定できます。
ブラウザに任せる場合は「auto」という値を指定します。

ボックスの切り抜き(overflowプロパティ)

css-property-overflow

視覚効果のプロパティ

プロパティ

効果

指定できる値

初期値

適用できる要素

visibility

ボックスの可視・不可視

visible、hidden、collapse

visible

すべての要素

overflow

ボックスの切り抜き方法

visible、hidden、scroll、auto

visible

ブロックレベル要素、th・td要素など

文字色・背景のプロパティ

colorプロパティ

文字色をRGB値やカラー名で指定します。
次に解説する「背景」とのコントラストが保たれていないと、
テキストが読みにくくなる点に注意してください。

背景のプロパティ

背景色と背景画像の関係

css-property-background

背景を指定するには、さまざまなプロパティがあります。
背景色はbackground-colorプロパティ、
背景画像にはbackground-imageプロパティで指定します、
さらに、背景画像の繰り返し方法をbackground-repeatプロパティ、
開始位置をbackground-positionプロパティ、
スクロールに対する移動・固定をbackground-attachmentプロパティで指定できます。
また、これらのプロパティを一括指定するために、
backgroundという「ショートハンドプロパティ」を利用し、
値をスペース区切り・順不同で指定することもできます。

ショートハンドでの記述例

css-property-shorthand

背景はボーダー領域まで塗られますが、
マージン領域には塗られない点に注意してください。
また、背景色が下、背景画像が上という構造も理解しておきましょう。

背景画像が表示されない環境(ブラウザで画像読み込みをオフに設定しているなど)や、
背景画像のうち透過処理されている部分では、下にある背景色が表示されます。

文字色・背景のプロパティ

プロパティ

効果

指定できる値

初期値

適用できる要素

color

文字色

#rrggbb、#rgb、カラー名など

ブラウザに依存

すべての要素

backgroud-color

背景色

#rrggbb、#rgb、カラー名、transparentなど

transparent

すべての要素

backgroud-image

背景画像

url(…)、none

none

すべての要素

backgroud-repeat

背景画像の繰り返し方法

repeat、repeat-x、repeat-y、no-repeat

repeat

すべての要素

backgroud-attachment

背景画像の移動・固定

scroll、fixed

scroll

すべての要素

backgroud-position

背景画像の開始位置

left、right、center、top、bottom、%、長さ

0% 0%

すべての要素

backgroud

背景の一括指定

各プロパティの値をスペース区切りで

各プロパティを参照

すべての要素

フォント・テキストのプロパティ

フォントのプロパティ

フォントの種類を指定するfont-family
斜体や通常体などを指定するfont-style
太さを指定するfont-weight
大きさを指定するfont-sizeプロパティなどがあります。

フォントのプロパティ

css-property-font

font-familyプロパティは、
フォント名をカンマ区切りで複数指定できます。
その際は、最後に総称ファミリーである
「serif」「sans-serif」「cursive」「fantasy」「monospace」
いずれかを指定しておくことが推奨されています。

一般的には、明朝体を指定している場合は「serif」、
ゴシック体を指定している場合は「sans-serif」を最後に指定しておきます。

総称ファミリー

総称ファミリーとはフォントのおおまかな系統のことです。
serif(明朝体)、sans-serif(ゴシック体)、cursive(筆記体・草書体)、
fantasy(装飾フォント)、monospace(等幅フォント)の5つがCSS仕様で定義されています。

フォント・テキストのプロパティ

プロパティ

効果

指定できる値

初期値

適用できる要素

font-family

フォントの種類

フォント名をカンマ区切りで複数指定

ブラウザに依存

すべての要素

font-style

フォントのスタイル

normal、italic、oblique

normal

すべての要素

font-weight

フォントの太さ

normal、boldなど

normal

すべての要素

font-size

フォントの大きさ

長さ、%,

mediumなどのキーワード

medium

すべての要素

font

フォントの一括指定

各プロパティの値をスペース区切りで

各プロパティを参照

すべての要素

text-indent

テキストの行頭の字下げ幅

長さ、%

0

ブロックレベル要素、th・td要素など

text-align

テキストの行揃え

left、right、center、justify

テキストの表記方向に依存

ブロックレベル要素、th・td要素など

text-decoration

テキストの装飾

underline、line-through、noneなど

none

すべての要素

text-transform

テキストの大文字・小文字の変換

capitalize、uppercase、lowercase、none

none

すべての要素

 letter-spacing  テキストの文字間隔

normal、長さ

normal

すべての要素

 word-spacing

テキストの単語間隔

normal、長さ

normal

すべての要素

 

font-sizeプロパティでは、
「1.2em」「120%」などの長さやパーセンテージのほか、
「xx-small」「x-small」「medium」「x-large」「xx-large」という
7段階のキーワードが指定できます。

なお、フォントに関するプロパティとline-heightプロパティを一括指定するために、
fontというショートハンドプロパティが利用できますが、
必須の値と任意の値の区別や指定順序がややこしい、
省略した値は初期値に戻される、
どの値が何のプロパティの値なのか一見してわかりにくい、といった
「とっつきにくさ」や「使いにくさ」があります。
したがって、fontプロパティは使わず、
個別のプロパティをひとつひとつ指定していくのが一般的です。

テキストのプロパティ

テキストの行頭(1行目の先頭)の字下げ幅を指定するtext-indent
行揃えを指定するtext-align
下線などの装飾を指定するtext-decorationm
大文字と小文字の変換を指定するtext-transform
文字間隔を指定するletter-spacing
単語間隔を指定するword-spacingプロパティなどがあります。

テキストのプロパティ

css-property-text

フォントとテキスト

スタイルを適用するとき、
プロパティが「フォント」に関するのか「テキスト」に関するのか
判断に迷うことがあるでしょう。
フォントはひとつひとつの文字(字体)を、
テキストは複数の文字のかたまりを指す点に違いがあります。
「字」と「文」の違いと考えておけばよいでしょう。

リストのプロパティ

リストの先頭に表示するマーカーの種類を指定するlist-style-type
マーカー画像を指定するlist-style-image
マーカーの位置を指定するlist-style-positionプロパティがあります。
また、これらを一括指定するためのlist-styleというショートハンドプロパティが利用できます。

表のプロパティ

表(テーブル)のキャプション位置を指定するcaption-side
表のレイアウト方法を指定するtable-layout
表のボーダーの表示方法を指定するborder-collapse
表ボーダー同士の間隔を指定するborder-spacing
空競るの表示方法を指定するempty-cellsプロパティがあります。

表のプロパティ

プロパティ

効果

指定できる値

初期値

適用できる要素

caption-side

表のキャプション位置

top、bottom

top

caption要素

table-layout

表のレイアウト方法

auto、fixed

auto

table要素など

border-collapse

表ボーダーの表示方法

collapse、separate

sparate

table要素など

border-spacing

表ボーダー同士の間隔

長さ

0

table要素など

empty-cells

空セルの表示方法

show、hide

show

th・td要素

その他のプロパティ

ユーザーインターフェイスのプロパティ

マウスカーソルの種類を指定するcursor
フォーカス時のアウトラインを指定するoutlineプロパティなどがあります。

contetプロパティ

生成する内容を指定するプロパティです。
before/after疑似要素とともに利用します

その他のプロパティ

プロパティ

効果

指定できる値

初期値

適用できる要素

cursor

マウスカーソル

auto、pointer、waitなど

auto

すべての要素

outline-width

アウトラインの太さ

長さ、thin、medium、thick

medium

すべての要素

outline-style

アウトラインの形状

solid、dotted、dashed、noneなど

none

すべての要素

outline-color

アウトラインの色

invert、#rrggbb、#rgb、カラー名など

invert

すべての要素

outline

アウトラインの一括指定

太さ、形状、色をスペース区切りで

各プロパティを参照

すべての要素

content

生成する内容

none、normal、文字列、url(…)など

normal

:before/:after疑似要素