100日後にエンジニアになるキミ - 16日目 - CSS - CSSの基礎3

今日もCSSの続きをやっていきましょう。

前回のはこちら
100日後にエンジニアになるキミ - 15日目 - CSS - CSSの基礎2

CSSのプロパティ

CSSの各部分には名称がついており、基本的なCSSの書き方は
セレクタ {プロパティ名:値;}
となります。

セレクタ

セレクタ(selector)はCSSを適応させる対象のことです。

プロパティ

プロパティは適応するスタイルの種類のことで、様々な種類があります。

例えばcolorでは色を指定することができます。

値(value)

プロパティの値です。プロパティに対して様々な値が用意されています。

複数のスタイルを指定する

一つのセレクタにスタイルを複数指定したい場合は
1つのスタイルの宣言を;で区切ります。

p {color:red; line-height:15px;}

プロパティの数はものすごく沢山あります。

機能ごとに少しづつ押さえて行きましょう。

色合い(カラー)

color

文字の色を指定するプロパティ

RGB値（16進数）
color: #f00;
color: #ff0000;

RGB値（10進数）
color: rgb(255,0,0);

RGB値（%）
color: rgb(100%,0%,0%);

RGBA値（10進数）
color: rgba(255,0,0,0.5);

RGBA値（%）
color: rgba(100%,0%,0%,0.5);

HSL値
color: hsl(0,255%,128%);

HSLA値
color: hsla(0,255%,128%,0.5);

基本色
/* black、silver、gray、white、maroon、red、purple、fuchsia、
  green、lime、olive、yellow、navy、blue、teal、aqua */
color: red;

拡張色
/* X11カラー140色など */
color: darkred;

透過色
color: transparent;

親要素のカラー値
color: currentColor;

opacity

色の透明度を指定するためのプロパティ
0.0で完全な透明

/* 0.0～1.0 */
opacity: 0.1;
opacity: 0.5;

背景

background
背景に関するプロパティの値をまとめて記述する。

値	意味
background-attachment	背景画像のスクロール方法
background-clip	背景の描画領域
background-color	背景色
background-image	背景画像
background-origin	背景画像の配置基点
background-position	背景画像の表示位置
background-repeat	背景画像の繰り返し方法
background-size	背景画像のサイズ

background-attachment

背景画像のスクロール方法を指定する。
background-image,background-positionと併用する

値	意味
fixed	背景画像を指定した位置に固定
local	背景画像を要素内のコンテンツと一緒にスクロール
scroll	通常通り、背景画像を要素と一緒にスクロール（初期値）

background-attachment: fixed;
background-attachment: local;
background-attachment: scroll;

background-clip

background-imageで指定した背景画像や
background-colorで指定した背景色の描画領域を指定

値	意味
border-box	背景はボーダーボックス内に表示（初期値）
padding-box	背景はパディングボックス内に表示
content-box	背景はコンテンツボックス内に表示

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

background-color

要素の背景ボックスの色を指定する。
colorと同じ値

background-color: #f00;
background-color: #ff0000;
background-color: rgb(255,0,0);
background-color: rgb(100%,0%,0%);
background-color: rgba(255,0,0,0.5);
background-color: rgba(100%,0%,0%,0.5);
background-color: hsl(0,255%,128%);
background-color: hsla(0,255%,128%,0.5);
background-color: red;
background-color: darkred;
background-color: transparent;
background-color: currentColor;

background-image

要素の背景に置く画像を指定する。

background-image: url("aaa.gif");

background-origin

background-imageで指定した背景画像に対して配置の基準とする対象のボックスを
padding-box、border-box、content-boxのいずれかで指定する。

値	意味
padding-box	パディングボックスを配置の基準（初期値）
border-box	ボーダーボックスを配置の基準
content-box	コンテンツボックスを配置の基準

background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;

background-position

background-imageで指定した背景画像の、配置領域内での位置を指定

background-position: left 10px top 15px;
background-position: right 3em bottom 10px;
background-position: 100% 100%;

background-repeat

background-imageで指定した背景画像の繰り返しパターンを指定

値	意味
repeat-x	背景画像を水平方向に繰り返し
repeat-y	背景画像を垂直方向に繰り返し
repeat	背景画像を水平方向と垂直方向に繰り返し（初期値）
space	背景画像は指定方向へ繰り返して配置、スペースで調整
round	背景画像は指定方向へ繰り返して配置、画像の伸縮によって調整
no-repeat	背景画像を繰り返さない

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

background-size

background-imageで指定した背景画像のサイズを指定

値	意味
長さ	「px」や「em」などのサイズで画像の幅と高さを指定
パーセント値	パーセント値で画像の幅と高さを指定
auto	自動で画像の幅と高さを指定する。（初期値）
contain	画像の縦と横の比率を保ったまま、配置領域内にすべて収まる最大のサイズに画像を調整
cover	画像の縦と横の比率を保ったまま、配置領域をすべて覆う最小のサイズに画像を調整

background-size: 100% 100%;
background-size: 15px 15px;
background-size: 50% auto;
background-size: auto 4em;
background-size: auto;
background-size: 3em;

ボーダー

border

ボーダーに関するプロパティの値をまとめて記述するプロパティ

値	意味
border-color	ボーダーの色
border-style	ボーダーの種類
border-width	ボーダーの太さ

border: 2px solid #f00;
border: thin dotted rgb(255,0,0);
border: thick double hsla(0,255%,128%,0.5);

border-bottom

下側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ

値	意味
border-width	ボーダーの太さ
border-style	ボーダーの種類
border-color	ボーダーの色

border-bottom: 2px solid #f00;
border-bottom: thin dotted rgb(255,0,0);
border-bottom: thick double hsla(0,255%,128%,0.5);

border-bottom-color

下側のボーダーの色を指定するプロパティ
colorと同様

border-bottom-color: #f00;
border-bottom-color: #ff0000;
border-bottom-color: rgb(255,0,0);
border-bottom-color: rgb(100%,0%,0%);
border-bottom-color: rgba(255,0,0,0.5);
border-bottom-color: rgba(100%,0%,0%,0.5);
border-bottom-color: hsl(0,255%,128%);
border-bottom-color: hsla(0,255%,128%,0.5);
border-bottom-color: red;
border-bottom-color: darkred;
border-bottom-color: transparent;
border-bottom-color: currentColor;

border-bottom-left-radius

左下の角丸を指定するプロパティ
数値やパーセントで指定する。

border-bottom-left-radius: 10px;
border-bottom-left-radius: 10em;
border-bottom-left-radius: 10%;
border-bottom-left-radius: 10px 10px;
border-bottom-left-radius: 10em 10em;
border-bottom-left-radius: 10% 10%;

border-bottom-right-radius

右下の角丸を指定するプロパティ
数値やパーセントで指定する。

border-bottom-right-radius: 10px;
border-bottom-right-radius: 10em;
border-bottom-right-radius: 10%;
border-bottom-right-radius: 10px 10px;
border-bottom-right-radius: 10em 10em;
border-bottom-right-radius: 10% 10%;

border-bottom-style

下側のボーダーの種類を指定するプロパティ

値	意味
none	罫線を引かない。（初期値）
hidden	罫線を表示しません。noneとほぼ同等
dotted	点線
dashed	破線
solid	実線
double	二重線
groove	立体的に窪んだ線
ridge	立体的に隆起した線
inset	ボックス全体が窪んだようにみえる囲み線
outset	ボックス全体が隆起したようにみえる囲み線

border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;

border-bottom-width

下側のボーダーの太さを指定するプロパティ

値	意味
数値	罫線の太さを「px」や「em」などで指定
thin	細い
medium	中くらい（初期値）
thick	太い

border-bottom-width: 2px;
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;

border-color

上下左右の罫線の色をまとめて設定するためのもので、値を4個指定した場合
4つの値は、上、右、下、左の罫線の色をそれぞれ順に表す
colorと同等

border-color: #f00;
border-color: #f00 #f00;
border-color: #f00 #f00 #f00;
border-color: #f00 #f00 #f00 #f00;

border-image

ボーダー画像関連プロパティの値をまとめて指定するプロパティ

値	意味
border-image-source	ボーダーに使用する画像を指定
border-image-slice	画像を9つにスライス
border-image-width	ボーダー画像の太さを指定
border-image-outset	ボーダー画像の外側への拡張を指定
border-image-repeat	画像の繰り返し方法を指定

border-image: url("aaa.png") 10 10 / 30px round stretch;

border-image-outset

ボーダーイメージエリアを広げるプロパティ

値	意味
長さ	ボーダーイメージエリアを広げる距離を長さで指定
数値	border-widthの倍数を指定

border-image-outset: 10px;
border-image-outset: 10px 10px;
border-image-outset: 10px 10px 10px;
border-image-outset: 10px 10px 10px 10px;

border-image-repeat

border-image-sliceによって切り分けられた罫線画像の
上下および左右の罫線部分の画像の繰り返しについてキーワードで指定

値	意味
stretch	画像は繰り返されず、領域いっぱいまで拡張（初期値）
repeat	画像は領域いっぱいまで繰り返される
round	画像は領域いっぱいまで繰り返され、位置は画像パターンのサイズで調整
space	画像は領域いっぱいまで繰り返され、位置は余白のスペースによって調整されます。

border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
border-image-repeat: round stretch;

border-image-slice

画像の分割位置を指定するプロパティ

値	意味
数値	画像の端からの距離を、「ピクセル数」や「ベクター座標」で指定
パーセント値	画像全体の幅や高さに対する割合で指定
fill	スライス後の画像の中央部分が破棄されない

border-image-slice: 10;
border-image-slice: 10 10;
border-image-slice: 10 10 10;
border-image-slice: 10 10 10 10;

border-image-slice: 10%;
border-image-slice: 10% 10%;
border-image-slice: 10% 10% 10%;
border-image-slice: 10% 10% 10% 10%;

border-image-slice: 10 fill;
border-image-slice: 10% fill;

border-image-source

ボーダーに使用する画像ファイルを指定するプロパティ

値	意味
url	ボーダーに使用する画像ファイルのURLを指定
none	ボーダーに画像を使用しない（初期値）

border-image-source: url("aaa.png");
border-image-source: none;

border-image-width

ボーダー画像の太さを指定するプロパティ

値	意味
パーセント値	「border画像領域」の幅または高さに対する割合距離を指定
数値	対応するborder-widthに対し,倍数で「border画像領域」の境界線からの距離を指定
auto	border-image-sliceと同じ値

border-image-width: 10;
border-image-width: 10px;
border-image-width: 10em;
border-image-width: 10%;

border-image-width: 10px 10px;
border-image-width: 10px 10px 10px;
border-image-width: 10px 10px 10px 10px;

border-image-width: auto;

border-left

左側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ

値	意味
border-width	ボーダーの太さ
border-style	ボーダーの種類
border-color	ボーダーの色

border-left: 2px solid #f00;
border-left: thin dotted rgb(255,0,0);
border-left: thick double hsla(0,255%,128%,0.5);

border-left-color

左側のボーダーの色を指定するプロパティ
colorと同様

border-left-color: #f00;
border-left-color: #ff0000;
border-left-color: rgb(255,0,0);
border-left-color: rgb(100%,0%,0%);
border-left-color: rgba(255,0,0,0.5);
border-left-color: rgba(100%,0%,0%,0.5);
border-left-color: hsl(0,255%,128%);
border-left-color: hsla(0,255%,128%,0.5);
border-left-color: red;
border-left-color: darkred;
border-left-color: transparent;
border-left-color: currentColor;

border-left-style

左側のボーダーの種類を指定するプロパティ

値	意味
none	罫線を引かない。（初期値）
hidden	罫線を表示しません。noneとほぼ同等
dotted	点線
dashed	破線
solid	実線
double	二重線
groove	立体的に窪んだ線
ridge	立体的に隆起した線
inset	ボックス全体が窪んだようにみえる囲み線
outset	ボックス全体が隆起したようにみえる囲み線

border-left-style: none;
border-left-style: hidden;
border-left-style: dotted;
border-left-style: dashed;
border-left-style: solid;
border-left-style: double;
border-left-style: groove;
border-left-style: ridge;
border-left-style: inset;
border-left-style: outset;

border-left-width

左側のボーダーの太さを指定するプロパティ

値	意味
数値	罫線の太さを「px」や「em」などで指定
thin	細い
medium	中くらい（初期値）
thick	太い

border-left-width: 2px;
border-left-width: thin;
border-left-width: medium;
border-left-width: thick;

border-radius

4つの角丸をまとめて指定するプロパティ
数値やパーセント値で指定する。

border-radius: 10px;
border-radius: 10em;
border-radius: 10%;
border-radius: 10px 10px;
border-radius: 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border-radius: 10px / 10px;
border-radius: 10px 10px / 10px 10px;
border-radius: 10px 10px 10px / 10px 10px 10px;
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;

border-right

右側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ

値	意味
border-width	ボーダーの太さ
border-style	ボーダーの種類
border-color	ボーダーの色

border-right: 2px solid #f00;
border-right: thin dotted rgb(255,0,0);
border-right: thick double hsla(0,255%,128%,0.5);

border-right-color

右側のボーダーの色を指定するプロパティ
colorと同等

border-right-color: #f00;
border-right-color: #ff0000;
border-right-color: rgb(255,0,0);
border-right-color: rgb(100%,0%,0%);
border-right-color: rgba(255,0,0,0.5);
border-right-color: rgba(100%,0%,0%,0.5);
border-right-color: hsl(0,255%,128%);
border-right-color: hsla(0,255%,128%,0.5);
border-right-color: red;
border-right-color: darkred;
border-right-color: transparent;
border-right-color: currentColor;

border-right-style

右側のボーダーの種類を指定するプロパティです

値	意味
none	罫線を引かない。（初期値）
hidden	罫線を表示しません。noneとほぼ同等
dotted	点線
dashed	破線
solid	実線
double	二重線
groove	立体的に窪んだ線
ridge	立体的に隆起した線
inset	ボックス全体が窪んだようにみえる囲み線
outset	ボックス全体が隆起したようにみえる囲み線

border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

border-right-width

右側のボーダーの太さを指定するプロパティ

値	意味
数値	罫線の太さを「px」や「em」などで指定
thin	細い
medium	中くらい（初期値）
thick	太い

border-right-width: 2px;
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;

border-style

上下左右の罫線の種類をまとめて設定するプロパティ

値	意味
none	罫線を引かない。（初期値）
hidden	罫線を表示しません。noneとほぼ同等
dotted	点線
dashed	破線
solid	実線
double	二重線
groove	立体的に窪んだ線
ridge	立体的に隆起した線
inset	ボックス全体が窪んだようにみえる囲み線
outset	ボックス全体が隆起したようにみえる囲み線

border-style: solid;
border-style: solid solid;
border-style: solid solid solid;
border-style: solid solid solid solid;

border-top

上側の罫線の「太さ」「種類」「色」を、まとめて指定するプロパティ

値	意味
border-width	ボーダーの太さ
border-style	ボーダーの種類
border-color	ボーダーの色

border-top: 2px solid #f00;
border-top: thin dotted rgb(255,0,0);
border-top: thick double hsla(0,255%,128%,0.5);

border-top-color

上側のボーダーの色を指定するプロパティ
colorと同等

border-top-color: #f00;
border-top-color: #ff0000;
border-top-color: rgb(255,0,0);
border-top-color: rgb(100%,0%,0%);
border-top-color: rgba(255,0,0,0.5);
border-top-color: rgba(100%,0%,0%,0.5);
border-top-color: hsl(0,255%,128%);
border-top-color: hsla(0,255%,128%,0.5);
border-top-color: red;
border-top-color: darkred;
border-top-color: transparent;
border-top-color: currentColor;

border-top-left-radius

左上の角丸を指定するプロパティ
数値やパーセント値で指定する。

border-top-left-radius: 10px;
border-top-left-radius: 10em;
border-top-left-radius: 10%;
border-top-left-radius: 10px 10px;
border-top-left-radius: 10em 10em;
border-top-left-radius: 10% 10%;

border-top-right-radius

右上の角丸を指定するプロパティ
数値やパーセント値で指定する。

border-top-right-radius: 10px;
border-top-right-radius: 10em;
border-top-right-radius: 10%;
border-top-right-radius: 10px 10px;
border-top-right-radius: 10em 10em;
border-top-right-radius: 10% 10%;

border-top-style

上側のボーダーの種類を指定するプロパティ

値	意味
none	罫線を引かない。（初期値）
hidden	罫線を表示しません。noneとほぼ同等
dotted	点線
dashed	破線
solid	実線
double	二重線
groove	立体的に窪んだ線
ridge	立体的に隆起した線
inset	ボックス全体が窪んだようにみえる囲み線
outset	ボックス全体が隆起したようにみえる囲み線

border-top-style: none;
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;

border-top-width

上側のボーダーの太さを指定するプロパティ

値	意味
数値	罫線の太さを「px」や「em」などで指定
thin	細い
medium	中くらい（初期値）
thick	太い

border-top-width: 2px;
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;

border-width

上下左右の罫線の太さをまとめて設定するプロパティ

値	意味
数値	罫線の太さを「px」や「em」などで指定
thin	細い
medium	中くらい（初期値）
thick	太い

border-width: 2px;
border-width: 2px 2px;
border-width: 2px 2px 2px;
border-width: 2px 2px 2px 2px;

box-decoration-break

ボックスが改行する際の表示形式を指定するプロパティ

値	意味
slice	連続ボックスとして表示（初期値）
clone	別のボックスを生成

box-decoration-break: slice;
box-decoration-break: clone;

box-shadow

ボックスに影を付けるプロパティ

値	意味
長さ	影の長さなどを「px」や「em」で指定
色	色の指定を省略するとブラウザの設定色
inset	影をボックスの内部付
none	ボックスに影を付けない（初期値）

box-shadow: 5px 5px;
box-shadow: 5px 5px 5px;
box-shadow: 5px 5px 5px 5px;
box-shadow: 5px 5px 5px 5px #f00;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5) inset;
box-shadow: 5px 5px 5px 5px #f00, 7px 7px 7px 7px #00f;

フォント

font

フォント関連プロパティの値をまとめて記述するためのプロパティ

値	意味
font-style	イタリック体、斜体
font-variant	スモールキャップ。normal、small-capsのみ指定可能。
font-weight	文字の太さ
font-size	文字の大きさ
line-height	行の高さ
font-family	フォントの種類
caption	ボタンなどのラベルに使われるフォント
icon	アイコンのラベルに使われるフォント
menu	ドロップダウンメニューやメニューリストに使われるフォント
message-box	ダイアログボックス内で使われるフォント
small-caption	小さなコントロールのラベルに使われるフォント
status-bar	ステータスバーで使われるフォント

font: italic small-caps bold 12px/1.2em "メイリオ","Meiryo",sans-serif;
font: caption;
font: icon;
font: menu;
font: message-box;
font: small-caption;
font: status-bar;

font-family

フォントの種類を指定するプロパティ

値	意味
フォント名	「メイリオ」や「Verdana」などのフォント名を指定フォント名に半角スペースが含まれている場合は引用符で囲む
serif	明朝体や、ヒゲ付きの書体で表示される
sans-serif	ゴシック体や、ヒゲなしの書体で表示される
cursive	草書体や筆記体で表示される
fantasy	装飾文字で表示される
monospace	等幅フォントで表示される

font-family: "メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif;

font-feature-settings

OpenTypeフォント機能の利用について、有効/無効を指定するプロパティ

値	意味
normal	通常のフォントを表示（初期値）
OpenTypeフォントの機能タグ値	タグの文字列と、有効/無効を示す値を指定

font-feature-settings: "dlig" 1;
font-feature-settings: "smcp" on;
font-feature-settings: "liga" off;
font-feature-settings: "palin" off;

font-kerning

欧文フォントにカーニングを適用するためのプロパティ

値	意味
auto	ブラウザの設定に従います。（初期値）
normal	通常のカーニングを適用
none	カーニングを適用しません。

font-kerning: auto;
font-kerning: normal;
font-kerning: none;

font-size

文字の大きさを指定するプロパティ

値	意味
数値	「px」や「pt」などの単位で指定。
パーセント指定	親要素のフォントサイズに対する割合。「%」か「em」を使用。emで指定した場合、親要素のフォントサイズの倍数値
larger	親要素のフォントより大きいサイズ
smaller	親要素のフォントより小さいサイズ
xx-large	mediumの2倍
x-large	mediumの1.5倍
large	mediumの1.2倍
medium	通常の大きさ（初期値）
small	mediumの0.88倍
x-small	mediumの0.75倍
xx-small	mediumの0.6倍

font-size: 12px;
font-size: 1.2em;
font-size: larger;
font-size: smaller;
font-size: xx-large;
font-size: x-large;
font-size: large;
font-size: medium;
font-size: small;
font-size: x-small;
font-size: xx-small;

font-size-adjust

フォントの種類の違いによるサイズのバラつきを調整するプロパティ

値	意味
数値	第1候補のフォントのaspect値を指定
none	aspect値によるサイズ調整をしない（初期値）

font-size-adjust: 0.5;
font-size-adjust: none;

font-stretch

文字の横幅の広さを指定するプロパティ

値	意味
ultra-condensed	normalより4段階幅が狭い
extra-condensed	normalより3段階幅が狭い
condensed	normalより2段階幅が狭い
semi-condensed	normalより1段階幅が狭い
normal	標準の幅（初期値）
semi-expanded	normalより1段階幅が広い
expanded	normalより2段階幅が広い
extra-expanded	normalより3段階幅が広い
ultra-expanded	normalより4段階幅が広い

font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

font-style

文字を斜体で表示するプロパティ

値	意味
normal	標準フォント（初期値）
italic	イタリック体フォント
oblique	斜体フォント

font-style: normal;
font-style: italic;
font-style: oblique;

font-synthesis

太字や斜体を持たないフォントファミリを、無理やり太字や斜体で表示するかどうかを指定するプロパティ

値	意味
none	太字や斜体の指定を無視して、通常のフォントフェイスで表示
weight	無理やり太字で表示
style	無理やり斜体で表示

font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: weight style;

font-variant

フォントの表示機能に関するサブプロパティの値をまとめて設定できるプロパティ

値	意味
normal	標準のフォントで表示（初期値）
small-caps	スモールキャピタルのフォントで表示フォントがスモールキャピタルに対応していない場合は、大文字を縮小したものが表示

font-variant: normal;
font-variant: inherit;

font-variant-position

Value：normal | sub | super | ordinalInitial：normalApplies to：all elementsInherited：yesPercentages：N/AMedia：visualComputed value：as specified

値	意味

/* CSS3の値 */
font-variant: normal;
font-variant: inherit;
font-variant: フォントの表示機能に関する各プロパティの値を並べます;

/* CSS2.1の値 */
font-variant: normal;
font-variant: small-caps;

font-weight

フォントの太さを指定するプロパティ

値	意味
normal	文字を通常の太さで表示「400」と同じ太さです。（初期値）
bold	文字を太く表示「700」と同じ太さです。
bolder	親要素の指定より、文字を太く表示
lighter	親要素の指定より、文字を細く表示
100、200、300、400、500、600、700、800、900	100細900太く

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
font-weight: 400;
font-weight: 700;

テキスト

hanging-punctuation

句読点を行ボックスの外側に配置するプロパティ

値	意味
none	句読点を行ボックスの外側に配置なし（初期値）
first	句読点を最初の行ボックスの外側に配置
last	句読点を最後の行ボックスの外側に配置
force-end	強制的に、句読点をすべての行ボックスの外側に配置
allow-end	必要があれば、句読点をすべての行ボックスの外側に配置

hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;
hanging-punctuation: first last;
hanging-punctuation: first last force-end;
hanging-punctuation: first last allow-end;

hyphens

行末の長い単語をハイフネーションするプロパティ

値	意味
none	ハイフネーションしない
manual	ハイフネーション（初期値）
auto	ブラウザの設定に従う

hyphens: none;
hyphens: manual;
hyphens: auto;

letter-spacing

文字の間隔を指定するプロパティ

値	意味
normal	標準の間隔に（初期値）
長さ	数値に「px」「em」「ex」などの単位をつけて指定
パーセント値	数値に「%」をつけて指定

letter-spacing: normal;
letter-spacing: 1em;
letter-spacing: -1em;
letter-spacing: 10px;
letter-spacing: -10px;
letter-spacing: 100%;
letter-spacing: -100%;

line-break

要素内での行末や行頭の禁則処理の厳密さを指定するプロパティ

値	意味
auto	ブラウザの設定に従います。（初期値）
loose	緩やかな禁則処理を使用
normal	一般的な禁則処理を使用「々」「…」「:」「;」「!」「?」は、行頭に送られない
strict	厳密な禁則処理を使用「々」「…」「:」「;」「!」「?」に加え、拗音や促音で使われる小さいカナや、「～」「-」「―」なども、行頭に送られない

line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;

overflow-wrap

単語が長すぎて1行に収まりきれない場合などに、文字のあふれを防ぐために、単語の途中で折り返しするかどうかを指定するプロパティ

値	意味
normal	改行や半角スペースなどの折り返しが可能な位置でのみ折り返し（初期値）
break-word	折り返し可能な位置がない場合は、任意の位置で折り返し

overflow-wrap: normal;
overflow-wrap: break-word;

tab-size

タブ文字の表示時の長さを指定するプロパティ

値	意味
数値	半角スペースの個数を指定

tab-size: 4;
tab-size: 6;
tab-size: 8;
tab-size: 10;

text-align

テキストの水平方向の配置を指定するプロパティ

値	意味
start	文字を行ボックスの先頭に揃えて配置（初期値）
end	文字を行ボックスの末尾に揃えて配置
left	文字を行ボックスの左端に揃えて配置
right	文字を行ボックスの右端に揃えて配置
center	文字を行ボックスの中心に配置
justify	text-justifyの指定に従う
match-parent	inheritの指定と同様です。ただし、startやendは、親要素のdirection値に従う

text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: match-parent;
text-align: "." center;
text-align: "年" center;

text-align-last

ブロック内の最終行の水平方向の配置方法を指定するプロパティ

値	意味
auto	ブラウザの設定に従います。（初期値）
start	ボックスの先頭に揃えて配置
end	ボックスの末尾に揃えて配置
left	ボックスの左端に揃えて配置
right	ボックスの右端に揃えて配置
center	ボックスの中心に配置
justify	text-justifyの指定に従う

text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

text-decoration

文字の装飾線に関するサブプロパティの値を、まとめて記述するためのショートハンドプロパティ

値	意味
underline	文字の下に装飾線
overline	文字の上に装飾線
line-through	文字に打ち消し線
blink	文字を点滅
none	文字の装飾線は表示されず、点滅なし（初期値）

text-decoration: underline #f00 solid;
text-decoration: overline red double;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;
text-decoration: none;

text-decoration-color

文字の装飾線の色を指定するプロパティ
colorと同様

text-decoration-color: #f00;
text-decoration-color: #ff0000;
text-decoration-color: rgb(255,0,0);
text-decoration-color: rgb(100%,0%,0%);
text-decoration-color: rgba(255,0,0,0.5);
text-decoration-color: rgba(100%,0%,0%,0.5);
text-decoration-color: hsl(0,255%,128%);
text-decoration-color: hsla(0,255%,128%,0.5);
text-decoration-color: red;
text-decoration-color: darkred;
text-decoration-color: transparent;
text-decoration-color: currentColor;

text-decoration-line

文字の装飾線の位置を指定するプロパティ

値	意味
none	文字の装飾線は表示なし。（初期値）
underline	文字の下に装飾線
overline	文字の上に装飾線
line-through	文字に打ち消し線

text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: underline overline;
text-decoration-line: underline overline line-through;

text-decoration-skip

装飾線を引かない対象を指定するプロパティ

値	意味
objects	オブジェクト（初期値）
spaces	空白
ink	書体の上
edges	コンテンツの開始端と終了端
none	対象なし

text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: ink;
text-decoration-skip: edges;
text-decoration-skip: none;
text-decoration-skip: objects spaces;
text-decoration-skip: objects spaces ink edges;

text-decoration-style

文字の装飾線の種類を指定するプロパティ

値	意味
solid	実線（初期値）
double	二重線
dotted	点線
dashed	破線
wavy	波線

text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

text-emphasis

text-emphasis-styleとtext-emphasis-colorを、まとめて指定するためのショートハンドプロパティ

値	意味
text-emphasis-style	強調マークの種類を指定
text-emphasis-color	強調マークの色を指定

text-emphasis: filled dot #f00;
text-emphasis: filled circle #f00;
text-emphasis: filled double-circle #f00;
text-emphasis: filled triangle #f00;
text-emphasis: filled sesame #f00;
text-emphasis: open dot #f00;
text-emphasis: open circle #f00;
text-emphasis: open double-circle #f00;
text-emphasis: open triangle #f00;
text-emphasis: open sesame #f00;
text-emphasis: "★" #f00;

text-emphasis-color

強調マークの色を指定するプロパティ
colorと同様

text-emphasis-color: #f00;
text-emphasis-color: #ff0000;
text-emphasis-color: rgb(255,0,0);
text-emphasis-color: rgb(100%,0%,0%);
text-emphasis-color: rgba(255,0,0,0.5);
text-emphasis-color: rgba(100%,0%,0%,0.5);
text-emphasis-color: hsl(0,255%,128%);
text-emphasis-color: hsla(0,255%,128%,0.5);
text-emphasis-color: red;
text-emphasis-color: darkred;
text-emphasis-color: transparent;
text-emphasis-color: currentColor;

text-emphasis-position

強調マークの位置を指定するプロパティ

値	意味
above	横書きのテキストの上に強調マークを表示
below	横書きのテキストの下に強調マークを表示
right	縦書きのテキストの右側に強調マークを表示
left	縦書きのテキストの左側に強調マークを表示

text-emphasis-position: above right;
text-emphasis-position: above left;
text-emphasis-position: below right;
text-emphasis-position: below left;

text-emphasis-style

要素内のテキストに強調マークを適用するプロパティ

値	意味
none	強調マークを付けない（初期値）
filled	強調マークを単一色で塗りつぶし
open	強調マークを中抜き
dot	小さな円を表示塗りつぶしは「•」、中抜きは「◦」
circle	大きな円を表示塗りつぶしは「●」、中抜きは「○」
double-circle	2重丸を表示塗りつぶしは「◉」、中抜きは「◎」
triangle	三角形を表示塗りつぶしは「▲」、中抜きは「△」
sesame	ゴマを表示塗りつぶしは「﹅」、中抜きは「﹆」
文字列	マークとして使用する文字を1文字指定

text-emphasis-style: none;
text-emphasis-style: filled dot;
text-emphasis-style: filled circle;
text-emphasis-style: filled double-circle;
text-emphasis-style: filled triangle;
text-emphasis-style: filled sesame;
text-emphasis-style: open dot;
text-emphasis-style: open circle;
text-emphasis-style: open double-circle;
text-emphasis-style: open triangle;
text-emphasis-style: open sesame;
text-emphasis-style: "★";

text-indent

段落の最初の行に適用されるインデントの幅を指定するプロパティ

値	意味
長さ	数値に「px」「em」「ex」などの単位をつけて指定
パーセント値	数値に「%」をつけて指定
hanging	逆側にインデントを設定
each-line	各行にインデントを設定

text-indent: 1em;
text-indent: 5%;
text-indent: 1em hanging;
text-indent: 5% each-line;

text-justify

行の両端揃えの方法を指定するプロパティ

値	意味
auto	ブラウザの設定に従います。（初期値）
inter-word	単語間の半角スペースを広げて行を両端揃えに英語や韓国語向け。
inter-ideograph	漢字やひらがなの間を広げて行を両端揃えに日本語向け。
inter-cluster	文字の間隔を広げて行を両端揃えに東南アジアの言語向け。
distribute	単語間のスペースに加え、各文字の間隔を均等に広げて行を両端揃えに日本語向け。
kashida	アラビア語の表記などで、特定の文字を引き伸ばして行を両端揃えに
none	行の両端揃えを行いません。

text-justify: auto;
text-justify: inter-word;
text-justify: inter-ideograph;
text-justify: inter-cluster;
text-justify: distribute;
text-justify: kashida;
text-justify: none;

text-shadow

文字に影を付けるプロパティ

値	意味
長さ	影の長さなどを「px」や「em」で指定
色	色の指定を省略するとブラウザの設定色
none	文字に影を付けません。（初期値）

text-shadow: 5px 5px;
text-shadow: 5px 5px 5px;
text-shadow: 5px 5px 5px #f00;
text-shadow: 5px 5px 5px rgba(0,0,0,0.5);
text-shadow: 5px 5px 5px #f00, 7px 7px 7px #00f;

text-transform

HTMLファイルに関係なく、テキストを大文字・小文字・全角で表示させるプロパティ

値	意味
none	記述した通りに表示されます。（初期値）
capitalize	単語の先頭の文字のみ大文字で表示
uppercase	すべての文字を大文字で表示
lowercase	すべての文字を小文字で表示
full-width	すべての文字を全角で表示全角の形式に対応していない文字の場合は変更されない

text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: capitalize full-width;
text-transform: uppercase full-width;
text-transform: lowercase full-width;

text-underline-position

文字の下線の配置を指定するプロパティ

値	意味
auto	ブラウザの設定に従う（初期値）
alphabetic	アルファベットのベースラインに合わせる
below	要素のコンテンツボックスの下端に合わせる
left	縦書きモードのとき、文字の左端に合わせる
right	縦書きモードのとき、文字の右端に合わせる

text-underline-position: auto;
text-underline-position: alphabetic;
text-underline-position: below;
text-underline-position: left;
text-underline-position: right;

white-space

テキスト内で連続した空白部分を1つにまとめるかどうか、行を自動的に折り返すかどうかについて指定するプロパティ

値	意味
normal	通常どおり、半角スペースや改行は1つの半角スペースにまとめて表示し、行は自動的に折り返し
pre	半角スペースや改行をそのまま表示し、行は折り返し
nowrap	半角スペースや改行は1つの半角スペースにまとめて表示し、行は折り返し
pre-wrap	半角スペースや改行をそのまま表示し、行は自動的に折り返し
pre-line	半角スペースは1つにまとめ、改行はそのまま表示し、行は自動的に折り返し

white-space: normal;
white-space: pre;
white-space: nowrap;
white-space: pre-wrap;
white-space: pre-line;

word-break

単語途中での折り返しを指定するプロパティ

値	意味
normal	アルファベットの単語の途中では折り返しなし（初期値）
keep-all	単語の途中でもハイフンを入れずに折り返し
break-all	半角スペースや改行があるときのみ折り返し

word-break: normal;
word-break: keep-all;
word-break: break-all;

word-spacing

単語間の間隔を指定するプロパティ

値	意味
normal	標準の間隔に（初期値）
長さ	数値に「px」「em」「ex」などの単位をつけて指定
パーセント値	数値に「%」をつけて指定

word-spacing: normal;
word-spacing: 1em;
word-spacing: -1em;
word-spacing: 10px;
word-spacing: -10px;
word-spacing: 100%;
word-spacing: -100%;

まとめ

プロパティの一部を紹介しました。
全てを完全に覚える必要はなく
プロパティと値の指定の仕方を覚えておき
適切なプロパティに変更できるように
検索の仕方を押さえておきましょう。

明日もプロパティの続きを行います。

君がエンジニアになるまであと84日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython