訓練日誌2024/1/20、23(CSSについて)
目次
- リセットCSSについて
- セレクタ得点について
- Chrome検証ツールについて
- バックグランド系プロパティ
- テキスト系プロパティ
- フォント系プロパティ
- リスト系プロパティ
リセットCSSについて
ブラウザに初期設定されているスタイルシートを消して
自分の希望の初期設定に指示するCSSのこと
フォント、文字カラー、文字間隔、サイズなどの設定をする
※文字カラーは＃3333を使用することが多い
（黒は目が疲れるのでダークグレーの色）
ネット上に多く使用できるCSSがあるため、自分の扱いやすいものを使用する
（リセットCSS内をいじることはあまりないが、初期設定のデザインを使用したい時にいじることがある）
多くの企業はどのリセットCSSを使用するか決まっている
セレクタ得点について
セレクタには優先順位があり点数計算をして高得点のものが最優先される
同じ得点の場合は後ろに書いてあるものが採用される
点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがあるため
意図したスタイルにならない時は点数を確認すること
Chrome検証ツールについて
ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効
また、スマートフォンやタブレットでの表示型式を確認することもできる
検証ツールは[Webページを右クリック→検証]で見ることが出来る
上段がHTML、下段がCSS
四角と矢印のアイコンをクリックしてWebページのコードを見たい箇所にカーソルを合わせると詳細が出る
クリックすると検証内に詳細が表示される
検証内で文字の大きさや色、フォント変更など試しに変更してみることが出来る
HTMLも書き換えて見ることが可能（右クリック→Edit as HTMLを選択）
しかしあくまで検証なので、保存をすることは出来ない
実際に変更希望の時は大元のファイル内を変える必要がある
検証をコピーして大元ファイルにペーストするのもOK
コードを書き始める際、miやdreamweverなどを使用して書いてもいいし
最初から検証に打ち込んでコピーしてmiなどに貼り付けて行っても良い
バックグランド系プロパティ
基本の書き方
例）
background: url('images/hamaya.png') brack no-repeat;
background-size: 100px;
background-attachment: fixed;- background-color プロパティ（背景色）
背景色の範囲は「コンテンツ＋パディング＋ボーダー」の領域が対象
背景色を指定する場合は同時に文字色も指定するように
transparent（初期値）：背景が透明になる
色値：背景の色を指定
ex)background-color: black; - background-attachment プロパティ（背景画像の位置）
背景画像をスクロールするかどうかを指定する
fixed：背景画像の位置が固定されスクロールしても動かなくなる
scroll：スクロールすると背景画像も移動する
ex)background-attachment: scroll; - background-image プロパティ（背景画像のファイル）
背景画像を指定する
背景画像は、body タグだけでなく、p タグ、div タグ、span タグなどの要素にも使用できる
背景画像は、「url(‘ファイルのパス名’)」で背景画像ファイルのパス名を指定する
none（初期値）を指定すると背景画像を使用しないことを示す
ex)background-images: none; - background-repeat プロパティ（背景画像の繰り返し）
背景画像の繰り返しの仕方を指定する
repeat（初期値）：背景画像を繰り返して表示
repeat-x：背景画像を横方向のみ繰り返して表示
repeat-y：背景画像を縦方向のみ繰り返して表示
no-repeat：背景画像は 1 回だけの表示となり繰り返さない
ex)background-repeat: no-repeat; - background プロパティ（背景の一括指定）
上記４つ（background-color プロパティ、background-attachment プロパティ、background-image プロパティ、background-repeat プロパティ）の値を一括して指定する
背景一括指定は、「背景色・背景画像の位置・背景画像ファイル・背景画像の繰り返し」を順不同でスペースで区切って指定する - background-size プロパティ（背景画像のサイズ）
背景画像のサイズを指定
auto（初期値）：自動的に算出する
contain：縦横比は保持して背景領域に収まるサイズになるように背景画像を拡大縮小する
cover：縦横比は保持して背景領域を完全に覆うサイズになるように背景画像を拡大縮小する（縦横どちらかが切れてしまう可能性あり）
幅・高さ：背景画像の幅と高さをスペースで区切って指定する
パーセンテージ：背景画像の幅と高さ（パーセンテージ）をスペースで区切って指定する
ex)background-size: 100px - background-position プロパティ（背景画像の表示開始位置）
背景画像の表示開始位置を指定する
背景画像の表示開始位置は、top、bottom、left、right、center、百分率（%）、ピクセル値（px）などで指定する
百分率やピクセル値を使用する場合は、水平方向、垂直方向の順で指定する
初期値は、0% で水平方向、垂直方向のどちらかを指定しなかった場合の初期値は、center になる
詳細こちらをクリックhttps://html-css.hamaya2020.com/lesson-6.html#L6-2
テキスト系プロパティ
- color プロパティ（文字の色）
文字の色を指定する
ex)color: brack; - opacityプロパティ（透明度）
要素の透明度を指定する
透明度は、0（完全に透明）～1（完全に不透明）の範囲で指定する
透明効果は指定したオブジェクト全体（親要素に指定した時は、配下の子要素にも適用）に適用される
透明効果をオブジェクト全体ではなく背景色やボーダー色などに個別に適用したい時は、rgba 関数を使用して色を指定する
ex)opacity: 0.6; ←少し透明 - text-align プロパティ（文字の配置）
ブロック要素内の文字の配置位置や均等割付を指定する
start（初期値）：ボックスの始端に揃えることを指定
end：ボックスの終端に揃えることを指定
left：ボックスの左端に揃えることを指定
right：ボックスの右端に揃えることを指定
center：ボックスの中央に指定することを指定
justify：ボックス内で均等割り付けをすることを指定（サイズに合うように文字間を変えて広げたり縮めたりする）
※但し、最後の行は「left」を指定した場合と同じ挙動になる - text-decoration-color プロパティ（文字飾りの色）
文字飾りに対する色を指定する
文字飾りの色は、色値を指定する
初期値は、currentcolor - text-decoration-line プロパティ（文字飾りの表示位置）
文字飾りに対する表示位置を指定する
none（初期値）：文字飾りをなしにする
underline：下線を引くことを指定
overline：上線を引くことを指定
line-through：取り消し線を引くことを指定 - text-decoration-style プロパティ（文字飾りの線種）
文字飾りに対する線種を指定する
solid（初期値）：単独線を引くことを指定
double：二重線を引くことを指定
dotted：点線を引くことを指定
dashed：破線を引くことを指定
wavy：波線を引くことを指定
line-through double：二重の取り消し線
line-through dashed：点線の取り消し線
line-through dotted：点の取り消し線
line-through double red：赤色の二重の取り消し線
underline wavy blue：青色の波線
underline overline 6px skyblue：文字の上下に水色の太線 - text-decoration-thickness プロパティ（文字飾りの線の太さ）
文字飾りに対する線の太さを指定する
文字飾りの線の太さは、百分率（%）、ピクセル値（px）などで指定
初期値は、auto でブラウザが適切な太さを選択する
また、from-font を指定するとフォントファイルに設定されている推奨値が使用され、フォントファイルに推奨値が設定されていない場合は、auto と同様にブラウザが適切な太さを選択する
※（2023年11月22日現在）Safari ブラウザでは、百分率（%）指定ができません。 - text-decoration プロパティ（文字の飾りの一括指定）
text-decoration-color プロパティ、text-decoration-line プロパティ、text-decoration-style プロパティ、text-decoration-thickness プロパティの指定値を任意の順序でスペースで区切って指定する - text-shadow プロパティ（文字の影）
文字に対して 1 つまたは複数の影を指定する
文字の影値は、「水平方向の影のオフセット距離・垂直方向の影のオフセット距離・ぼかしの半径・色」の順でスペースで区切って指定
文字の影値は、複数指定することができ複数指定する時はカンマ（,）で区切って指定します。文字の影値の初期値は「none」で影なしとなる
文字の影値の各値は、以下のルールに従って解釈される
水平方向の影のオフセット距離正の値を指定すると右へ、負の値を指定すると左に影が移動する
垂直方向の影のオフセット距離正の値を指定すると下へ、負の値を指定すると上に影が移動する
ぼかしの半径影のぼかしの半径を指定
省略時は、ゼロ（0）になります。色影の色を指定
省略時はブラウザの規定値が使用される
ex)text-shadow: 2px 2px 0px red;
詳細はこちらhttps://html-css.hamaya2020.com/lesson-5.html#L5-2
フォント系プロパティ
- font-family プロパティ（フォントの種類）
フォントの種類を指定する
フォントのファミリィは、カンマ（,）で区切って複数の候補を指定することができる
複数の候補が指定されている時は、表示環境で使用可能なものを先頭から順に選択する
指定したフォントが表示環境にインストールされていない場合はブラウザの規定値が使用される
“フォント名””ＭＳ ゴシック” や “ＭＳ 明朝” のようにフォント名で指定
フォント名にスペースが含まれている場合はダブルクォーテーション（”）またはシングルクォーテーション（’）で囲んで指定
sans-serif：ゴシック系のフォントを指定
serif：明朝系のフォントを指定
cursive：筆記体・草書体のフォントを指定
fantasy：装飾的なフォントを指定 ※ブラウザによってかなり印象が変わるフォントになるので注意が必要
monospace：等幅フォントを指定
Web ページの表示は、端末にインストールされているフォントの種類によって表示型式が変わってしまうことがある
表示形式を端末に依存しないようにするためには Web フォントの利用が考えられる
無料の Web フォントとして Google Fonts があるので活用しよう - 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：単語の区切りで改行するが、場合によっては単語の途中でも改行する
ex) word-break: break-word; - tab-size プロパティ（タブ文字の表示幅指定）
詳しくはこちらhttps://html-css.hamaya2020.com/lesson-5.html#L5-2
リスト系プロパティ
- 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.）で表示
jk-ideographic：マーカーを漢数字（一、二、三、）で表示
hiragana：マーカーをひらがなのあいうえお順（あ、い、う、）で表示
katakana：マーカーをカタカナのアイウエオ順（ア、イ、ウ、）で表示
hiragana-iroha：マーカーをひらがなのいろはにほへと順（い、ろ、は、）で表示
katakana-iroha：マーカーをカタカナのイロハニホヘト順（イ、ロ、ハ、）で表示
※どのブラウザでも使用できるかを「can i use」で検索する
can i useでブラウザはChrom・edge・Safari・fireBox・Operaの５つ、
モバイルはSafari・Google・Samsungの３つを見る - 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 プロパティの値が優先される
