ウェブデザインとWordpress

position：配置指定

プロパティ

position

値

キーワード(下記参照)

static | relative | absolute | fixed

対象

すべての要素

継承の有無

なし

static | 静的（デフォルト）

relative | 相対配置（続くボックスに影響あり）

absolute | 絶対配置（続くボックスに影響を与えない）

fixed | 固定

カテゴリ:CSSプロパティ一覧 | Page Top

display：表示形式

displayプロパティは、各要素の表示形式を指定します。非表示にする、ブロック要素に変換する、インライン要素に変換するといった指定ができます。

プロパティ

display

値

キーワード(下記参照)

inline（インライン要素にする）

block（ブロック要素にする）

list-item（リスト要素のli要素にする ）

none（非表示）

対象

すべての要素

継承の有無

なし

カテゴリ:CSSプロパティ一覧 | Page Top

border：線の指定

borderプロパティは、ボックスの上下左右のボーダー領域をコントロールします。指定できるのは線の太さ、線の種類、線の色。ボーダー領域については、下記サンプル図を参照。

一括指定

border

border-top

border-bottom

border-right

border-left

個別指定/線の太さ

border-width

border-top-width

border-bottom-width

border-right-width

border-left-width

個別指定/線の色

border-color

border-top-color

border-bottom-color

border-right-color

border-left-color

個別指定/線の種類

border-style

border-top-style

border-bottom-style

border-right-style

border-left-style

値 / 線の太さ

長さの単位 “px” が一般的

thin（細め）

medium（標準）

thick（太い）

値 / 線の種類

none（なし）

hidden（なし）

dotted（点線）

dashed（破線）

solid（実線）

double（二重線）

groove（窪み）

ridge（隆起）

inset（内側に窪み）

outset（外側に窪み）

値 / 線の色

RGB値、カラーネーム

transparent（透過）

対象

すべての要素

継承の有無

なし

ポイント

標準準拠モードでは、borderはwidthに含まない。

transparentは古いタイプのブラウザでは一部未対応。

border-styleサンプル

dotted

dashed

solid

double

groove

ridge

inset

outset

カテゴリ:CSSプロパティ一覧 | Page Top

padding：余白指定

paddingプロパティは、ボックスの上下左右のパディング領域（borderより内側の余白）をコントロールします。背景画像とテキストの配置、リンク領域の指定等でも使用します。パディング領域については、下記サンプル図を参照。

プロパティ

padding

padding-top

padding-bottom

padding-right

padding-left

値

単位

対象

すべての要素

継承の有無

なし

ポイント

標準準拠モードではpaadingはwidthに含まない

padding一括指定と指定場所

padding: 10px 20px 30px 40px;
上 10px,  右20px,  下 30px,  左 40px
--------------------------------------

padding: 10px 20px 30px;
上 10px,  左右 20px,  下 30px
--------------------------------------

padding: 10px 20px;
上下 10px,  左右 20px
--------------------------------------

padding: 10px;
上下左右 10px

カテゴリ:CSSプロパティ一覧 | Page Top

margin：余白指定

marginプロパティは、ボックスの上下左右のマージン領域（一番外側の余白）をコントロールします。また、”margin-right”"margin-left”の値に”auto”を指定する事でボックスを中央に寄せます。（一部ブラウザではbodyに”text-align:center;”を指定しなければならない。）マージン領域については、下記サンプル図を参照。

プロパティ

margin

margin-top

margin-bottom

margin-right

margin-left

値

単位

対象

すべての要素

継承の有無

なし

ポイント

float指定と併用する際、float指定側にmarginを取るとIEで余分な余白が生じる。

margn一括指定と指定場所

margin: 10px 20px 30px 40px;
上 10px,  右20px,  下 30px,  左 40px
--------------------------------------

margin: 10px 20px 30px;
上 10px,  左右 20px,  下 30px
--------------------------------------

margin: 10px 20px;
上下 10px,  左右 20px
--------------------------------------

margin: 10px;
上下左右 10px

カテゴリ:CSSプロパティ一覧 | Page Top

text-transform：大文字小文字(英単語)

text-transformプロパティはアルファベットの小文字を大文字に、大文字を小文字に変換表示します。音声ブラウザなどアクセシビリティを考慮する際は、text-transformを指定しましょう。

音声ブラウザは英単語が大文字の場合、文字を一文字ずつ読み上げます。例えば”dog”の場合、大文字で”DOG”と記述すると音声ブラウザは”D（ディー）”、”O（オー）”、”G（ジー）”と読み上げます。

プロパティ

text-transform

値

キーワード

capitalize（一文字目を大文字に変換）

uppercase（すべてを大文字に変換）

lowercase（すべてを小文字に変換）

none（なし）

対象

すべての要素

継承の有無

継承

text-transformサンプル

(X)HTML上での記述”abcde fghij capitalize”と小文字で記述しています。

abcde fghij capitalize

abcde fghij uppercase

abcde fghij lowercase

カテゴリ:CSSプロパティ一覧 | Page Top

word-spacing：英単語感覚

word-spacingプロパティは半角スペースで区切られた単語と単語の間隔を指定します。半角スペースで区切られた単語間隔なので、主に欧文テキストに使用します。テキストの文字と文字との間隔（字間）のはletter-spacingプロパティです。

プロパティ

word-spacing

値

単位

対象

すべての要素

継承の有無

継承

word-spacingサンプル

word-spacing:0.5em abc def ghi

word-spacing:1em abc def ghi

word-spacing:20px abc def ghi

カテゴリ:CSSプロパティ一覧 | Page Top

letter-spacing ：文字間隔

letter-spacingプロパティはテキストの文字と文字との間隔（字間）を指定します。半角スペースで区切られた単語と単語との間隔はword-spacingプロパティです。

プロパティ

letter-spacing

値

単位

対象

すべての要素

継承の有無

継承

ポイント

Macにてレイアウトに影響を及ぼす可能性

letter-spacingサンプル

letter-spacing:0.5em

letter-spacing:1em

letter-spacing:10px

カテゴリ:CSSプロパティ一覧 | Page Top

text-decoration：文字の下線

text-decorationプロパティはテキストに装飾を施します。blink（点滅）に対応しているのはNetscape,Firefox,OperaのみでIEは未対応。また、アクセシビリティ上でもblink（点滅）は使用しない事が望ましい。

プロパティ

text-decoration

値

キーワード(下記参照)

none（なし）

underline（下線）

overline（上線）

line-through（打ち消し線）

blink（点滅）

対象

すべての要素

継承の有無

なし

text-decorationサンプル

リンクの下線も指定。一部未対応ブラウザあり。

text-decoration:none;

text-decoration:underline;

text-decoration:overline;

text-decoration:line-through;

text-decoration:blink;

カテゴリ:CSSプロパティ一覧 | Page Top

text-align：文字の配置指定

text-alignプロパティは、ブロック要素、セル要素内のテキストや画像などの水平方向の揃え方を指定します。justifyは単語間にある半角スペースの幅で調整を行っているため、欧文を対象とし日本語には適用しない。

プロパティ

text-align

値

キーワード(下記参照)

left（左寄せ）

right（右寄せ）

center（中央寄せ）

justify（均等）

対象

ブロックレベル要素、表のセルとインラインブロック

継承の有無

継承

text-alignサンプル

text-align:right;

text-align:center;

text-align:left;

text-align:justify;

normal abc def ghi jkl mno pqr stu vwx yz. abcdefghijklmnopqrstuvwxyz. a b c d e f g h i j k l m n opqrstuvwxyz. abcdefghijklmnopqrstuvwxyz. abcdefghijklmnopqrstuvwxyz.

text-align:justify; abc def ghi jkl mno pqr stu vwx yz. abcdefghijklmnopqrstuvwxyz. a b c d e f g h i j k l m n opqrstuvwxyz. abcdefghijklmnopqrstuvwxyz. abcdefghijklmnopqrstuvwxyz.

カテゴリ:CSSプロパティ一覧 | Page Top

text-indent：文頭指定

text-indentプロパティは、ブロック要素に含まれるテキストの1行目を字下げ指定します。インデント効果は行頭のみです。text-indentプロパティは、負の値（-9999px）を指定することも可能です。この場合、ブロック要素内のテキストはブラウザ上では表示されませんが、(X)HTML上では読み込まれます。

プロパティ

text-indent

値

px | em など

対象

ブロックレベル要素、表のセルとインラインブロック

継承の有無

継承

text-indentサンプル

text-indent:1em;サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル

text-indent:3em;サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル

text-indent:20px;サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル：サンプル

カテゴリ:CSSプロパティ一覧 | Page Top