HTML-CSS入門講座

濱屋太郎

Lesson-5

Lesson-5
CSSで文字飾りを付けましょう

目次

5.1 はじめに

5.1.1 概要

5.2 テキスト系プロパティ

5.2.1 テキスト関連プロパティ

(1) colorプロパティ(文字の色)

color: (文字色);

文字色を指定します。

(2) opacityプロパティ(透明度)

opacity: (透明度);

要素の透明度を指定します。

(透明度)は、0(完全に透明)~1(完全に不透明)の範囲で指定します。透明効果は指定したオブジェクト全体(親要素に指定した時は配下の子要素にも適用)に適用されます。

透明効果をオブジェクト全体ではなく背景色やボーダー色などに個別に適用したい時は、rgba関数を使用して色を指定します。

(3) text-alignプロパティ(文字の配置)

text-align: (配置位置);

ブロック要素内の文字の配置位置や均等割付を指定します。

(配置位置)は以下の値を指定します。

start(初期値)
ボックスの始端に揃えることを指定します。
end
ボックスの終端に揃えることを指定します。
left
ボックスの左端に揃えることを指定します。
right
ボックスの右端に揃えることを指定します。
center
ボックスの中央に指定することを指定します。
justify
ボックス内で均等割り付けをすることを指定します。

(4) text-decoretionプロパティ(文字の飾り)

text-decoretion: (文字飾り);

文字に対する傍線・色・スタイルなどを指定します。

(文字飾り)は以下の値をスペースで区切って組み合わせて指定します。

none(初期値)
文字飾りをなしにします。
underline
下線を引くことを指定します。
overline
上線を引くことを指定します。
line-through
取り消し線を引くことを指定します。
solid
1本線を引くことを指定します。
double
2本線を引くことを指定します。
dashed
破線を引くことを指定します。
dotted
点線を引くことを指定します。
(色指定)
線の色を指定します。

(5) text-shadowプロパティ(文字の影)

text-shadow: (文字の影値);

文字に対して1つまたは複数の影を指定します。

(文字の影値)は、「水平方向の影のオフセット距離・垂直方向の影のオフセット距離・ぼかしの半径・色」の順でスペースで区切って指定します。(文字の影値)は、複数指定することができ複数指定する時はカンマ(,)で区切って指定します。(文字の影値)の初期値は「none」で影なしとなります。

(文字の影値)の各値は以下のルールに従って解釈されます。

水平方向の影のオフセット距離
「水平方向の影のオフセット距離」は、正の値を指定すると右へ、負の値を指定すると左に影が移動します。
垂直方向の影のオフセット距離
「垂直方向の影のオフセット距離」は、正の値を指定すると下へ、負の値を指定すると上に影が移動します。
ぼかしの半径
「ぼかしの半径」は、影のぼかしの半径を指定します。省略時は、ゼロ(0)になります。
「色」は、影の色を指定します。省略時はブラウザの規定値が使用されます。

5.3 フォント系プロパティ

5.3.1 フォント関連プロパティ

(1) font-familyプロパティ(フォントの種類)

font-family: (フォントファミリィ);

フォントの種類を指定します。

(フォントのファミリィ)はカンマ(,)で区切って複数の候補を指定することができます。複数の候補が指定されている時は、表示環境で使用可能なものを先頭から順に選択します。指定したフォントが表示環境にインストールされていない場合はブラウザの規定値が使用されます。

(フォントのファミリィ)は以下の値で指定します。

フォント名
「MS ゴシック」や「MS 明朝」のようにフォント名で指定します。フォント名にスペースが含まれている場合はダブルクォーテーション(")またはシングルクォーテーション(')で囲んで指定します。
sans-serif
ゴシック系のフォントを指定します。
serif
明朝系のフォントを指定します。
cursive
筆記体・草書体のフォントを指定します。
fantasy
装飾的なフォントを指定します。
monospace
等幅フォントを指定します。

(2) font-sizeプロパティ(フォントのサイズ)

font-size: (フォントサイズ);

フォントのサイズを指定します。

(フォントサイズ)は、px、em、rem、%などの単位を付けた数値で指定します。

(3) font-weightプロパティ(フォントの太さ)

font-weight: (フォントの太さ);

フォントの太さを指定します。

(フォントの太さ)は以下の値で指定します。実際の表示は対象の太さのフォントが用意されているかによります。

normal(初期値)
標準の太さ指定します。
bold
太字を指定します。
lighter
相対的に一段階細いフォントを指定します。
bolder
相対的に一段階太いフォントを指定します。

(4) font-styleプロパティ(フォントのスタイル)

font-style: (フォントスタイル);

フォントのスタイルを指定します。

(フォントスタイル)は以下の値で指定します。フォントの種類によってイタリック体や斜体でデザインされたフォントを使用する場合と標準フォントを斜めに傾けて表示する場合があります。

normal(初期値)
標準のフォントを指定します。
italic
イタリック体のフォントを指定します。
oblique
斜体のフォントを指定します。

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

line-height: (行の高さ);

行の高さを指定します。

(行の高さ)は以下の値で指定します。

normal(初期値)
ブラウザが判断して行の高さ決定します。
数値に単位を付けて指定
数値にpx,em,%などの単位をつけて指定します。実際に表示するサイズはモニタの解像度により変化します。また、emとはフォントの高さを1とする単位です。
数値のみで指定
単位をつけずに数値のみを指定すると、その数値にフォントのサイズを掛けた値が行の高さとなります。例えば「1.5」と指定すると「150%」や「1.5em」と指定した場合と同じになります。

(6) fontプロパティ(フォント一括指定)

font: (フォント一括指定);

font-styleプロパティ、font-weightプロパティ、font-sizeプロパティ、line-heightプロパティ、font-familyプロパティの値を一括で指定します。

(フォント一括指定)は、「フォントスタイル・フォントの太さ・フォントサイズ・/行の高さ・フォントファミリィ」をスペースで区切って指定します。「フォントスタイルとフォントの太さ」は順不同で省略可能です。「フォントサイズ・フォントファミリィ」は省略することはできません。「/行の高さ」を指定する時は前にスラッシュ(/)を付加します。fontプロパティを使用するとフォント関連の値は一旦リセットされますので省略した値は親要素を継承するのではなく初期値に戻されます。

(7) white-spaceプロパティ(空白・改行の表示方法)

white-space: (空白・改行の表示方法);

ソース中のホワイトスペース(連続する半角スペース・タブ)・改行の表示方法を指定します。

(空白・改行の表示方法)は以下の値で指定します。

normal(初期値)
ソース中のホワイトスペースを無視し改行は1つの半角スペースとして表示します。ボックスサイズが指定されている場合は、それに合わせて自動改行します。
pre
ソース中のホワイトスペースや改行を、そのまま表示します。ボックスサイズが指定されている場合でも自動改行しません。
nowrap
ソース中のホワイトスペースを無視し改行は1つの半角スペースとして表示します。ボックスサイズが指定されている場合でも自動改行しません。
pre-wrap
ソース中のホワイトスペースや改行を、そのまま表示します。ボックスサイズが指定されている場合は、それに合わせて自動改行します。
pre-line
ソース中のホワイトスペースを無視し改行は1つの半角スペースとして表示します。ボックスサイズが指定されている場合は、それに合わせて自動改行します。

5.4 リスト系プロパティ

5.4.1 リスト関連プロパティ

(1) list-style-typeプロパティ(リストマーカーの種類)

list-style-type: (リストマーカーの種類);

リストの先頭に表示するマーカーの種類を指定します。list-style-imageの値を同時に指定した場合には list-style-imageの値が優先されます。

(リストマーカーの種類)は以下の値で指定します。実際に表示されるマーカーは表示環境に依存します。

none
マーカーを表示しません。
disc
ulマーカーを黒丸で表示します。
circle
マーカーを白丸で表示します。
square
マーカーを黒四角で表示します。
lower-roman
マーカーを小文字のローマ数字(ⅰ. ⅱ. ⅲ.)で表示します。
upper-roman
マーカーを大文字のローマ数字(Ⅰ. Ⅱ. Ⅲ.)で表示します。
lower-greek
マーカーを小文字のギリシャ文字(α. β. γ.)で表示します。
decimal
マーカーを算用数字(1. 2. 3.)で表示します。
decimal-leading-zero
マーカーを先頭に0を付けた算用数字(01. 02. 03.)で表示します。
lower-latin
マーカーを小文字のアルファベット(a. b. c.)で表示します。
lower-alpha
マーカーを小文字のアルファベット(a. b. c.)で表示します。
upper-latin
マーカーを大文字のアルファベット(A. B. C.)で表示します。
upper-alpha
マーカーを大文字のアルファベット(A. B. C.)で表示します。
cjk-ideographic
マーカーを漢数字(一、二、三、)で表示します。
hiragana
マーカーをひらがなのあいうえお順(あ、い、う、)で表示します。
katakana
マーカーをカタカナのアイウエオ順(ア、イ、ウ、)で表示します。
hiragana-iroha
マーカーをひらがなのいろはにほへと順(い、ろ、は、)で表示します。
katakana-iroha
マーカーをカタカナのイロハニホヘト順(イ、ロ、ハ、)で表示します。

(2) list-style-imageプロパティ(リストマーカーの画像)

list-style-image: (リストマーカーの画像ファイルのパス名);

リストの先頭に表示する画像ファイルのパス名を指定します。

(リストマーカーの画像ファイルのパス名)は「url('画像ファイルのパス名')」で指定します。noneは初期値であり画像ファイルを指定しないことを示すします。

(3) list-style-positionプロパティ(リストマーカーの位置)

list-style-position: (リストマーカーの表示位置);

リストの先頭に表示するマーカーの表示位置を指定します。

(リストマーカーの表示位置)は以下の値で指定します。

outside(初期値)
マーカーがリスト内容の領域の外側に表示され、マーカー以外の部分がインデント(字下げ)された形になります。
inside
マーカーがリスト内容の領域の内側に表示され、マーカーとマーカー以外の部分の高さが揃います。

(4) list-styleプロパティ(リストマーカーの一括指定)

list-style: (リストスタイル一括指定);

リストの先頭に表示するマーカーに関する値をまとめて指定します。

list-style-typeプロパティ、 list-style-imageプロパティ、 list-style-positionプロパティのうち、指定する値を任意の順序でスペースで区切って指定します。list-style-typeプロパティとlist-style-imageプロパティの値を同時に指定した場合にはlist-style-imageプロパティの値が優先されます。

5.4.2 リスト関連プロパティ 表示サンプル