テキストのスタイル

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

text-alignプロパティ

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

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

text-decorationプロパティ

テキストの文字装飾を指定します。指定方法は以下のとおりです。

underline
下線を引く
overline
上線を引く
line-through
取消線を引く
none
線なし

text-indentプロパティ

テキストのインデント(字下げ)を指定します。指定方法は以下のとおりです。

数値+単位
単位には、「px(ピクセル)」「em(エム)」などが良く使われます。
数値+%
数値をパーセントで指定します。

vertical-alignプロパティ

ボックス内のコンテンツの垂直方向位置を指定します。指定方法は以下のとおりです。

段落等の場合

baseline(デフォルト)
ベースラインに沿って配置します。
text-top
文字の上部分に沿って配置します。
text-bottom
文字の下部分に沿って配置します。
super
上付き文字の位置に表示します。
sub
下付き文字の位置に表示します。

「super」や「sub」は位置だけの指定で文字サイズはそのままです。上付き文字や下付き文字には文字サイズも調整される「SUPタグ」「SUBタグ」を使用することをおすすめします。

テーブルのセル等

top
セルの上部に沿って配置します。
middle(デフォルト)
セルの上下中央に沿って配置します。
bottom
セルの下部に沿って配置します。

letter-spacingプロパティ

文字間隔を指定します。指定方法は以下のとおりです。

数値+単位
単位には「px(ピクセル)」「em(エム)」などが良く使われます。
数値+%
フォントサイズに対する割合をパーセントで指定します。

word-spacingプロパティ

単語間隔(欧文)を指定します。指定方法は以下のとおりです。

数値+単位
単位には「px(ピクセル)」「em(エム)」などが良く使われます。
数値+%
フォントサイズに対する割合をパーセントで指定します。

フォントのスタイル

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

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(エム)」などが良く使われます。
数値+%
最小高さをパーセントで指定します。

リストのスタイル

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

list-style-typeプロパティ

リストマークの種類をキーワードで指定します。ULタグ用の記号とOLタグ用の番号がありますが、いずれにも使用することができます。

disc(ULのデフォルト)
黒丸
circle
白丸
square
黒四角
none
リストマークなし
decimal(OLのデフォルト)
数字
upper-alpha
アルファベット大文字
lower-alpha
アルファベット小文字
upper-roman
ローマ数字大文字
lower-roman
ローマ数字小文字

list-style-imageプロパティ

リストマークを画像にします。構文は、「url(画像のパス)」となります。

list-style-positionプロパティ

リストマークの表示位置を指定します。

outside(デフォルト)
リストマークをボックスの外側に表示します。文字列の1行目と2行目以降がそろいます。
inside
リストマークをボックスの内側に表示します。リストマークと文字列の2行目以降がそろいます。

余白のスタイル

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

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に該当します。

文字色のサンプル

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