Bootstrapのh-100クラスを使用した高さ指定の方法

2024-02-16 05:28 Bootstrap CSS

要素の高さを指定するために、以下の手順を実行します。

  1. HTMLファイルでBootstrapを読み込む:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

  2. 高さを指定したい要素にh-100クラスを追加する:

    <div class="h-100">
 <!-- 高さを指定したいコンテンツをここに追加 -->
</div>

    このクラスは、要素に対して100%の高さを設定します。親要素の高さに合わせて要素が伸縮するため、レスポンシブデザインにも対応しています。

  3. 必要に応じてカスタマイズする: h-100クラスは、要素に高さを指定するだけでなく、他のクラスとも組み合わせて使用することができます。たとえば、<div class="h-100 d-flex align-items-center">とすると、要素内のコンテンツを垂直方向に中央揃えすることができます。

以上がBootstrapのh-100クラスを使用して要素の高さを指定する方法です。この方法を使うことで、レスポンシブなデザインを実現しながら、要素の高さを柔軟にコントロールすることができます。

コード例:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <title>Bootstrapのh-100クラスを使用した高さ指定の方法</title>
</head>
<body>
  <div class="h-100 d-flex align-items-center">
    <h1>コンテンツの高さを指定する例</h1>
  </div>
</body>
</html>

この例では、h-100クラスを使用してdiv要素の高さを100%に設定し、d-flexとalign-items-centerクラスを使用してコンテンツを垂直方向に中央揃えしています。

以上で、Bootstrapのh-100クラスを使用した要素の高さ指定の方法を説明しました。この方法を活用することで、柔軟なレスポンシブデザインを実現することができます。