HTML チュートリアル: ページ レイアウトにグリッド システムを使用する方法
Web デザインでは、ページ レイアウトは非常に重要なリンクです。適切なページ レイアウトはユーザー エクスペリエンスを向上させるだけでなく、Web ページをより美しく、閲覧しやすくします。柔軟で応答性の高いページ レイアウトを実現するために、グリッド システムを使用できます。グリッドシステムは、ページを同じ幅の列に分割する方法であり、ページを異なる列数と幅に分割することで、さまざまな柔軟なページレイアウトスタイルを実現できます。この記事では、ページ レイアウトにグリッド システムを使用する方法を紹介し、具体的なコード例を示します。
グリッド システムの基本的な概念は、ページを 1 つの行 (row) と複数の列 (column) に分割することです。ページの水平方向のスペースは 12 列に分割されており、必要に応じて行の 1 つ以上の列に要素を配置できます。異なる列幅と列オフセットを設定することで、柔軟なレイアウト効果を実現できます。
まず、必要な CSS ファイルをページに導入する必要があります。通常、グリッド システムの CSS コードは 1 つ以上のファイルにパッケージ化されており、次に示すように、それを HTML ファイルの
タグに追加するだけで済みます。グリッド システムを使用してページをレイアウトできます。 HTML 構造では、<link rel="stylesheet" href="grid.css">
上記のコードでは、2 列の行を作成しました。各列は「col-6」クラスを使用します。これは、列が行幅の 50% を占めることを意味します。行の合計幅は 12 列であるため、各列が占める列数は 1、2、3、4、6、または 12 になります。異なる列幅を設定することで、異なるレイアウト効果を作成できます。
左右の列が幅の 25% を占め、中央の列が幅の 50% を占める 3 列のレイアウトを作成する場合は、次のコードを使用できます。 ##
<div class="row"> <div class="col-6">这是第一列</div> <div class="col-6">这是第二列</div> </div>
<div class="row"> <div class="col-3">这是左列</div> <div class="col-6">这是中间列</div> <div class="col-3">这是右列</div> </div>
<div class="row"> <div class="col-3">这是左列</div> <div class="col-6 offset-2">这是中间列</div> <div class="col-3">这是右列</div> </div>
以上がHTML チュートリアル: ページ レイアウトにグリッド システムを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。