HTML 3 カラム レイアウト
Web サイトでは、複数の列を使用してコンテンツを表示することがよくあります。 列のレイアウトは、設計者の要件に応じてさまざまな方法で設計できます。
HTML と CSS を組み合わせて、レスポンシブで魅力的な列レイアウトを構築できます。 この記事では、3 列のレイアウトの設計に焦点を当てます。
HTML で 3 列のレイアウトを作成する
通常、HTML 列は <div> タグを使用して定義されます。 <div> タグの間に、row キーワードでクラスを定義します。
3つの列のレイアウトを定義する場合、3つの <div> 要素とそれらの間に 3つの column クラスを作成する必要があります。
次の例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h1>
Column three layout
</h1>
<div class="row">
<div class="column" style="background-color:#404040;">Content of the column</div>
<div class="column" style="background-color:#a0a0a0;">Content of the column</div>
<div class="column" Style="background-color:#dcdcdc;">Content of the column</div>
</div>
</body>
</html>
上記の HTML コードを考慮して、最初の <div> 要素内で row クラスを宣言しました。 3つの列は、ブラウザー領域全体を分割できるクラスとして定義されています。
style 要素を使用して、3つの列の背景色を追加できます。
コラムの内容は完全にデザイナーの思い次第です。 上記のコードを使用して、単純な 3 列のレイアウトを設計できます。
適切な 3 列のレイアウトを取得するには、いくつかの CSS プロパティを追加することを強くお勧めします。 そのために、以下の CSS コードを使用できます。
CSS プロパティを HTML 列レイアウトに追加する
HTML プロパティを使用して基本的な列レイアウトを作成できますが、CSS プロパティを使用すると、よりインタラクティブになります。 列のスタイルを設定するのに役立ちます。
*{
box-sizing: border-box;
}
.row{
display:grid;
grid-template-columns: 33.33% 33.33% 33.33%;
justify-content: center;
text-align: center;
font-size: 25px;
height: 300px;
}
3 列のレイアウトをグリッドとして作成できます。 上記の CSS コードは、display プロパティを使用してグリッド レイアウトを表示する方法を示しています。
grid-template-columns プロパティを使用して、ブラウザー スペースの領域全体を同じ 3つの列に分割します。
CSS プロパティ height は、列の高さを定義します。 justify-content プロパティは、各列の内容を正当化するために使用されます。
さらに、text-align と font-size を追加しました。
上記の HTML および CSS コードの結果として、次のような 3 列のレイアウトを取得できます。
Web レイアウトは、特有の種類の画面に適合する必要があります。 レスポンシブ HTML 3 列レイアウトを作成して、いくつかの HTML 要素を支援します。
レスポンシブな列レイアウトの設計方法を確認してみましょう。
HTML で応答性の高い 3 列のレイアウトを作成する
列のレイアウトをレスポンシブにする方法はいくつかあります。 viewport 要素を追加して、レイアウトをさまざまな画面に合わせて調整できます。
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta> タグは、Web ページのビューポートを設定する viewport 要素を追加するために使用されます。 Web ページのビューポートを設定すると、ブラウザーはページのサイズとスケールを管理するように指示されます。
上記の HTML コードを使用して、列のレイアウトをさまざまな種類の画面サイズすべてに適合させることができます。 上記のコードを HTML コードの head 要素内に次のコードとして追加する必要があります。
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<link rel="stylesheet" href="style1.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
.row{
display:grid;
grid-template-columns: 33.33% 33.33% 33.33%;
justify-content: center;
text-align: center;
font-size: 25px;
height: 300px;
}
</style>
</head>
<body>
<h1>
Column three layout
</h1>
<div class="row">
<div class="column" style="background-color:#404040;">Content of the column</div>
<div class="column" style="background-color:#a0a0a0;">Content of the column</div>
<div class="column" Style="background-color:#dcdcdc;">Content of the column</div>
</div>
</body>
</html>
まとめ
HTML 3 列レイアウトは、row および column クラスで <div> 要素を定義し、いくつかの CSS スタイル プロパティを追加するだけで作成できます。 この記事では、HTML を使用して基本的な 3 列のレイアウトを作成し、いくつかの CSS プロパティを追加してスタイルを設定する方法について説明しました。
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.