HTML-CSS 入門講座

HTML-CSS 入門講座

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

目次

L5.1 はじめに

L5.1.1 概要

L5.2 テキスト系プロパティ

L5.2.1 color プロパティ(文字の色)

color: 文字色;

文字色を指定します。

color プロパティの使用例を以下に示します。

  1. color: black;

    文字サンプル■■■■

  2. color: red;

    文字サンプル■■■■

  3. color: lime;

    文字サンプル■■■■

  4. color: blue;

    文字サンプル■■■■

L5.2.2 opacityプロパティ(透明度)

opacity: 透明度;

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

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

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

opacity プロパティの使用例を以下に示します。

  1. background: white; border: 1px #ccc solid; opacity: 1;

    文字サンプル■■■■

  2. background: white; border: 1px #ccc solid; opacity: 0.6;

    文字サンプル■■■■

  3. background: white; border: 1px #ccc solid; opacity: 0.2;

    文字サンプル■■■■

  4. background: rgba(255,255,255,0.5); border: 1px #ccc solid;

    文字サンプル■■■■

L5.2.3 text-align プロパティ(文字の配置)

text-align: 配置位置;

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

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

start(初期値)
ボックスの始端に揃えることを指定します。
end
ボックスの終端に揃えることを指定します。
left
ボックスの左端に揃えることを指定します。
right
ボックスの右端に揃えることを指定します。
center
ボックスの中央に指定することを指定します。
justify
ボックス内で均等割り付けをすることを指定します。但し、最後の行は「left」を指定した場合と同じ挙動になります。

text-align プロパティの使用例を以下に示します。

  1. text-align: left; padding: 10px; border: 1px #333 solid;

    文字サンプル■■■■

  2. text-align: right; padding: 10px; border: 1px #333 solid;

    文字サンプル■■■■

  3. text-align: center; padding: 10px; border: 1px #333 solid;

    文字サンプル■■■■

  4. text-align: center; padding: 10px; border: 1px #333 solid;

    a bb ccc dddd eeeee ffffff ggggggg hhhhhhhh iiiiiiiii jjjjjjjjjj kkkkkkkkkkk llllllllllll mmmmmmmmmmmmm nnnnnnnnnnnnnn ooooooooooooooo pppppppppppppppp qqqqqqqqqqqqqqqqq rrrrrrrrrrrrrrrrrr sssssssssssssssssssss tttttttttttttttttttt uuuuuuuuuuuuuuuuuuuu vvvvvvvvvvvvvvvvvvvvvv

  5. text-align: justify; padding: 10px; border: 1px #333 solid;

    a bb ccc dddd eeeee ffffff ggggggg hhhhhhhh iiiiiiiii jjjjjjjjjj kkkkkkkkkkk llllllllllll mmmmmmmmmmmmm nnnnnnnnnnnnnn ooooooooooooooo pppppppppppppppp qqqqqqqqqqqqqqqqq rrrrrrrrrrrrrrrrrr sssssssssssssssssssss tttttttttttttttttttt uuuuuuuuuuuuuuuuuuuu vvvvvvvvvvvvvvvvvvvvvv

L5.2.4 text-decoration プロパティ(文字の飾り)

text-decoration: 文字飾り;

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

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

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

text-decoration プロパティの使用例を以下に示します。

  1. text-decoration: none;

    文字サンプル■■■■

  2. text-decoration: underline;

    文字サンプル■■■■

  3. text-decoration: overline;

    文字サンプル■■■■

  4. text-decoration: line-through;

    文字サンプル■■■■

  5. text-decoration: line-through double;

    文字サンプル■■■■

  6. text-decoration: line-through dashed;

    文字サンプル■■■■

  7. text-decoration: line-through dotted;

    文字サンプル■■■■

  8. text-decoration: line-through double red;

    文字サンプル■■■■

L5.2.5 text-shadow プロパティ(文字の影)

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

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

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

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

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

text-shadow プロパティの使用例を以下に示します。

  1. text-shadow: 2px 2px 0px red;

    文字サンプル■■■■

  2. text-shadow: -2px -2px red;

    文字サンプル■■■■

  3. text-shadow: 2px 2px 2px red;

    文字サンプル■■■■

  4. text-shadow: 2px 2px 2px red, 4px 4px 2px lime, 6px 6px 2px blue;

    文字サンプル■■■■

  5. color: white;
    text-shadow:
    -1px 0px 0px red, -1px 1px 0px red,
    0px 1px 0px red, 1px 1px 0px red,
    1px 0px 0px red, 1px -1px 0px red,
    0px -1px 0px red, -1px -1px 0px red;

    文字サンプル■■■■

  6. color: white;
    text-shadow:
    0px 0px 3px red, 0px 0px 3px red,
    0px 0px 3px red, 0px 0px 3px red,
    0px 0px 3px red, 0px 0px 3px red,
    0px 0px 3px red, 0px 0px 3px red

    文字サンプル■■■■

L5.3 フォント系プロパティ

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

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

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

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

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

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

Web ページの表示は、端末にインストールされているフォントの種類によって表示型式が変わってしまうことがあります。表示形式を端末に依存しないようにするためには Web フォントの利用が考えられます。無料の Web フォントとして Google Fonts がありますので活用を考えてみましょう。

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

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

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

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

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

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

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

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

normal(初期値)
標準の太さ指定します。
bold
太字を指定します。
lighter
相対的に親要素より一段階細いフォントを指定します。
bolder
相対的に親要素より一段階太いフォントを指定します。
数値
1 ~ 1000 の値が指定でき、数値が大きいほど太いフォントが使用されます。normal は 400、bold は 700 に相当します。

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

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

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

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

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

L5.3.5 line-height プロパティ(行の高さ)

line-height: 行の高さ;

行の高さを指定します。

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

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

行の高さを指定した場合は、行の高さとフォントの高さの差分の半分がフォントの上下に均等に割り当てられます。

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

font: フォント一括指定;

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

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

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

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

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

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

normal(初期値)
ソース中のホワイトスペース・改行を一つの半角スペースにまとめて表示します。自動的な改行を行います。
nowrap
ソース中のホワイトスペース・改行を一つの半角スペースにまとめて表示します。自動的な改行を行いません。
pre
ソース中のホワイトスペース・改行をそのまま表示します。自動的な改行を行いません。
pre-wrap
ソース中のホワイトスペース・改行をそのまま表示します。自動的な改行を行います。
pre-line
ソース中のホワイトスペースを一つの半角スペースにまとめて表示しますが、改行はそのまま表示します。自動的な改行を行います。

上記の組合せを表にすると以下の通りになります。。

指定値ホワイトスペース改行自動的な改行
normal(初期値)まとめるまとめるする
nowrapまとめるまとめるしない
preそのままそのまましない
pre-wrapそのままそのままする
pre-lineまとめるそのままする

L5.3.8 word-wrap プロパティ(単語の途中での改行方法)

word-wrap: 単語の途中での改行方法;

表示範囲内に収まりきらない単語がある場合に、単語の途中で改行するかどうかを指定します。

単語の途中での改行方法は、以下の値で指定します。

normal(初期値)
単語の途中では改行を行わなく、必要に応じて表示範囲を拡大します。
break-word
必要に応じて単語の途中で改行します。

L5.3.9 word-break プロパティ(テキストや単語の改行方法)

word-break: テキストや単語の改行方法;

テキストや単語の改行方法を指定します。実際の挙動は、テキストの言語によって異なります。例えば、日本語と英語では改行のルールが異なります。

テキストや単語の改行方法は、以下の値で指定します。

normal(初期値)
言語の習慣的な規則に従って改行します。。
keep-all
単語の途中では改行しません。
break-all
単語の途中でも改行します。
break-word
単語の区切りで改行しますが、場合によっては単語の途中でも改行します。

L5.4 リスト系プロパティ

L5.4.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
マーカーをカタカナのイロハニホヘト順(イ、ロ、ハ、)で表示します。

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

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

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

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

表示する画像の拡大縮小は行いませんので、適なサイズの画像を用意する必要があります。

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

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

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

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

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

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

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

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

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

L5.4.5 リスト関連プロパティ 表示サンプル

ロケット本体
PAGE
TOP
ロケット炎