1. CSSファイルの先頭ではUTF-8の文字コードを指定

@charset "utf-8";

2. 細かい定義の前にまず、全体で共有する箇所を定義していく。

例えば・・・・
【フォントの種類】

●WinやMacなどのOSによって、入ってるフォントが違うので、
　それぞれ指定すること。

●基本的に複数指定すること。

●英語フォントを先にかくこと。
　→サイト内の英文は、英語フォントが反映される

●フォント名内に半角スペースや全角文字が含まれる場合
　シングルクオテーションで囲むこと。

●最後は総称フォントを指定すること。
　（ゴシック体ではsans-serif、明朝体はserif。どちらか指定）

●font-familyは基本的にbodyに指定する。

body {
font-family:  "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",
"メイリオ",Meiryo,"ＭＳ Ｐゴシック",Arial,Verdana,sans-serif
}

【フォントカラー】

●Webデザインでは、あまり「真っ黒（#000000）」は使わない。
　黒は、#222222 〜  #333333付近を使う。

【ベースとなるフォントサイズ】
まずは３種類のおさらい。

remは、CSS3から新しく追加された単位。
IE８以下のブラウザには対応していない。

レガシーブラウザを除いたコーディングであれば、
remを使うのが一般的。
remを使う際は、まずhtml要素のフォントサイズを10pxへ変更する。

主要ブラウザのデフォルトフォントサイズは、「16px」
　　　　　↓
16px  ×  62.5 % = 10px

html { font-size:62.5%; }

こうすることで、html以下要素では
「1.2rem = 12px」のように直感的にわかりやすくなる。

【ベースとなる行の高さ】
line-heightで指定できる値は４種類ある。

●normal・・・初期値
●単位・・・px,em,remなど単位つきの値

●割合（%）・・・要素のfont-sizeを基準にした割合。
　　　　　　　　　font-sizeが10pxで、line-heightが150%だと、
                                  行の高さは15pxとなる。
　　　　　　　　　基準となる要素が変わらない為、
　　　　　　　　　子要素のfont-sizeが変わる場合、
　　　　　　　　　都度line-heightも指定しなおさなければ、
　　　　　　　　　行の高さは同じとなってしまう。

●数値のみ・・・基準となるfont-sizeにこの数値をかけた値が行の高さ。
　　　　　　　　子要素に引き継がれると基準がその子要素となるので、
　　　　　　　　都度line-heightを指定しなおす必要がない。

.content {
font-size: 10px;
line-height: 1.5; /******  10 × 1.5 = 行の高さは15px  ******/
}

h1 {
font-size: 24px; /******  24 × 1.5 = 行の高さは36px  ******/
}

p {
font-size: 14px; /******  14 × 1.5 = 行の高さは21px  ******/
}

【リンクテキストデザイン】
例えば・・・リンクの下線を無しにする、等。

a:link, a:visited, a:hover, a:active{
    color: #d03c56;
    text-decoration: none;
}

※ a:activeわかりにくければここ↓
https://hail2u.net/pub/test/376.html

【背景色】
上から順番を守って記述すること！

body {
    background: url(path2image) no-repeat center center /cover fixed;
}


<!-- color は、初期値の透明。画像は、path2imageを使う。画像は、繰り返さない。
位置は、センター。サイズは、cover (縦横比は保持して、背景領域を完全に覆う最小サイズ)。
スクロールは、fixed（固定）。-->

　・ショートハンドの場合、プロパティは「background」と書く。
　・sizeだけは、positionの後に書く場合「/」がいる。

【box-sizing】

*, *::before, *::after{
 box-sizing: boder-box;
}

box-sizingの初期値は「content-box」で、
paddingやboderの領域は、widthに含まれない。

boder-boxにすると、
widthとheightの指定は、paddingとboderを含めて指定できる。

box-sizing: border-boxを使う際は、古いバージョンのブラウザに対応させるために、念のためベンダープレフィックスをつけておくこと。

＜ベンダープレフィックスとは＞
プレフィックスとは接頭辞という意味。機能を実装する為に、ブラウザの種類ごとに指定する。

 *, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}