テキストのスタイル

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

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