セレクタの得点
CSSには誰の指示が一番強いかを決めるルールがある → セレクタの優先順位
（指示が重複することがある）
セレクタには優先順位があり点数計算をして高得点のものが採用される
同じ得点の場合は後ろに書いてあるものが採用される
参照：L3.8 セレクタの得点
L6.2 バックグランド系プロパティ
⋆background-color: 背景色;
⋆background-attachment: 背景画像の位置;
⋆background-image: 背景画像ファイル;
⋆background-repeat: 背景画像の繰り返し;
⋆background: 背景一括指定;
⋆background-position: 背景画像の表示開始位置;
L5.2 テキスト系プロパティ
⋆color: 文字色;
⋆opacity: 透明度; ・・・ 背景も文字も透明になるので注意
⋆text-align: 配置位置;
⋆text-decoration-color: 文字飾りの色;
⋆text-decoration-line: 文字飾りの表示位置;
⋆text-decoration-style: 文字飾りの線種;
⋆text-decoration-thickness: 文字飾りの線の太さ;
⋆text-decoration: 文字飾り;
-webkit-text-decoration: 文字飾り; /* ベンダープレフィックス指定 */
⋆text-shadow: （文字の影値）;
L5.3 フォント系プロパティ
⋆font-family: フォントファミリィ; ・・・ フォントの種類を指定
Web ページの表示は、端末にインストールされているフォントの種類によって表示型式が変わってしまうことがあります。表示形式を端末に依存しないようにするためには Web フォントの利用が考えられます。無料の Web フォントとして Google Fonts がありますので活用を考えてみましょう。
参照：P11.3.1 Google Fonts-1
https://html-css.hamaya2020.com/webparts-11.html#P11-3-1
ゴシック体
font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
明朝体
font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
丸文字
font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
参照サイト：https://schema-design.net/blog/20230815/
⋆font-size: フォントサイズ;
⋆font-weight: フォントの太さ;
⋆font-style: フォントスタイル;
⋆line-height: 行の高さ;
⋆font: フォント一括指定;
⋆white-space: 空白・改行の表示方法;
⋆word-wrap: 単語の途中での改行方法;
⋆word-break: テキストや単語の改行方法;
おすすめ： word-wrap:break-all:
参照：トップページ 付録（Appendix） A3 知恵袋（Tips） 文字の折り返し
html-css.hamaya2020.com
⋆tab-size: タブ文字の表示幅;L5.4 リスト系プロパティ
⋆list-style-type: リストマーカーの種類;
⋆list-style-image: リストマーカーの画像ファイルのパス名;
⋆list-style-position: リストマーカーの表示位置;
⋆list-style: リストスタイル一括指定;
L4.2 レイアウト系プロパティ
⋆width: 内容の幅; ・・・ 使用すると画面が小さいとき、横スクロールがでてしまうので、あまり使用しない
⋆max-width: 幅の最大値; ・・・ よく使用される、
⋆min-width: 幅の最小値; ・・・ 使用頻度少な目、会社のロゴなど
⋆height: 内容の高さ;
⋆max-height: 高さの最大値;
⋆min-height: 高さの最小値;
⋆float: 回り込みの方向; ・・・ 写真を横並びに配置する、昔よく使用されていた、現在はflexレイアウトを使用することが多い
⋆clear: 解除の方向; ・・・ 回り込みの解除の指定
⋆display: 要素の表示方法; ・・・ 箱、文字を変えることができる、flexがよく使用される
参照：L3.3.2 ボックスモデルの表示ルール
https://html-css.hamaya2020.com/lesson-3.html#L3-3
⋆overflow:ボックスからあふれた内容の処理方法;Lesson-8 フレックスレイアウトを活用しましょう
フレックスレイアウトとは、Flexible Box Layout Module のことで、その名の通りフレキシブルで簡単にレイアウトが組めます。
display: コンテナ属性;
display: flex;
flex-wrap: wrap-reverse;
Chrome検証ツール
Chrome検証ツールは、ウェブサイトの裏側を見るための、Chromeブラウザに標準搭載された非常に強力なツールです。ウェブページの構造（HTML）、デザイン（CSS）、動作（JavaScript）、ネットワークの状況、パフォーマンスなどを詳しく調べることができます。
要素の調査と編集: ウェブページ上の特定の要素（テキスト、画像、ボタンなど）がどのようにHTMLやCSSで記述されているかを確認したり、その場でCSSを編集して見た目を試したりできます。
⋆Chromeでウェブページを開いた状態で、右クリック → 「検証」 を選択
⋆セレクトモード ・・・ ページ内の検証したい要素（テキストや画像など）を選択する方法
要素の選択に使用するのが「セレクトモード」です。セレクトモードに切り替えるには、デベロッパーツールの左上にあるセレクトアイコンをクリックします。アイコンが青色になっている状態がセレクトモード起動中です。セレクトモードの状態で、ブラウザ側を一度クリックしてアクティブにし、ページ上でマウスカーソルを動かしてみましょう。カーソルが合わさった要素に色が付き、デベロッパーツール側のHTMLソースもハイライト表示されます。
参照：Google Chromeデベロッパーツールの基本的な使い方をわかりやすく解説
https://willcloud.jp/knowhow/dev-tools-01/
⋆console ・・・ 画像がない、CSSがない などのエラーの確認ができる
