Web References

テキストのスタイル

テキストのスタイルを紹介します。

text-alignプロパティ

テキストの水平方向の位置を指定します。指定方法は以下のとおりです。

left: 左揃え
center: 中央揃え
right: 右揃え
justify: 両端揃え（欧文のみ対応）
単語間隔を調整し、左右を揃えます。（最終行を除く）

フォントのスタイル

フォントに関するスタイルを紹介します。

font-sizeプロパティ

フォントサイズを指定します。指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」「pt（ポイント）」「em（エム）」などが良く使われます。
数値＋％: 親要素に対するパーセントで指定します。
キーワード: フォントサイズを指定するキーワードを使用します。; xx-small/x-small/small/medium/large/x-large/xx-large

font-weightプロパティ

フォントの太さを指定します。指定方法は以下のとおりです。

normal: 通常の太さで表示します。
bold: 太字で表示します。
bolder: 1段階太く表示します。
lighter: 1段階細く表示します。

font-styleプロパティ

フォントのスタイルを指定します。指定方法は以下のとおりです。

normal: 通常のスタイルで表示します。
italic: イタリック体で表示します。
oblique: 斜体で表示します。

日本語フォントの場合はイタリック書体がありませんので、通常の書体を斜めにした「斜体」で表示されます。イタリック書体が用意されている欧文フォントでは、筆記体に近い「イタリック体」で表示されるようです。

font-familyプロパティ

フォントの種類を指定します。指定方法は以下のとおりです。

“フォント名”: フォント名そのものを指定します。フォント名にスペースを含む場合はダブルクォーテーション「”」でくくるのが必須ですが、スペースを含まなくてもくくっておくと、間違いがありません。
フォントグループ名: フォントグループ（系統）を指定します。; serif（明朝系、セリフ体）; sans-serif（ゴシック系、サンセリフ体）; cursive（筆記体系）; fantasy（装飾系）; monospace（等幅）

複数のフォント名やフォントグループ名をカンマ「,」で区切って指定ですると、前にあるものが優先的に適用されるため、主に「Win用のフォント,Mac用のフォント,フォントグループ名」という形式で指定されます。

また、環境によってはフォント名をアルファベットで表記しないと適用されないこともあるので注意が必要です。
＜例＞　font-family:”游ゴシック”,”Yu Gothic”;

line-heightプロパティ

行の高さを指定します。フォントサイズ(font-size)と同じ値にすると、行間が0になります。指定の方法は以下のとおりです。

数値＋％: 高さをパーセントで指定します。
数値: 倍数で指定します。「2」=「200%」ということになります。
数値＋単位: 単位は「px（ピクセル）」「pt（ポイント）」「em（エム）」など、フォントサイズに合わせた単位が良く使われます。
normal（デフォルト）: 「100%」と同じです。

日本語の場合デフォルトの100%では、行間が詰まって見えるため、段落などでは1.5～2倍の行間をあけると文章が読みやすくなります。

また、「数値＋単位」を使用する場合、フォントサイズより小さくすると行が重なってしまうので注意しましょう。

テーブルのスタイル

テーブル（表）に関するスタイルを紹介します。

border-collapse

テーブルのボーダーを表示する方法を指定します。指定方法は以下のとおりです。

collapse: 隣接するセル、またはテーブルのボーダーを重ねて表示します。
separate（デフォルト）: 隣接するセル、またはテーブルのボーダーを間隔をあけて表示します。

border-spacingプロパティ

セル間、またはテーブルとセルの間隔を指定します。指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」などが良く使われます。

table-layoutプロパティ

テーブルのレイアウト方法を指定します。指定方法は以下のとおりです。

auto（デフォルト）: テーブルの幅や高さは、セルの中身に応じて広がります。
fixed: テーブルの幅は100%、各セルの列幅は均等となります。

表示と配置のスタイル

要素の表示や配置に関するスタイルを紹介します。

displayプロパティ

ボックスの表示形式を変更します。表示形式は以下のとおりです。

block（ブロックレベル要素のデフォルト）: ブロックレベル形式で表示します。
inline（インライン要素のデフォルト）: インライン形式で表示します。
inline-block: インラインブロックレベル形式で表示します。
none: 存在しないものとして処理します。

overflowプロパティ

ボックスの内容があふれた場合の処理方法を指定します。処理方法は以下のとおりです。

visible（デフォルト）: 高さ、幅の指定を無視してすべて表示します。
hidden: 高さ、幅の指定により範囲内のみ表示します。また、回り込み(float)の親要素に指定して、回り込みを解除します。
scroll: スクロールバーを表示します。
auto: ブラウザーの処理に任せます。（ブラウザにより異なる）

overflow-xプロパティ

ボックスの幅の内容があふれた場合の処理方法を指定します。処理方法は以下のとおりです。

visible（デフォルト）: 幅の指定を無視してすべて表示します。
hidden: 幅の指定により範囲内のみ表示します。また、回り込み(float)の親要素に指定して、回り込みを解除します。
scroll: スクロールバーを表示します。
auto: ブラウザーの処理に任せます。（ブラウザにより異なる）

overflow-yプロパティ

ボックスの高さの内容があふれた場合の処理方法を指定します。処理方法は以下のとおりです。

visible（デフォルト）: 高さの指定を無視してすべて表示する。
hidden: 高さの指定により範囲内のみ表示。また、回り込み(float)の親要素に指定して、回り込みを解除する。
scroll: スクロールバーを表示
auto: ブラウザーの処理に任せます。（ブラウザにより異なる）

positionプロパティ

要素の配置方法を指定します。配置方法は以下のとおりです。

static（デフォルト）: 通常通りの配置をします。
relative: 通常通りの位置からの相対的な位置で指定します。また、絶対位置指定(absolute)の親要素に指定して、位置の基準とします。
absolute: 親要素に対して絶対的な位置で指定をします。（left/right/top/bottomプロパティを使用）
fixed: 位置を固定して配置します。

leftプロパティ

左からの位置を指定します。指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」「em（エム）」などが良く使われます。
数値＋％: 位置をパーセントで指定します。

rightプロパティ

右からの位置を指定します。指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」「em（エム）」などが良く使われます。
数値＋％: 位置をパーセントで指定します。

topプロパティ

上からの位置を指定します。指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」「em（エム）」などが良く使われます。
数値＋％: 位置をパーセントで指定します。

bottomプロパティ

下からの位置を指定します。指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」「em（エム）」などが良く使われます。
数値＋％: 位置をパーセントで指定します。

z-indexプロパティ

絶対位置指定(absolute)するときの、要素の重ね順を指定します。

数値: 整数で指定し、値が大きいほうが上（手前）に表示され、値が小さい方が下（奥）に表示され、上のものに隠れます。

floatプロパティ

画像やボックスをフロートさせ、寄せて配置し、後続するボックスを回りこませます。フロートの種類は以下のとおりです。

left: 左に寄せて、下の要素を右に回りこませます。
right: 右に寄せて、下の要素を左に回りこませます。
none（デフォルト）: フロートしません。下の要素も回りこみません。

clearプロパティ

floatプロパティにより設定された、フロートを解除します。解除の種類は以下のとおりです。

left: 左のフロートのみ解除します。
right: 右のフロートのみ解除します。
both: 両方のフロートを解除します。

ボックスのスタイル

主にブロックレベル要素に適用する、ボックスのスタイルを紹介します。

widthプロパティ

ボックスの幅を指定します。幅の指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」「em（エム）」などが良く使われます。
数値＋％: 幅をパーセントで指定します。
auto: 中身にあわせて自動で広がります。

heightプロパティ

ボックスの高さを指定します。高さの指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」「em（エム）」などが良く使われます。
数値＋％: 高さをパーセントで指定します。
auto: 中身にあわせて自動で広がります。

max-widthプロパティ

ボックスの最大の幅を指定します。幅の指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」「em（エム）」などが良く使われます。
数値＋％: 最大幅をパーセントで指定します。
none（デフォルト）: 幅を指定しません。

max-heightプロパティ

ボックスの最大の高さを指定します。高さの指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」「em（エム）」などが良く使われます。
数値＋％: 最大高さをパーセントで指定します。
none（デフォルト）: 幅を指定しません。

min-widthプロパティ

ボックスの最小の幅を指定します。幅の指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」「em（エム）」などが良く使われます。
数値＋％: 最小幅をパーセントで指定します。

min-heightプロパティ

ボックスの最小の高さを指定します。高さの指定方法は以下のとおりです。

数値＋単位: 単位には、「px（ピクセル）」「em（エム）」などが良く使われます。
数値＋％: 最小高さをパーセントで指定します。

余白のスタイル

余白のスタイルを紹介します。枠線（ボーダー）の外側にある余白がマージン、内側にある余白がパディングといいます。

marginプロパティ

他の要素との間隔、つまり外側の余白を指定します。要素が上下に並んでいる場合、大きいマージンが優先されます。
また、上下左右個別に指定する場合は、「margin-top」「margin-left」「margin-right」「margin-bottom」プロパティを使用します。

paddingプロパティ

枠線と内容との間隔、つまり内側の余白を指定します。
また、上下左右個別に指定する場合は、「padding-top」「padding-left」「padding-right」「padding-bottom」プロパティを使用します。

上下左右個別に指定する場合

設定する値の数により、以下のようになります。

値が1つ: 上下左右同じ値となります。
値が2つ: 上下左右
値が3つ: 上左右下
値が4つ: 上右下左

枠線のスタイル

枠線（ボーダー）のスタイルを紹介します。

border-styleプロパティ

枠線の種類を指定します。枠線の種類は以下のとおりです。

solid: 実線
double: 二重線
groove: 溝線
ridge: 稜線
inset: 領域がくぼんで見える
outset: 領域が浮き出て見える
none（デフォルト）: 枠線なし
hidden: 枠線を表示しない（太さは適用される）
dashed: 破線
dotted: 点線

また、上下左右個別に指定する場合は、「border-top-style」「border-left-style」「border-right-style」「border-bottom-style」プロパティを使用します。

border-widthプロパティ

枠線の太さを指定します。数値+単位、またはキーワードで指定されます。

thin: 細線
medium: 通常の太さの線
thick: 太線

また、上下左右個別に指定する場合は、「border-top-width」「border-left-width」「border-right-width」「border-bottom-width」プロパティを使用します。

border-colorプロパティ

枠線の色を指定します。色はカラーネーム、カラーコード（16進数）、カラーコード（10進数）で指定します。
また、上下左右個別に指定する場合は、「border-top-color」「border-left-color」「border-right-color」「border-bottom-color」プロパティを使用します。

borderプロパティ

枠線のスタイル（線種、太さ、色）を半角スペースで区切り、まとめて指定します。
また、上下左右個別に指定する場合は、「border-top」「border-left」「border-right」「border-bottom」プロパティを使用します。

背景のスタイル

背景のスタイルを紹介します。

background-colorプロパティ

背景色を指定します。色はカラーネーム、カラーコード（16進数）、カラーコード（10進数）で指定します。

background-imageプロパティ

背景画像を指定します。構文は、「url(画像のパス)」となります。

background-repeatプロパティ

背景画像の繰り返し方法を指定します。

repeat（デフォルト）: 上下・左右に繰り返します。
repeat-x: 左右にのみ繰り返します。
repeat-y: 上下にのみ繰り返します。
no-repeat: 繰り返さず1つのみ表示します。

background-positionプロパティ

背景画像の位置を指定します。構文は、「横方向縦方向」となります。
位置は、ピクセル(px)やパーセント(%)の数値、またはleft/center/right（横方向）、top/center/bottom（縦方向）で指定します。

background-attachmentプロパティ

背景画像のスクロール方法を指定します。

scroll（デフォルト）: ページのスクロールにあわせてスクロールします。
fixed: ページをスクロールしても、背景画像は固定されたままとなります。

文字色のスタイル

文字色のスタイルを紹介します。

colorプロパティ

文字色を指定します。色の指定はカラーネーム、カラーコード（16進数、10進数）があります。

色の指定

カラーネームによる指定: ■ red, ■ blue など、基本的な色は英語で簡単に指定できます。
カラーコード（16進数）: ■ #006633 など、「#」+「赤の値2桁」+「緑の値2桁」+「青の値2桁」で指定します。ちなみに16進数とは「0123456789ABCDEF」で0が最小、Fが最大となります。
カラーコード（10進数）: ■ rgb(0,102,51) など、「rgb()」の()内に、「赤の値」+「緑の値」+「青の値」で指定します。10進数の範囲は0～255で、これは16進数の00～FFに該当します。

文字色のサンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字色</title>
<style>
.red{color:red;}
.blue{color:#0000ff;}
.green{color:rgb(0,102,51);}
</style>
</head>
<body>
<p class="red">カラーネームによる指定</p>
<p class="blue">カラーコード（16進数）による指定</p>
<p class="green">カラーコード（10進数）による指定</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.red{color:red;}

.blue{color:#0000ff;}

.green{color:rgb(0,102,51);}

</style>

</head>

<body>

<p class="red">カラーネームによる指定</p>

<p class="blue">カラーコード（16進数）による指定</p>

<p class="green">カラーコード（10進数）による指定</p>

</body>

</html>

Webブラウザで表示すると、以下のようになります。