CSSセレクタを使って画面いっぱいに高さを調整する方法

はじめに

Webページを作成する際に、要素の大きさや位置を調整するのにCSSを使うことが一般的です。

中でも、要素の高さを調整することは頻繁に行われます。

今回は、CSSセレクタを使って画面いっぱいに高さを調整する方法について解説します。

●CSSセレクタとは

CSSセレクタとは、HTML要素を指定するための記述方法のことです。CSSセレクタを使うことで、特定の要素だけにスタイルを適用させることができます。

例えば、次のように記述することで、class属性が「box」である要素だけにスタイルを適用できます。

.box {
  /* スタイルの適用 */
}

●画面いっぱいに高さを調整する方法

Webページのトップページやランディングページなど、画面いっぱいにコンテンツを表示することが多い場合、要素の高さを画面いっぱいに調整する必要があります。

ここでは、CSSセレクタを使って画面いっぱいに高さを調整する方法を紹介します。

まずは、HTMLを用意します。

<div class="full-height">
  ここにコンテンツを記述します。
</div>

このHTMLでは、class属性が「full-height」という要素を用意しています。

次に、CSSを記述します。

次のように、body要素と「full-height」クラスを持つ要素に対して、高さを100%に設定します。

html, body {
  height: 100%;
}

.full-height {
  height: 100%;
}

これで、要素の高さが画面いっぱいに調整されます。

●問題点と対処法

上記の方法で画面いっぱいに高さを調整することができますが、実際にはいくつかの問題があります

それぞれの問題点と対処法を紹介します。

【問題点1】要素が親要素からはみ出す

上記の方法では、要素の高さを100%に設定することで画面いっぱいに調整しています。

しかし、親要素が十分な高さを持っていない場合、要素が親要素からはみ出してしまいます。

【対処法】親要素の高さを設定する

要素が画面いっぱいに調整されるためには、親要素も十分な高さを持っている必要があります。

そのため、親要素の高さも100%に設定する必要があります。

例えば、次のように記述します。

html, body {
  height: 100%;
}

.parent {
  height: 100%;
}

.child {
  height: 100%;
}

この場合、親要素のclass属性に「parent」、子要素のclass属性に「child」という名前を付けています。

【問題点2】要素の高さが固定されている場合に使えない

上記の方法では、要素の高さを100%に設定して画面いっぱいに調整しています。

しかし、要素の高さが固定されている場合にはこの方法が使えません。

【対処法】JavaScriptを使って要素の高さを取得する

要素の高さが固定されている場合には、JavaScriptを使って要素の高さを取得する必要があります。

具体的には、次のように記述します。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

このCSSでは、親要素に「position: relative;」を、子要素に「position: absolute; top: 0; left: 0; right: 0; bottom: 0;」を設定しています。

そして、JavaScriptで以下のように記述します。

const child = document.querySelector('.child');
const parentHeight = document.querySelector('.parent').offsetHeight;
child.style.height = `${parentHeight}px`;

このJavaScriptでは、要素の高さを取得するために「offsetHeight」を使っています。

また、取得した高さを子要素のstyle.heightに設定しています。

●応用例

上記の方法を応用することで、様々な高さの要素を画面いっぱいに調整することができます。

いくつかの応用例を紹介します。

【応用例1】ヘッダーの高さを画面いっぱいに調整する

ヘッダーの高さを画面いっぱいに調整する場合は、次のように記述します。

<header class="full-height">
  ここにヘッダーのコンテンツを記述します。
</header>
<!-- HTML -->

header {
  background-color: #333;
  color: #fff;
  text-align: center;
}

.full-height {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* CSS */

この場合、header要素に背景色やテキスト色を設定しています。

そして、class属性に「full-height」を付けた要素に対して、高さを100vhに設定し、縦方向に中央寄せするために「display: flex; flex-direction: column; justify-content: center;」を設定しています。

【応用例2】フッターを画面下部に固定する

フッターを画面下部に固定する場合は、次のように記述します。

<footer class="fixed-bottom">
  ここにフッターのコンテンツを記述します。
</footer>
<!-- HTML -->

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
/* CSS */

この場合、footer要素に背景色やテキスト色を設定しています。

そして、class属性に「fixed-bottom」を付けた要素に対して、positionをfixedに設定し、bottomを0に、leftを0に、幅を100%に設定しています。

【応用例3】コンテンツの高さを画面いっぱいに調整する

コンテンツの高さを画面いっぱいに調整する場合は、次のように記述します。

<main class="full-height">
  ここにコンテンツを記述します。
</main>
<!-- HTML -->

main {
  background-color: #f2f2f2;
  padding: 20px;
}

.full-height {
  height: calc(100vh - 40px);
}
/* CSS */

この場合、main要素に背景色やpaddingを設定しています。

そして、class属性に「full-height」を付けた要素に対して、高さを100vhからpaddingの値を引いた値に設定しています。

これによって、画面上下のpaddingを除いたエリアにコンテンツが表示されるようになります。

まとめ

以上が、CSSセレクタを使って画面いっぱいに高さを調整する方法についての解説です。

CSSセレクタを使うことで、特定の要素だけにスタイルを適用させることができます。

また、画面いっぱいに高さを調整する方法を使うことで、要素の高さを画面いっぱいに調整することができます。

ただし、親要素の高さが足りない場合や要素の高さが固定されている場合には、対処法を考える必要があります。

応用例として、ヘッダーやフッター、コンテンツの高さを画面いっぱいに調整する方法を紹介しました。

CSSセレクタを使った高さの調整は、Webページ制作において基本的な技術のひとつです。

ぜひ、今回紹介した方法を覚えて、Webページ制作のスキルアップに役立ててみてください。