DIVブロックを全画面に広げる方法
2024-09-19
HTML
<div class="full-height">
</div>
CSS
.full-height {
height: 100vh; /* viewport height */
border: 1px solid black; /* 任意のボーダー */
}
解説
div要素を使って、ページの一番下まで伸ばしたいブロックを作成します。class="full-height"で、このブロックにCSSのスタイルを適用するためのクラス名を指定します。
.full-heightクラスにスタイルを定義します。height: 100vh;で、ブロックの高さをビューポートの高さに設定します。これにより、ブラウザのウィンドウの高さと同じ高さになります。border: 1px solid black;で、ブロックの周りにボーダーを追加します。これは、ブロックのサイズや位置を確認するための補助的なスタイルです。
注意
borderは、ブロックのサイズや位置を確認するために使用されるものであり、必須ではありません。必要に応じて、ボーダーのスタイルや幅を変更することができます。100vhは、ビューポートの高さの100%を意味します。ブラウザのウィンドウサイズが変更されると、ブロックの高さも自動的に調整されます。
- 「DIVブロックを全画面に広げる方法」
DIVブロックをページの一番下まで伸ばす
<div class="full-height">
</div>
.full-height {
height: 100vh; /* viewport height */
border: 1px solid black; /* 任意のボーダー */
}
DIVブロックを全画面に広げる
<div class="full-screen">
</div>
.full-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f0f0f0; /* 任意の背景色 */
}
- CSS
position: absolute;で、ブロックを絶対的な位置付けにします。top: 0; left: 0;で、ブロックをページの左上隅に配置します。width: 100%; height: 100%;で、ブロックの幅と高さを100%に設定します。これにより、ブロックがブラウザのウィンドウ全体を覆います。background-color: #f0f0f0;で、ブロックの背景色を設定します。これは、ブロックのサイズや位置を確認するための補助的なスタイルです。
<div class="full-height-flex">
</div>
.full-height-flex {
display: flex;
flex-direction: column;
height: 100vh;
}
方法2: Gridレイアウトを使用する
<div class="full-height-grid">
</div>
.full-height-grid {
display: grid;
height: 100vh;
}
- Gridレイアウト
display: grid;で、ブロックをグリッドレイアウトにします。height: 100vh;で、ブロックの高さをビューポートの高さに設定します。
- Flexbox
flex-direction: column;で、ブロック内のアイテムを縦方向に配置します。
<div class="full-screen-flex">
</div>
.full-screen-flex {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
<div class="full-screen-grid">
</div>
.full-screen-grid {
display: grid;
place-items: center;
height: 100vh;
width: 100%;
}
- Gridレイアウト
place-items: center;で、ブロック内のアイテムを水平方向と垂直方向の中央に配置します。height: 100vh; width: 100%;で、ブロックの高さと幅を100%に設定します。
- Flexbox
justify-content: center;で、ブロック内のアイテムを水平方向の中央に配置します。
css html border
