情報技術産業における長年の専門知識を備えたNALベトナムのSE Phan Thi Thu Hangは、CSSがどのように機能するかの概要を提供し、CSSをより効果的に使用するのに役立てます。

1.優れたHTML / CSSの主な要素

 

 

 

 

 

HTML / CSSで作業するときに注意する必要がある3つの重要なポイント

1.1. レスポンシブデザイン

• 流動的なレイアウト

• メディアクエリ

• レスポンシブ画像

• 正しい単位

• デスクトップファーストとモバイルファースト 

1.2. 高いメンテナンス性でスケーラブルなコード

• 明確

• わかりやすい

• 成長

• 再利用可能

• ファイルを整理する方法

• クラスに名前を付ける方法

• HTMLを構成する方法

1.3. ウェブパフォーマンス

• 少ないHTTPリクエスト

• 少ないコード

• コードを圧縮する

• CSSプリプロセッサを使用する

• 少ない画像

• 画像を圧縮する

2.ウェブサイトが読み込まれたときに実際に内部で何が起こるか

 

 

 

 

 

 

 

• HTMLの読み込み：ブラウザが元のHTMLファイルを読み込むと、HTMLコードを取得して解析を開始します-> HTMLの解析。

•ドキュメントオブジェクトモデル（DOM）：解析プロセスから、ブラウザーはDOMドキュメントオブジェクトモデルを構築します。 DOMは、親、子供、兄弟がいる家系図のようなものです。ブラウザーがHTMLを解析すると、HTMLヘッドタグに含まれているスタイルシートも検出され、それらの読み込みが開始されます-> CSSの読み込み。

• HTMLと同様に、CSSも解析されますが、解析は少し複雑です-CSSの解析。

• CSSの解析：2つの主要なステップが含まれます。

• ステップ1は、カスケードと呼ばれるプロセスを使用して宣言されたCSSの競合に対処することです。2番目のステップは、最終的なCSS値を処理することです。

• CSSオブジェクトモデル（CSSOM）：最終的なCSSは、DOMと同様に、CSSオブジェクトモデルと呼ばれるツリー状の構造に格納されます。

• レンダリングツリー/出力ツリー：解析されたHTMLとCSSの統合です。

• 視覚フォーマットモデル：実際にページを表示するために、ブラウザーは、計算アルゴリズム、ツール（ボックスモデル、フロート、位置など）を使用する、

いわゆる視覚フォーマットモデルを使用します。

=>最終結果は、ブラウザに実際に表示されるサイト-最終レンダリングされたウェブサイトです

3.CSS解析

 

 

 

 

 

 

 

 

CSSの最初の「C」− Cascadeは、複数のルールが1つの特定の成分に適用されている場合に、異なるスタイルシートを組み合わせてルール間の競合を解決するプロセスを意味します。

3.1. CSSソース

CSSルールは次の3つのソースから取得されます。

• 著者CSS：開発者が作成

• ユーザーCSS：CSSはエンドユーザーから取得されます。たとえば、エンドユーザーがブラウザーでデフォルトのフォントサイズを変更した場合などです。

• ブラウザー（ユーザーエージェント）：ブラウザーのデフォルト設定。では、コンポーネントに複数のルールが適用されている場合、実際にはどのようにして競合を解決するのでしょうか。つまり、セレクターの優先順位と競合ルールのソースの順序を確認して、優先するルールを決定します。

 

 

 

 

 

• !importantでマークされたCSS宣言が最も優先されます。

• ただし、最後のアプローチとして!importantのみを使用してください。セレクターを正しく定義してください-コードを保守しやすくします！

• インラインスタイルは常に外部スタイルシートよりも優先されます。

• 1つのIDを含むセレクターは、1000クラスよりも具体的です

• セレクタには、1000を超える要素の1つの特定のクラスが含まれています

• ユニバーサルセレクター*には値がなく、その特異性は（0、0、0、0）です。

• セレクターの順序ではなく特定性に依存する  ただし、両方のサードパーティスタイルシートを使用し、それらのスタイルシートを上書きする場合は、常にスタイルシートを最後に配置する必要があります。

3.2. CSS値の処理

 

 

 

 

 

 

 

Used valueは、計算後の最終値であり、実際のレイアウトに依存します。たとえば、親要素の幅は280pxであり、子要素の幅は親要素の幅の66％に等しく、計算された数値は結果 184.8pxです。これはUsed valueですが、実際の値は185pxであり、これは丸められた数値です。

3.3. 相対単位を絶対単位（ピクセル）に変換する方法

注：長さの測定：高さ、パディング、マージン、…。

• パーセンテージ：font-sizeの場合：親要素を参照します。 長さ測定の場合：参照は常に親要素の幅です（親の対応するプロパティではありません）。

• em：font-sizeの場合：は親要素を参照します。 長さ測定の場合：参照は現在の要素のフォントサイズです。

• Rem：font-sizeとlengthの両方の測定の場合：元のfont-sizeを参照として使用します。

 

 

 

 

 

 

 

CSS 仕組みみを次のセクションで見ていきましょう！