Embedded Files
htmlで2段落で表示するためにはいくつかのCSSの記述方法があります。
① floatを使う：柔軟性が高く、様々なレイアウトに対応可能。
他の要素との配置調整が比較的簡単。
floatプロパティは、親要素に高さを指定しないと、子要素が親要素から飛び出してしまうことがある。
clearプロパティを使って、float要素による影響を解除する必要がある場合がある。
②flexboxを利用する：レイアウトの制御が簡単で、レスポンシブデザインに適している。
③gridを利用する：floatより複雑なレイアウト(2x3配列など)に利用できる。
④multi-column layout：文字を均等に複数列に分割し、新聞のようなレイアウトを作成可能で、レスポンシブデザインに適している。長文を印刷する時には便利かもしれません。（うまく表示できなかったので今回は説明しません）
①floatの例：thmlとcssは以下の通りです。
①floatの例：thmlとcssは以下の通りです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>私の初めてのHTML</title>
<link rel="stylesheet" href="241020index2column.css"> </head>
</head>
<body>
<h1>2段落 2columnです。</h1>
<p>これは、2columnをfloatで</p>
<div class="container">
<div class="left">
<p>1</p>
<p>3</p>
<p>5</p>
<p>7</p>
<p>9</p>
</div>
<div class="right">
<p>2</p>
<p>4</p>
<p>6</p>
<p>8</p>
<p>10</p>
</div>
</div>
<div class="clear"> </div>
<p>これで終わりです。</p>
<p>Clearで解除する。</p>
</body>
</html>
CSSコード
.container {
width: 600px; /* コンテナの幅 */
}
.left, .right {
float: left;
width: 300px; /* 各列の幅 */
box-sizing: border-box; /* パディングやボーダーを含めた幅指定 */
}
.clear {
clear: both;
}
②flexboxを利用する
②flexboxを利用する
.container {
display: flex; /* 親要素をflexコンテナにする */
width: 600px;
}
.left, .right {
flex: 1; /* 子要素を均等に分割 */
box-sizing: border-box;
}
③gridを利用する
③gridを利用する
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* 2つの列に均等分割 */
}
Gridは3行2列(3x2)のようなものも実現できます。この場合のコードは以下のようになります。幅を少し狭くするコードも加えてあります。
.container {
width: 600px; /* 幅を600pxに設定 */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
これに対応するhtmlコードは以下の通りです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>私の初めてのHTML</title>
<link rel="stylesheet" href="241023index3x2columns_grid.css"> </head>
</head>
<body>
<h3>2段落 2columnです。</h3>
<p>これは、3 columm x 2 lineをgridで実行した例です。</p>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
このコードで実現できる表示は以下のようになります。
Page updated
Google Sites
Report abuse