HTML5 & CSS3備忘録

HTML5とCSS3についての備忘録

HTML5

HTML5の思想

• HTML5では見栄えに関する設定はすべてCSSに任せることになった→　HTML5準拠のためにはCSSは必須
• 例：tableのcellpaddingやcellspacingはHTML5では非推奨
• cellspacing１はtable-collaspeで代用できる

CSS3

複数classを適用する

• class指定時にスペースで繋ぐ

IMEモードについて

• IMEモードは現状MS系のブラウザ以外では使用できない
• 業務では非常に便利なので、MS系ブラウザでの使用前提なら使ってもよい
• VS2019のプレビューだと現行EdgeではIMEモードは動かなかった（2021/3/19)

class（.）とid（#）どちらを使うべきか

• idによる指定（先頭に＃）は、ページ内で一度しか使えないため、その制約を使って一度しか登場しないことが確実なものに指定をする（例えば主の見出しH1やヘッダー、フッターなど）
• H1が複数あるのはおかしいこと（https://www.web-planners.net/knowledge/000133.php）
• classによる指定（先頭に.）は、ページ内で何度も繰り返し適用するものに使用する
• classよりもidの方が優先度が上なので注意

スパゲティを防ぐ表記法

• importだらけ、上書きだらけのスパゲティにならないために生み出されたCSS表記法
• 詳しくはこちら（https://murashun.jp/article/programming/css/css-design.html）
• OOCSS（オブジェクト指向っぽく見た目と構造の表記を分けて書く）
• 場所に依存した書き方はNG（例えばMainTableとか）
• BEM（ハンガリアン的な構造化表記法で整理する）
• SMACSS（5種類のルールにカテゴライズして表記する）