レイアウトレイアウトとは何ですか？-CSSチュートリアル-php.cn

レイアウトレイアウトとは何ですか？

WBOY

リリース： 2024-02-24 15:03:09

オリジナル

1373 人が閲覧しました

レイアウトレイアウトとは何ですか？

レイアウトレイアウトとは、Web ページの要素を特定の規則と構造に従って配置および表示するために Web デザインで採用されている植字方法を指します。合理的なレイアウトにより、Web ページはより美しく、整然とし、優れたユーザーエクスペリエンスを実現できます。

フロントエンド開発では、従来のテーブルレイアウト、フローティングレイアウト、位置決めレイアウトなど、多くのレイアウト方法から選択できます。しかし、HTML5 と CSS3 の推進により、フレックスボックスレイアウトやグリッドレイアウトなどの最新のレスポンシブレイアウトテクノロジが、フロントエンド開発で最も一般的に使用されるレイアウト方法になりました。

以下では、これらのレイアウト方法を 1 つずつ紹介し、具体的なコード例を示します。

従来のテーブルレイアウト:
従来のテーブルレイアウトは、HTML の <table> タグに基づいています。 <code><tr> タグと <code><td> タグを使用して行と列を設定し、要素のレイアウトを実装します。このレイアウト方法は、一部の単純な状況では比較的簡単に実装できますが、複雑なレイアウトシナリオではコードが長くなり、メンテナンスが困難になります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><table> <tr> <td>内容1</td> <td>内容2</td> </tr> <tr> <td>内容3</td> <td>内容4</td> </tr> </table></pre><div class="contentsignin">ログイン後にコピー</div></div><ol start="2"><li>フローティングレイアウト: <br>フローティングレイアウトは、要素の <code>float 属性を設定することで実現されます。フローティング要素の前のコンテンツは、フローティング要素の周囲にラップされます。。ただし、フローティングレイアウトはドキュメントフローから切り離されるという問題が発生しやすく、フローティングをクリアするために追加の処理が必要になり、レスポンシブレイアウトでの適応性が制限されます。

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    float: right;
    width: 100px;
  }
</style>

<div class="left">左边内容</div>
<div class="right">右边内容</div>
<div style="clear: both;"></div>

ログイン後にコピー

レイアウトの配置:
レイアウトの配置は、要素の position 属性を設定することによって実現されます。一般的に使用される位置決め方法には、相対位置決め relative、絶対位置決め absolute、および固定位置決め fixed があります。レイアウトの配置もより柔軟になりますが、レスポンシブレイアウトでは複数の調整と位置の計算が必要になります。

<style>
  .container {
    position: relative;
    width: 200px;
    height: 200px;
  }
  .box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
  }
</style>

<div class="container">
  <div class="box">定位内容</div>
</div>

ログイン後にコピー

Flexbox レイアウト:
Flexbox レイアウトは、要素のサイズ、位置、順序などを柔軟に調整および制御できる CSS3 の新しいレイアウト方法です。 1 次元レイアウト、つまり行または列のレイアウトに適しています。

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
  }
</style>

<div class="container">
  <div>Flexbox布局内容</div>
</div>

ログイン後にコピー

グリッドレイアウト:
グリッドレイアウトは、CSS3 の新しい 2 次元レイアウト方法であり、グリッド行とグリッド列を通じてレイアウトを制御します。複雑なレイアウトのニーズをより適切に実装でき、適応的で応答性の高いレイアウトをサポートします。

<style>
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 10px;
  }
</style>

<div class="container">
  <div>Grid布局内容1</div>
  <div>Grid布局内容2</div>
</div>

ログイン後にコピー

上記は、いくつかの一般的なレイアウト方法のサンプルコードです。実際の開発では、特定のニーズに応じて適切なレイアウト方法を選択したり、複数のレイアウト方法を組み合わせてより複雑な Web ページレイアウトを実現したりできます。同時に、さまざまな画面サイズやデバイスの使用に適応するためのレイアウトの応答性の高い適応にも注意を払う必要があります。

以上がレイアウトレイアウトとは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。