学科 CSS基礎②

テキスト系プロパティ

1.colorプロパティ（文字の色）

color: 文字色（色値、#ff0000 等）;

2.opacityプロパティ（透明度）

opacity: 透明度（0～1）;

〇背景色やボーダーに適用する場合はrgba関数

例1）透明度がない場合
background: white;
border: 1px #ccc solid;
opacity: 1;

例2）透明度0.6の場合
background: white;
border: 1px #ccc solid;
opacity: 1.6;

3.text-alignプロパティ（文字の配置）

text-align: 文字の配置位置;
start（初期値）始端を揃える
end終端を揃える
left左端を揃える
right右端を揃える
center中央に揃える
justify均等に配置、最後の行は「left」を指定した場合と同じ

4.text-decoration-colorプロパティ（文字の飾りの色）

text-decoration-color: 文字飾りの色の色値（#ff0000 等）;

〇初期値は「currentcoler」

5.text-decoration-linプロパティ（文字飾りの色の位置）

text-decoration-line: 文字飾りの表示指定;
none（初期値）文字飾り無し
underline下線
overline上線
line-through取り消し線

6.text-decoration-styleプロパティ（文字飾りの線種）

text-decoration-style: 文字飾りの線種;
solid（初期値）単独線
double二重線
dotted点線
dashed破線
wavy波線

7.text-decoration-thicknessプロパティ（文字飾りの線の太さ）

text-decoration-thickness: 文字飾りの線の太さ（百分率（％）、px）;

〇初期値は「auto」、safariでは表示できない

8.text-decorationプロパティ（文字飾りの一括指定）

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

9.text-shadowプロパティ（文字の影）

text-shadow: 文字の影値;

例）
text-shadow: 2px 2px 0px red;
text-shadow: -2px -2px red;
水平方向のオフセット距離正で右、負で左方向に影
垂直方向のオフセット距離正で下、負で上方向に影
色色指定、省略で規定値

フォント系プロパティ

1.font-familyプロパティ（フォントの種類）

font-family: フォントファミリー;
“フォント名”“MS ゴシック”等のフォント名
sans-serifゴシック系フォント
serif明朝系フォント
cursive筆記体、草書体
fantasy装飾的なフォント
monospace等幅フォント

無料のWebフォント：https://fonts.google.com/?subset=japanese&noto.script=Hira

２.font-sizeプロパティ（フォントのサイズ）

font-size: フォントサイズ（px,em,rem,%）;

3.font-weightプロパティ（フォントの太さ）

font-weight: 太さ;
normal（初期値）標準
bold太字
lighter相対的に親要素より一段細い
bolder相対的に親要素より一段太い
数値1～1000で指定
例）normalが400、boldが700

4.font-styleプロパティ（フォントスタイル）

font-style:フォントスタイル;
normal（初期値）標準
itaricイタリック体
oblique斜体

５.lin-heightプロパティ（行の高さ）

line-height: 行の高さ;
normal（初期値）ブラウザ判断
数値に単位を付けてpx,em,%　モニタの解像度で変化する
数値のみ数値のみを指定でその数値にフォントのサイズを掛けた値が行の高さになる
例） 1.5 → 150% 、 1.5em と指定した場合と同じ

6.fontプロパティ（フォントの一括指定）

font: フォントの一括指定;

〇行の高さを指定する場合「/行の高さ」
　font プロパティを使用するとフォント関連の値は一旦リセットされる
　省略した値は親要素を継承するのではなく初期値に戻される

7.weight-spaceプロパティ（空白、改行の指定方法）

white-space: 空白、改行の表示方法;
指定値ホワイトスペース改行自動的な改行
normal（初期値）まとめるまとめるする
nowrapまとめるまとめるしない
preそのままそのまましない
pre-wrapそのままそのままする
pre-lineまとめるそのままする

8.word-wrapプロパティ（単語の途中での改行方法）

word-wrap: 単語の途中での改行方法;
noemal（初期値）改行なし、場合によって表示範囲を拡大
break-word改行あり

9.word-breakプロパティ（テキストや単語の改行方法）

word-break: テキストや単語の改行方法;
normal（初期値）それぞれの言語のルールに則る
keap-all単語途中での改行なし
break-all単語途中での改行あり
breakword単語区切りでの改行、場合によっては単語の途中でも改行

10.tab-sizeプロパティ（タブ文字の表示幅指定）

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

〇空白文字の文字数、pxで指定（初期値は8）