HTMLとCSSでサイドバーとメインコンテンツ領域を含むページを作成する方法
html要素とbody要素の高さ（height）を100%に設定することで、ブラウザ画面いっぱいに広がる流動的なレイアウトのWebページを作成できます。サイドバーとメインコンテンツ領域を左右に並べた2カラム構成にする場合、CSSのdisplayプロパティでtableとtable-cellを活用すると、各カラムの高さが自動的に揃い、背景も最下部まできれいに伸びるため便利です。
コード例
以下の例では、親要素「#parent」にdisplay: table;を指定し、サイドバー「#side」とメイン領域「#main」にそれぞれdisplay: table-cell;を設定しています。幅はサイドバーが20%、メイン領域が80%です。
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
height: 100%;
color: white;
font-size: 2em;
line-height: 200px;
}
#parent {
display: table;
width: 100%;
height: 100%;
}
#side {
display: table-cell;
background-color: turquoise;
width: 20%;
vertical-align: top;
box-shadow: inset 0 0 10px black;
}
#main {
display: table-cell;
width: 80%;
background: url("https://images.unsplash.com/photo-1611944444060-b50a1d80cfe6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=800&ixlib=rb1.2.1&q=80&w=600");
}
</style>
</head>
<body>
<div id="parent">
<div id="side">Side</div>
<div id="main">Main</div>
</div>
</body>
</html>
ポイント解説
- html, body { height: 100%; }
ページ全体の高さをビューポートいっぱいまで確保します。 - #parent { display: table; }
親要素をテーブルのように振る舞わせ、子要素を横並びに配置できるようにします。 - #side / #main { display: table-cell; }
各領域をテーブルのセルとして扱うことで、内容量に関係なく両カラムの高さが自動的に揃います。 - vertical-align: top;
セル内のコンテンツを上揃えにし、意図しない中央寄せを防ぎます。
表示結果
このコードを実行すると、左側にターコイズ色のサイドバー、右側に背景画像を敷いたメインコンテンツ領域が並んだ、次のような画面が表示されます。
-
CSSとJavaScriptで近日公開（Coming Soon）ページを作成する方法
CSSとJavaScriptを組み合わせれば、サイトの公開前に訪問者へ向けて表示する「近日公開（Coming Soon）」ページに、リアルタイムで動くカウントダウンタイマーを簡単に組み込めます。この記事では、全画面の背景画像の中央にタイトルを配置し、残りの日・時・分・秒を1秒ごとに更新しながら表示するページの作り方を、サンプルコードとともにわかりやすく解説します。 コード例 <!DOCTYPE html> <html> <style> body { &
-
CSSで固定サイドバーとスクロール可能なコンテンツ領域を持つフルハイトページを作成する方法
高さを100%に設定し、各要素の配置（position）を適切に指定することで、画面全体の高さを持つページに、固定サイドバーとスクロール可能なメインコンテンツ領域を実装できます。 実装のポイント このレイアウトを実現するための重要なポイントは以下の3つです。 サイドバーの固定：position: fixed を指定し、top: 0; left: 0; で画面左端に固定します。height: 100% により、常に画面いっぱいの高さが保たれます。 メインコンテンツの位置調整：サイドバーの幅（140px）分だけ margin-left を設定することで、コンテンツがサイドバーの下に隠れるのを防ぎ