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-color プロパティ(文字飾りの色)

text-decoration-color: 文字飾りの色;

文字飾りに対する色を指定します。

文字飾りの色は、色値を指定します。初期値は、currentcolor です。

L5.2.5 text-decoration-line プロパティ(文字飾りの表示位置)

text-decoration-line: 文字飾りの表示位置;

文字飾りに対する表示位置を指定します。

文字飾りの表示位置は、以下の値をスペースで区切って指定します。

none(初期値)
文字飾りをなしにします。
underline
下線を引くことを指定します。
overline
上線を引くことを指定します。
line-through
取り消し線を引くことを指定します。

L5.2.6 text-decoration-style プロパティ(文字飾りの線種)

text-decoration-line: 文字飾りの線種;

文字飾りに対する線種を指定します。

文字飾りの線種は、以下の値を指定します。

solid(初期値)
単独線を引くことを指定します。
double
二重線を引くことを指定します。
dotted
点線を引くことを指定します。
dashed
破線を引くことを指定します。
wavy
波線を引くことを指定します。

L5.2.7 text-decoration-thickness プロパティ(文字飾りの線の太さ)

text-decoration-thickness: 文字飾りの線の太さ;

文字飾りに対する線の太さを指定します。

文字飾りの線の太さは、百分率(%)、ピクセル値(px)などで指定します。初期値は、auto でブラウザが適切な太さを選択します。また、from-font を指定するとフォントファイルに設定されている推奨値が使用され、フォントファイルに推奨値が設定されていない場合は、auto と同様にブラウザが適切な太さを選択します。

【注意】(2023年11月22日現在)
Safari ブラウザでは、百分率(%)指定ができません。

L5.2.8 text-decoration プロパティ(文字の飾りの一括指定)

text-decoration: 文字飾り;
-webkit-text-decoration: 文字飾り;		/* ベンダープレフィックス指定 */

text-decoration-color プロパティ、text-decoration-line プロパティ、text-decoration-style プロパティ、text-decoration-thickness プロパティの指定値を任意の順序でスペースで区切って指定します。

【注意】(2023年11月22日現在)
text-decoration プロパティを使用して文字飾りの一括指定(下記使用例の 5~10)をすると Safari ブラウザでは指定の飾りが表示されません。個別プロパティで指定するかベンダープレフィックスを追加指定(下記使用例の 11~16)してください。また、ベンダープレフィックスを使用した場合でも text-decoration-thickness プロパティの値が指定されている場合(下記使用例の 16)は、Safari ブラウザでは表示されませんので個別プロパティで指定(下記使用例の 17)してください。

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;
    (Safari では表示不可)

    文字サンプル■■■■

  6. text-decoration: line-through dashed;
    (Safari では表示不可)

    文字サンプル■■■■

  7. text-decoration: line-through dotted;
    (Safari では表示不可)

    文字サンプル■■■■

  8. text-decoration: line-through double red;
    (Safari では表示不可)

    文字サンプル■■■■

  9. text-decoration: underline wavy blue;
    (Safari では表示不可)

    文字サンプル■■■■

  10. text-decoration: underline overline 6px skyblue;
    (Safari では表示不可)

    文字サンプル■■■■

  11. text-decoration: line-through double;
    -webkit-text-decoration: line-through double;

    文字サンプル■■■■

  12. text-decoration: line-through dashed;
    -webkit-text-decoration: line-through dashed;

    文字サンプル■■■■

  13. text-decoration: line-through dotted;
    -webkit-text-decoration: line-through dotted;

    文字サンプル■■■■

  14. text-decoration: line-through double red;
    -webkit-text-decoration: line-through double red;

    文字サンプル■■■■

  15. text-decoration: underline wavy blue;
    -webkit-text-decoration: underline wavy blue;

    文字サンプル■■■■

  16. text-decoration: underline overline 6px skyblue;
    -webkit-text-decoration: underline overline 6px skyblue;
    (Safari では表示不可)

    文字サンプル■■■■

  17. text-decoration-line: underline overline;
    text-decoration-thickness: 6px;
    text-decoration-color: skyblue;

    文字サンプル■■■■

【Safari での表示例(参考)】

text-decorationのSafari表示例

L5.2.9 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.3.10 tab-size プロパティ(タブ文字の表示幅指定)

tab-size: タブ文字の表示幅;

タブ文字の表示幅を指定します。

タブ文字の表示幅は、空白文字の文字数やピクセル値(px)などで指定します。初期値は、8(空白文字 8 文字)です。

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 プロパティの値が優先されます。

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

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