バックグランド系プロパティ
- background-color プロパティ 背景色
- background-attachment プロパティ 背景画像の位置
fixed背景画像の位置が固定されスクロールしても動かない。
scrollスクロールすると背景画像も移動する。 - background-image プロパティ 背景画像のファイル
例 background: url(‘images/hamaya.png’)；
body タグだけでなく、p タグ、div タグ、span タグなどの要素にも使用できる。 - background-repeat プロパティ 背景画像の繰り返し
repeat（初期値）背景画像を繰り返す。
repeat-x背景画像を横方向のみ繰り返す。
repeat-y背景画像を縦方向のみ繰り返す。
no-repeat背景画像は 1 回だけの表示となり繰り返さない。 - background プロパティ 背景の一括指定
「背景色・背景画像の位置・背景画像ファイル・背景画像の繰り返し」を順不同でスペースで区切って指定する。 - background-size プロパティ 背景画像のサイズ
auto（初期値）自動的に算出します。
contain縦横比は保持して背景領域に収まるサイズになるように背景画像を拡大縮小する。
cover縦横比は保持して背景領域を完全に覆うサイズになるように背景画像を拡大縮小する。
幅・高さ背景画像の幅と高さをスペースで区切って指定。
パーセンテージ背景画像の幅と高さ（パーセンテージ）をスペースで区切って指定。 - background-position プロパティ（背景画像の表示開始位置）
背景画像の表示開始位置は、top、bottom、left、right、center、百分率（%）、ピクセル値（px）などで指定します。百分率やピクセル値を使用する場合は、水平方向、垂直方向の順で指定します。
初期値は、0% で水平方向、垂直方向のどちらかを指定しなかった場合の初期値は、center 。
テキスト系プロパティ
- color プロパティ 文字の色指定
- opacity プロパティ 透明度 0～1
- text-align プロパティ 文字の配置
start（初期値）ボックスの始端に揃えることを指定。
endボックスの終端に揃えることを指定。
leftボックスの左端に揃えることを指定。
rightボックスの右端に揃えることを指定。
centerボックスの中央に指定することを指定。
justifyボックス内で均等割り付けをすることを指定。但し、最後の行は「left」を指定した場合と同じ挙動になります。 - text-decoration-color プロパティ 文字飾りの色
- text-decoration-style プロパティ 文字飾りの線種
solid（初期値）単独線を引くことを指定。
double二重線を引くことを指定。
dotted点線を引くことを指定。
dashed破線を引くことを指定。
wavy波線を引くことを指定。 - text-decoration-line プロパティ 文字飾りの線（表示位置）
none 初期値。
underline下線を引くことを指定。
overline上線を引くことを指定。
line-through取り消し線を引くことを指定。 - text-decoration-thickness プロパティ 文字飾りの線の太さ
文字飾りに対する線の太さを指定。
文字飾りの線の太さは、百分率（%）、ピクセル値（px）などで指定。
初期値は、auto でブラウザが適切な太さを選択。また、from-font を指定するとフォントファイルに設定されている推奨値が使用され、フォントファイルに推奨値が設定されていない場合は、auto と同様にブラウザが適切な太さを選択。 - text-decoration プロパティ 文字の飾りの一括指定
- text-shadow プロパティ 文字の影
文字に対して 1 つまたは複数の影を指定します。
「水平方向の影のオフセット距離・垂直方向の影のオフセット距離・ぼかしの半径・色」の順でスペースで区切って指定します。文字の影値は、複数指定することができ複数指定する時はカンマ（,）で区切って指定します。文字の影値の初期値は「none」で影なしとなります。
水平方向の影のオフセット距離 正の値を指定すると右へ、負の値を指定すると左に影が移動。
垂直方向の影のオフセット距離 正の値を指定すると下へ、負の値を指定すると上に影が移動。
ぼかしの半径影のぼかしの半径を指定。
省略時は、ゼロ（0）になる。色影の色を指定。省略時はブラウザの規定値が使用される。
フォント系プロパティ
- font-family プロパティ フォントの種類
フォントの種類を指定。何種類か入力する。
フォントのファミリーは、カンマ（,）で区切って複数の候補を指定することができる。
複数の候補が指定されている時は、表示環境で使用可能なものを先頭から順に選択。
指定したフォントが表示環境にインストールされていない場合はブラウザの規定値が使用される。
フォントのファミリーは、”フォント名””ＭＳ ゴシック” や “ＭＳ 明朝” のようにフォント名で指定します。フォント名にスペースが含まれている場合はダブルクォーテーション（”）またはシングルクォーテーション（’）で囲んで指定。
sans-serif ゴシック系のフォントを指定。
serif 明朝系のフォントを指定。
cursive 筆記体・草書体のフォントを指定。
fantasy装飾的なフォントを指定。
monospace等幅フォントを指定。
Web ページの表示は、端末にインストールされているフォントの種類によって表示型式が変わってしまうことがあり、無料の Web フォントとして Google Fonts を使用します。
HTMLのheadやCSSに貼り付けて読み込ませます。 - font-size プロパティ（フォントのサイズ）
フォントサイズは、px、em、rem、% などの単位を付けた数値で指定。 - font-weight プロパティ（フォントの太さ）
normal（初期値）標準の太さ
bold太字を指定。
lighter相対的に親要素より一段階細いフォントを指定。
bolder相対的に親要素より一段階太いフォントを指定。
数値1 ～ 1000 の値が指定でき、数値が大きいほど太いフォント。
normal は 400、bold は 700 に相当。 - font-style プロパティ フォントのスタイル
normal（初期値）標準のフォントを指定。
italic イタリック体のフォントを指定。
oblique 斜体のフォントを指定。 - line-height プロパティ 行の高さ
行の高さを指定。
normal（初期値）ブラウザが判断して行の高さ決定します。
数値に単位を付けて指定数値に px、em、% などの単位をつけて指定。
em とはフォントの高さを 1 とする単位。
数値のみで指定単位をつけずに数値のみを指定すると、その数値にフォントのサイズを掛けた値が行の高さとなります。例えば 1.5 と指定すると 150% や 1.5em と指定した場合と同じになります。行の高さを指定した場合は、行の高さとフォントの高さの差分の半分がフォントの上下に均等に割り当てられます。 - font プロパティ フォント一括指定
font-style プロパティ、font-weight プロパティ、font-size プロパティ、line-height プロパティ、font-family プロパティの値を一括で指定します。
フォント一括指定は、「フォントスタイル・フォントの太さ・フォントサイズ・/行の高さ・フォントファミリー」をスペースで区切って指定します。フォントスタイルとフォントの太さは、順不同で省略可能です。フォントサイズ・フォントファミリーは、省略することはできません。
行の高さを指定する時は前にスラッシュ（/）を付加します。font プロパティを使用するとフォント関連の値は一旦リセットされますので省略した値は親要素を継承するのではなく初期値に戻されます。 - white-space プロパティ 空白・改行の表示方）
normal（初期値）ソース中のホワイトスペース・改行を一つの半角スペースにまとめて表示します。自動的な改行を行います。
nowrapソース中のホワイトスペース・改行を一つの半角スペースにまとめて表示します。自動的な改行を行いません。
preソース中のホワイトスペース・改行をそのまま表示します。自動的な改行を行いません。
pre-wrapソース中のホワイトスペース・改行をそのまま表示します。自動的な改行を行います。
pre-lineソース中のホワイトスペースを一つの半角スペースにまとめて表示しますが、改行はそのまま表示します。自動的な改行を行います。 - word-wrap プロパティ 単語の途中での改行方法
normal（初期値）単語の途中では改行を行わなく、必要に応じて表示範囲を拡大します。break-word必要に応じて単語の途中で改行します。 - word-break プロパティ テキストや単語の改行方法
normal（初期値）言語の習慣的な規則に従って改行します。。keep-all単語の途中では改行しません。break-all単語の途中でも改行します。break-word単語の区切りで改行しますが、場合によっては単語の途中でも改行します。 - tab-size プロパティ（タブ文字の表示幅指定）
タブ文字の表示幅は、空白文字の文字数やピクセル値（px）などで指定します。初期値は、8（空白文字 8 文字）です。
リスト系プロパティ
- list-style-type プロパティ リストマーカーの種類
noneマーカーを表示しません。
disculマーカーを黒丸で表示します。
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マーカーをカタカナのイロハニホヘト順（イ、ロ、ハ、）で表示します。 - list-style-image プロパティ リストマーカーの画像
リストマーカーの画像ファイルのパス名は「url(‘画像ファイルのパス名’)」で指定します。
none は、初期値であり画像ファイルを指定しないことを示すします。表示する画像の拡大縮小は行いませんので、適なサイズの画像を用意する必要があります。 - list-style-position プロパティ リストマーカーの位置
outside（初期値）マーカーがリスト内容の領域の外側に表示され、マーカー以外の部分がインデント（字下げ）された形になります。
insideマーカーがリスト内容の領域の内側に表示され、マーカーとマーカー以外の部分の高さが揃います。 - list-style プロパティ（リストマーカーの一括指定）
list-style-type プロパティ、 list-style-image プロパティ、 list-style-position プロパティのうち、指定する値を任意の順序でスペースで区切って指定します。
list-style-type プロパティと list-style-image プロパティの値を同時に指定した場合には、list-style-image プロパティの値が優先されます。
コメント