Morioh
Login
田辺 明美

田辺 明美

10 months ago

CSS を使用して 2 つの Div を並べて表示する 5 つの方法

インラインブロック、フレックスボックス、グリッド、フロート、テーブルの 5 つの異なる方法を使用して、CSSで 2 つの div を並べて表示する方法を学びます。このステップバイステップのチュートリアルでは、各方法の長所と短所を説明するので、ニーズに最適な方法を選択できます。

HTMLには、インライン要素とブロック要素の 2 種類があります。インライン要素は要素を隣り合わせに配置できますが、デフォルトでは高さと幅のプロパティをサポートしていません。ブロック要素はデフォルトで幅と高さのプロパティをサポートしていますが、それはできません。ブロック要素を 2 つの div のように並べて配置します

それで、ここでそれを機能させる方法を見てみましょう

div を 5 つの異なる方法で並べて配置する方法を見ていきます。

  • display: inline-block (tradional way)
  • css flexbox method
  • css grid method
  • display: table method
  • float property

表示の使用: インラインブロック

表示: inline-blockプロパティは、ブロック要素を互いに並べて配置するのに役立ちます

ただし、ブロック要素はデフォルトで 100% の幅を取るため、ブロック要素に追加の width プロパティを追加する必要があります。

例えば。

<!DOCTYPE html>
<head>
</head>
<body>
  <div class="element">
  </div>
  <div class="element">
  </div>
</body>
</html>

//CSS

.element {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #ce8888;
  
}

そして出力は次のようになります

ここで例を確認してください

フレックスボックスの使用

フレックスボックス はウェブページのレイアウトをデザインする最新の方法であり、フレックスボックスは単一のプロパティではなく、その完全なモジュールであり、多くの機能を備えています。

フレックスボックスを使用して div を隣り合わせに配置する方法を見てみましょう

//htmlファイル

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="index.css" />
</head>
<body>
  <div class="container">
    <div class="item">
    </div>
    <div class="item">
    </div>
  </div>
  </body>
</html>

// cssファイル

.container {
  display: flex;
}
.item {
  background: #ce8888;
  flex-basis: 100px;
  height: 100px;
  margin: 5px;
}

//出力

表示: コンテナに与えられた flexプロパティ。 flex コンテキスト内に子要素を作成し、div を隣り合わせに配置します。

上の例では、アイテムの最小幅を指定するために使用される flex-basis プロパティを使用していることがわかります。 

ここでデモを見つけてください

CSSグリッドの使用

CSS グリッドは、Web ページをデザインするためのもう 1 つの優れたアプローチであり、多数の機能を備えた完全なモジュールです。

CSS グリッドを使用して div を並べて表示する方法を見てみましょう

//html

<!DOCTYPE html>
<html>
  <head>
    <title>Grid Example</title>
    <style>
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">
      </div>
      <div class="item">
      </div>
    </div>
  </body>
</html>

//cssファイル

 .container {
        display: grid;
        grid-template-columns: 100px 100px; 
        grid-template-rows: 100px;
        grid-column-gap: 5px;
      }
      
      .item {
      background: #ce8888;
 
       
      }

そして出力は次のようになります

プロパティ表示: グリッドはグリッド レイアウト構造をオンにします

CSS ファイルでは、grid-template-columns プロパティはページを列数に分割するのに役立ちます。100px を 2 回指定すると、2 つの列が作成されます。

ここでデモを見つけてください

表示テーブルの使用

表示: table プロパティは <table> タグの代替です

display: tableプロパティを使用して div を並べて表示する方法を見てみましょう

//htmlファイル

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="index.css" />
</head>
<body>
  <div class="container">
    <div class="table-row">
     <div class="table-cell">
      
      </div>
      <div class="table-cell">
       
      </div>
    </div>
  </div>
  </body>
</html>

//cssファイル

.container {
  display: table;
  width: 20%;
}
.table-row {
 
  display: table-row;
  height: 100px;
}
.table-cell {
  border: 1px solid;
  background: #ce8888;
  display: table-cell;
  padding: 2px;
}

そして出力は次のようになります

ここでデモを見つけてください

html tableタグを使用して、表示: table の例を以下のようにコード化することもできます。

//htmlファイル

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="index.css" />
</head>
<body>
  <table class="container">
    <tr class="table-row">
     <td class="table-cell">
      
      </td>
      <td class="table-cell">
       
      </td>
    </tr>
  </table>
  </body>
</html>

//cssファイル

.container {
  display: table;
  width: 20%;
}
.table-row {
 
  display: table-row;
  height: 100px;
}
.table-cell {
  border: 1px solid;
  background: #ce8888;
  display: table-cell;
  padding: 2px;
}

そして出力は次のようになります

Float プロパティの使用

CSS float プロパティは要素をコンテナの左側または右側に配置し、テキストとインライン要素が要素を囲むことを許可します。要素はページの通常のフローから削除されますが、フローの一部は残ります。

float を使用して div を並べて表示する方法を見てみましょう

//htmlファイル

<!DOCTYPE html>
<head>
</head>
<body>
  <div class="element">
  </div>
  <div class="element">
  </div>
</body>
</html>

//cssファイル

.element {
  float: left;
  width: 100px;
  height: 100px;
  background: #ce8888;
  margin: 5px
  
}

そして出力は次のようになります

ここでデモを見つけてください

結論：

div を隣り合わせに配置する方法はたくさんありますが、問題はどれが良いかです。

それは完全に要件に依存します

フレックスボックスと CSS グリッドは、Web ページのレイアウトを行う最新の方法であり、完全なモジュールであり、多くの機能が付属しています。ページ全体をレイアウトする必要がある場合は、フレックスボックスまたは CSS グリッドをお勧めします。

最小限の要件がある場合は、display: inline-block が最適なオプションです。

気に入ったらシェアしてください。シェアすることは思いやりがあるからです?

#css 

1.10 GEEK