HTML チュートリアル: ページ レイアウトにグリッド システムを使用する方法

要素を使用して行と列を作成できます。たとえば、次のコードを使用して 2 列のレイアウトを作成できます。

上記のコードでは、2 列の行を作成しました。各列は「col-6」クラスを使用します。これは、列が行幅の 50% を占めることを意味します。行の合計幅は 12 列であるため、各列が占める列数は 1、2、3、4、6、または 12 になります。異なる列幅を設定することで、異なるレイアウト効果を作成できます。

左右の列が幅の 25% を占め、中央の列が幅の 50% を占める 3 列のレイアウトを作成する場合は、次のコードを使用できます。 ##

列幅の設定に加えて、オフセット クラスを使用して、より柔軟なレイアウト効果を作成することもできます。 offset クラスは、列を特定の列数だけ右に移動するために使用されます。たとえば、上記の 3 列レイアウトの中央の列を右に 2 列オフセットして、次の効果を作成できます。

上記のコードでは、クラス「offset-2」を追加しました。中央の列。つまり、中央の列は 2 列の幅だけ右にオフセットされます。

上記の例に加えて、グリッド システムはレスポンシブ レイアウトもサポートしています。カラムクラス名に「-md」「-lg」などの接尾辞を付けることで、画面サイズに合わせてレイアウトを自動調整できます。たとえば、次のコードを使用して、大きな画面では 2 列のレイアウトを作成し、小さな画面では 1 列のレイアウトを作成できます。

上記のコードでは、列クラスの「-md」名前は、中サイズの画面で有効であることを意味します。 「-sm」や「-lg」などのサフィックスを使用して、さまざまな画面サイズを指定することもできます。

グリッド システムを使用すると、さまざまな柔軟なページ レイアウトを簡単に作成できます。ただし同時に、列やネストが多すぎるとコードが複雑になり、Web ページの読み込み速度に影響を与えることにも注意する必要があります。レイアウトを設計するときは、実際のニーズに応じてグリッド システムを合理的に使用する必要があります。

要約すると、ページ レイアウトは Web デザインの重要な部分であり、グリッド システムを使用すると、柔軟で応答性の高いレイアウト効果を実現できます。この記事では、グリッド システムの基本概念と使用法について学び、具体的なコード例を示しました。この記事の紹介を通じて、皆さんがページ レイアウトにグリッド システムを使用する方法をマスターし、Web デザインの品質とユーザー エクスペリエンスを向上できることを願っています。