HTMLとCSS概要

概要
- 駆け出しエンジニアが、業務中に学んだことをまとめていきます。

HTMLとCSSのポイント

1.レスポンシブデザイン
・可変レイアウト
・デバイスのスクリーンなどの条件によって、読み込むスタイルを変更することができる
・レスポンシブな画像
・スマホファースト
・長さを表すための単位が複数ある

2.メンテナンス性に優れて、拡張性を備えたCSS
・きれいで理解しやすいコード
・再利用できるコード
・ファイルをどのように構成するか
・クラスにどのような名前をつけるか
・HTMLをどのように構築するか

3.Webパフォーマンス
・HTTPリクエストを減らす
・コードを少なくする
・コードを圧縮する
・Sassを使う
・画像を少なくしたり、圧縮する

Webページを読み込んだ時に何が起こるか

1.HTMLの読み込み
2.HTMLの解析
3.DOMツリーの構築
4.CSSの読み込み
5.CSSの解析
・CSSコンフリクトの解決
・CSSの最終的な値を算出する
6.CSSOMツリーの構築
7.レンダーツリーの構築
8.ウェブサイトのレンダリング
9.Webサイトの表示

CSSの優先順位

https://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666
!important > CSS内部参照 > ID > クラス > 要素名 > 擬似要素 > *

Webページを読み込んだ時に何が起こるか

https://codepen.io/pen/
HTML,CSS,JavaScriptを検証するためのサイト。

サイズについて

em -> 親要素を基準に考える
rem -> 文章のルート要素、つまりhtml要素を基準に考える
vh -> 高さに合わせてサイズが変わる
vw ->　幅に合わせてサイズが変わる
vmin -> 幅と高さのうち、小さい方に合わせてサイズが変わる
vmax -> 幅と高さのうち、大きい方に合わせてサイズが変わる