問題
21
HTML/CSS
固定幅サイドバーとメインコンテンツレイアウト
Flexboxを使用したレイアウト設計と、要素の柔軟なサイズ設定の問題です。
HTML/CSSの問題に挑戦しよう！
問題
「固定幅サイドバーとメインコンテンツレイアウト」
以下のような、固定幅のサイドバーと可変幅のメインコンテンツを持つレイアウトをFlexboxで作成してください。
あらかじめエディタに書くコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定幅サイドバーとメインコンテンツレイアウト</title>
</head>
<body>
<div class="container">
<div class="sidebar">サイドバー</div>
<div class="main-content">メインコンテンツ</div>
</div>
</body>
</html>
¥HTML¥
期待する画面
解答と解説（固定幅サイドバーとメインコンテンツレイアウト）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
このレイアウトでは、Flexboxを使用して固定幅のサイドバーと可変幅のメインコンテンツを実現しています。
親要素にdisplay: flexを指定することで、子要素が横並びに配置されます。
sidebarクラスには、width: 200pxを設定し、固定幅のサイドバーを作成します。
一方、main-contentクラスにはflex-grow: 1を指定し、メインコンテンツが残りのスペースを占有するようにします。この方法によって、サイドバーの幅が固定される一方、メインコンテンツ可変します。
