HTML/CSS

作成日時：2024-08-01以前
更新日時：2024-08-25

HTML

セマンティックHTMLであること。
マシンリーダブルである。
意味をきちんと伝える。
id属性はwindow直下に格納される。
hタグはセクションを変えれば重複してもいい
inputはpatternに正規表現で入力制限できる

BEM記法

block__element--modifier:{}
search-form__button--disabled:{}

Padding単位の比較

1. px (ピクセル)

特徴

固定的な単位
デバイスに依存
精密な制御が可能

使用すべき場面

厳密なレイアウト制御が必要な場合
小さな要素や細かい調整
デバイスの解像度に関係なく一定のサイズを保ちたい場合

例

.button {
  padding: 10px 20px;
}

2. rem (ルート要素のフォントサイズに対する相対値)

特徴

ルート要素（通常は）のフォントサイズに基づく
レスポンシブデザインに適している
アクセシビリティに優れている

使用すべき場面

レスポンシブデザイン
全体的な一貫性を保ちたい場合
テキストサイズの変更に合わせてレイアウトを調整したい場合

例

html {
  font-size: 16px;
}
.container {
  padding: 1rem 2rem;
}

3. % (パーセント)

特徴

親要素に対する相対的なサイズ
流動的なレイアウトに適している
コンテナのサイズに応じて変化する

使用すべき場面

親要素に対して相対的なサイズを設定したい場合
流動的なレイアウト
横幅いっぱいに広がる要素のパディング

例

.parent {
  width: 300px;
}
.child {
  padding: 5% 10%;
}

推奨される使用方法

基本的には rem を使用
- レスポンシブデザインとアクセシビリティの観点から優れている
- 例: padding: 1rem 1.5rem;
親要素に対する相対的なサイズが必要な場合は % を使用
- 特に水平方向のパディングに適している
- 例: padding: 20px 5%;
精密な調整が必要な小さな要素には px を使用
- ボタンやアイコンなどの小さなUI要素に適している
- 例: padding: 5px 10px;
複数の単位を組み合わせて使用することも可能
- 例: padding: 1rem 5%;

最終的には、プロジェクトの要件、対象デバイス、デザインの一貫性を考慮して、適切な単位を選択することが重要。

env()

env() - CSS: カスケーディングスタイルシート | MDN

フロントで使える画像フォーマットの判別

サイズが縦横1pxの画像を容易。
上記画像をBase64に変換し、非表示のimgタグに記載
onloadに成功時の処理を記載。
その処理が実行されたなら、ブラウザはそのフォーマットの画像を表示できる

<img
    src="data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAABoAAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAEAAAABAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQAMAAAAABNjb2xybmNseAABAA0AAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACJtZGF0EgAKCBgABogIaAwgMgwYAAAAUAAAALASmpg="
    onload="window.__canUseAvif=true" class="hidden" />

rel=“sponsored”

querySelector

1111_dataのように数字から始まるIDはエラーになる

elementByIdを使う。

SEO

keywordsはもう使われていない。

クライアントストレージ

Cookies
Session Storage
Local Storage
IndexedDB
Cache API
Origin Private File System API (OPFS)
WASM-SQLite