レイアウト聖杯（聖杯レイアウト）最も一般的なサイトのレイアウトを指します。ヘッダ（ヘッダ）、トランク（本体）、尾部（フッタ）：上から下へのページは、3つの部分に分かれています。ナビゲーション、メインバー、サイドバー：左から右にする胴体とは水平に、3つの列に分割されます。
1 < 本体> 2 < ヘッダ> ... </ ヘッダ> 3 < DIV クラス= "ボディ" > 4 < メインクラス= "コンテンツ" > ... </ メイン> 5 < NAV クラス= "NAV" >。 ... </ NAV > 6 < 余談クラス= "広告" > ... </ さておき> 7 </ DIV > 8 <フッター> ... </ フッタ> 9 </ ボディ>
聖杯のレイアウトは、次のレイアウトで作ることができます。
1.固定幅レイアウト：ページ幅の固定されたセットは、典型的には長さの単位としてPX、使用（移動端末）、マルチ端子には適していない、PC側のウェブにおいて一般的です。
利点：より良い今日の市場上のすべてのデバイスに適応する：我々は、以下の解像度で現在主流の市場の焦点を知ります
固定レイアウトでは、ページの幅は、画素値として指定されなければなりません。
例えばフェニックスは、彼の幅が、私のコンピュータの解像度1000pxです：1080 * 1920、その周りの空白部分があるでしょう。
今主要なサイトのページ幅は一般1000pxあるので、より多くの機器を適応させることができます。
2。流体レイアウト：典型的には長さの単位の百分率として、ページの相対的な幅を設定します。
長所：ページの変更により、ページは比に応じて変化を追跡しますが、これは、変形の目次ページを作成します。
フローレイアウトは、基本的なレイアウトは異なる単位の大きさの異なる部位ごとの固定幅側のものです。固定幅レイアウトピクセルを使用して、しかし、フローレイアウトの割合が使用され、ページが良好な可塑性及び流動性を提供します。言い換えれば、比率を設定することにより、我々は、機器のサイズや画面幅の大きさを考慮する必要はありません、あなたはそれぞれのケースのための実行可能な解決策を見つけることができ、すべての機器のサイズに対応しますあなたのデザインのサイズである必要があります。フローレイアウトは、メディアクエリと最適化技術のスタイルに密接に関連しています。
（また、弾性レイアウトとして知られている）3.応答レイアウト：機器情報を検出することにより、ページレイアウトすることを決め、ユーザーが同じページにアクセスするための異なるデバイスを使用していますつまり場合、同じ内容が表示されない場合があります、一般的には、機器をテストしています画面の幅は実現しています。
モバイルブラウザコントロールのレイアウトにビューポートメタタグを使用
< メタ名=「ビューポート」コンテンツ=「幅=デバイス幅、初期スケール= 1、最大スケール= 1」 />
4.レイアウトグリッド（グリッドレイアウト）：等しい人工へページ幅の長さは、次に、同じ長さの単位に、典型的には長さのパーセンテージとして使用し、尺度等しい長組版レイアウトの単位としてこれらを配置します。
注意：いくつかのより多くのレイアウトが独立していない、実際の開発プロセスは、多くの場合、互いに組み合わせて使用されています
固定レイアウトとレイアウトの相違デザインフロー：
