【CSS】要素の高さを100%に設定する方法｜h-100とh-50の使い方
このガイドでは、CSSのh-100とh-50クラスを使って、要素の高さを親コンテナの高さに合わせて設定する方法を説明します。これにより、親コンテナ内で高さの制限ができます。
🔹 部分コード
<div class="container">
<div class="h-100">この要素は高さ100%になります。</div>
<div class="h-50">この要素は高さ50%になります。</div>
</div>
<style>
.container {
height: 300px;
}
.h-100 {
height: 100%;
}
.h-50 {
height: 50%;
}
</style>
💻 完全動作コード（※このコピペのみでHTMLで動作するコード）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>高さ100%と50%の要素</title>
<style>
.container {
height: 300px;
border: 2px dashed #000;
}
.h-100 {
height: 100%;
background-color: #90EE90;
padding: 1rem;
}
.h-50 {
height: 50%;
background-color: #ADD8E6;
padding: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="h-100">この要素は高さ100%になります。</div>
<div class="h-50">この要素は高さ50%になります。</div>
</div>
</body>
</html>
🧩 応用と活用方法
height: 100%;は、要素の高さを親コンテナの高さに合わせて調整するための最も基本的な方法です。特に、要素が親コンテナの高さを占めるようにしたい場合に便利です。
📱 レスポンシブデザイン
h-100はレスポンシブデザインにも非常に有効です。スマートフォンやタブレットでは、h-100を使って要素の高さを100%に設定することで、デザインがより柔軟に対応します。
このクラスを使うことで、要素が親コンテナに合わせて高さを調整でき、縦のレイアウトを整えることができます。
コピーしました！