ホームページ >ウェブフロントエンド >CSSチュートリアル >5 つの一般的な CSS レイアウト フレームワークについての深い理解
5 つの一般的な CSS レイアウト フレームワークについての深い理解
- WBOYオリジナル
- 2024-01-16 08:41:061017ブラウズ
CSS レイアウト フレームワークを理解する: 5 つの一般的なレイアウトの分析
Web デザインと開発において、CSS レイアウトは非常に重要な側面です。優れたレイアウトは、Web ページをより美しく、より機能的にすることができます。 CSS レイアウト フレームワークを理解することは、Web ページのレイアウト スキルをより良く習得するのに役立ちます。この記事では、5 つの一般的な CSS レイアウトを紹介し、具体的なコード例を示します。
1. 流体レイアウト (流体配置)
流体レイアウトは、画面サイズに適応したレイアウト方法です。さまざまな画面サイズに合わせて要素の幅または高さを設定するには、主にパーセンテージを使用します。以下は簡単なフロー レイアウトの例です:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
}
.left-panel {
width: 25%;
background-color: yellow;
float: left;
}
.right-panel {
width: 75%;
background-color: lightblue;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="left-panel">
<p>This is left panel.</p>
</div>
<div class="right-panel">
<p>This is right panel.</p>
</div>
</div>
</body>
</html>2. グリッド レイアウト (Grid)
グリッド レイアウトは、複雑なグリッド構造を簡単に作成できる 2 次元のレイアウト方法です。グリッド レイアウトを使用して、コンテナー内に行と列を作成し、指定した場所に要素を配置します。以下は単純なグリッド レイアウトの例です:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>3. フレキシブル レイアウト (フレックスボックス)
フレキシブル レイアウトは、コンテナー内の要素のサイズとサイズを自動的に調整できる柔軟なレイアウト方法です。位置。柔軟なレイアウトにより、さまざまなレイアウトニーズを簡単に実現できます。以下は簡単な柔軟なレイアウトの例です:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-between;
}
.item {
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>4. フローティング レイアウト (Float)
フローティング レイアウトは、複数列のレイアウトを実装するために使用されるテクノロジです。要素を指定した位置にフローティングすることにより、複数の列の効果を得ることができます。以下は、単純なフローティング レイアウトの例です。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
overflow: hidden;
}
.item {
width: 30%;
background-color: lightblue;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>5. 配置レイアウト (位置)
配置レイアウトは、ドキュメント フロー内での位置を指定して要素を配置する方法です。要素のpositionプロパティを設定することにより、親要素またはドキュメントウィンドウを基準にして要素を配置できます。以下は簡単な位置決めレイアウトの例です:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 200px;
background-color: lightblue;
}
.item {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>概要:
この記事では、5 つの一般的な CSS レイアウト フレームワーク、つまり流体レイアウト、グリッド レイアウト、エラスティック レイアウト、フローティング レイアウトと位置決めレイアウトを紹介します。これらのレイアウト フレームワークを学ぶことで、Web ページ レイアウトのスキルをよりよく習得し、実際のニーズに応じて適切なレイアウト方法を選択できるようになります。この記事が皆さんのお役に立てば幸いです!
以上が5 つの一般的な CSS レイアウト フレームワークについての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。