font-family
- フォントファミリー名は引用符で囲い、総称フォント名は引用符では囲わない
- 各フォントファミリー名をカンマ（,）で区切って記述
- font-familyに複数のフォントを指定した場合、前に書いたフォントから優先的に適用される
- OS毎にフォント名を指定する
- 指定したフォントが全て表示されなかった場合に備えて、最後に総称フォント（ゴシック体や明朝体）を指定しておく
- 英語部分（半角英数字）に欧文フォント、日本語部分は日本語フォントを指定したい場合は、先に欧文フォントを指定する
おすすめのfont-family指定例
ゴシック体の設定例
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;明朝体の設定例
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;HTMLメール用の設定例
font-family: "Meiryo UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN","Yu Gothic UI", "MS PGothic", sans-serif;※Webフォントの源ノ角明朝は表示が遅い
font-size
font-sizeの％指定は、ユーザーのブラウザデフォルト100%に対しての％。
最小サイズには限界がある。
フォントサイズが小さすぎると、モバイルフレンドリーテストで指摘されるので注意！
px指定は絶対値。%指定は相対値と考えると、ユーザビリティ的には%かな？
-weight,-style
font-weightは「bold」のみ、font-styleは「italic」のみ覚えとけばOK。他変わらないから。
line-height
行の高さを指定する、line-hightは相対的な書き方がおすすめ「ex) line-hight: 3.0;」
この3.0とは？→文字の高さを１として、上下に1文字分ずつという意味。
例） line-hight: 1.8; なら上下に0.4ずつ、行間が空く。
背景
画像はHTMLか？CSSか？
imgは文法なので意味を持つが、cssで読み込んだ画像は見た目なので意味を持たない。SEO等を考えて、画像はどちらで掲載するのかよく考えて使用する。
backgroundは指定しないと、領域内で繰り返しがデフォ。
pタグの中にcssで画像してする場合は、height指定しないと、pタグのエリアだけの高さのない画像になるので注意！
background書き方例
backgroundは、プロパティをスペースで区切って一括指定可能。よく使う書き方。
background:#fff url("images/sample_img001.jpg") no-repeat top left fixed;コメントアウト
HTMLやCSS、PHPのプログラムでコメントアウトする方法など↓
【初心者向け】 HTMLのコメントアウトの書き方や注意点を解説！
コメントを書く際、ある程度ルールを決めておいたほうが、見やすく、活用しやすい。
TODO:暫定処理のため、後で修正する
NG:○○の場合エラーになる（未解決）例えば、「やることリストはTODOを付ける」というルールを決めた場合、ひととおりコードが完成した後で、「TODO」をキーワードにして検索することで、作業し忘れがないか確認できる。
本日のその他TIPS
idとclassは数字からは始められない。
⇒〇「#abc01」、×「#01abc」
命名規則参考サイト
新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]
文字色と背景色が同一だともちろん読めない。検索エンジンから「spam行為」とみなされ、ペナルティで半年以上検索上位に入らなくなる。意図的でなくとも、非常に厳しく判定されるので注意すること！！
ショートハンドに関しては、よく使うものと使わないものがある。
例）fontはあまりショートハンドしない。background-colorとかはよく使う。
