CSSでウィンドウの高さ100%のDIVを作成する方法
CSSのheightプロパティを使うと、要素の高さを自由に指定できます。ウィンドウ（ビューポート）の高さいっぱいに要素を表示したい場合は、heightプロパティとvh単位を組み合わせるのが一般的です。この記事では、ウィンドウの高さ100%のDIVを作成する具体的な方法を、サンプルコード付きでわかりやすく解説します。
heightプロパティの構文
CSSのheightプロパティは、次のように記述します。
Selector {
height: /*値*/
}値にはpxや%などの絶対・相対単位を指定できます。親要素に対する割合（%）で高さを指定する場合、親要素にも明示的に高さが設定されている必要がある点に注意しましょう。
例1：html・bodyに100vhを指定して全画面表示にする
以下の例では、html要素とbody要素に100vhを指定し、その子要素であるdivにheight: 100%を設定することで、画面全体の高さを持つDIVを作成しています。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
html, body {
margin: 0px;
height: 100vh;
}
div {
height: 100%;
text-align: center;
background: mistyrose;
}
</style>
</head>
<body>
<div>100% height!!</div>
</body>
</html>このコードを実行すると、次のような出力が得られます。
ポイント：vh単位とは
vhは「viewport height」の略で、1vhがビューポート（ブラウザの表示領域）の高さの1%に相当します。したがって、100vhを指定すれば、スクロールバーを含まないウィンドウ全体の高さと一致します。margin: 0pxを指定しているのは、デフォルトのマージンによる余白を消して、DIVを画面いっぱいに表示させるためです。
例2：Flexboxと100vhを組み合わせて複数のDIVを並べる
次の例では、bodyにFlexboxレイアウトを適用して複数のdivを横並びに配置し、それぞれのdivに100vhの高さを指定しています。各セクションが画面の高さいっぱいに広がる、モダンなWebサイトでよく使われるレイアウトです。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
html, body {
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 0px;
height: 100vh;
box-shadow: inset 0 0 40px lightblue;
}
div {
width: 40%;
height: 100vh;
text-align: center;
box-shadow: inset 0 0 20px lightcoral;
}
</style>
</head>
<body>
<div>Watch This!</div>
<div>Let Me Show You How The Boss Does It!!</div>
<div>Open Up The Sky!!</div>
<div>GO! GO! GO!!</div>
</body>
</html>このコードを実行すると、次のような出力が得られます。
まとめ
ウィンドウの高さ100%のDIVを作成するには、height: 100%を使う場合は親要素（html・body）にも高さが必要であり、100vhを使えば親要素に依存せず直接ビューポート基準で高さを指定できる、というのが重要なポイントです。用途に応じて両者を使い分けることで、柔軟なフルスクリーンレイアウトを実現できます。
-
CSSで要素をブラウザウィンドウの高さ全体に広げる方法をわかりやすく解説
CSSを使って要素をブラウザウィンドウの高さ全体に広げるには、html 要素と body 要素の高さを 100% に設定した上で、対象の要素にも height: 100% を指定します。以下に具体的な実装例を示します。 コード例 <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> *{ box-sizing: border-box; } html, body { height: 100%;
-
CSSのclip-pathプロパティで三角形を作成する方法
三角形は、CSSのclip-pathプロパティを使うことで簡単に作成できます。画像ファイルやSVGに頼らず、純粋なCSSだけで図形を描画できるため、軽量で柔軟なデザイン表現が可能になります。 clip-pathプロパティとは clip-pathプロパティは、要素の表示範囲を切り抜く（クリッピングする）ためのプロパティです。特にpolygon()関数を使用すると、複数の座標点を指定することで任意の多角形を自由に描くことができます。 構文 CSS clip-pathプロパティの基本構文は以下のとおりです。 Selector { clip-path: