実現したいこと
画像のような構成のウェブをflexやgridを用いてイメージしたい。
前提
作ってあるhtml要素以外、新規のブロック追加・変更・削除はしないこと
cssはプロパティの変更・追加は問題ないが、セレクタ自体の変更・削除・追加は行わないこと
セレクタは必要に応じて、id、classは追加しても問題ありません。
発生している問題・エラーメッセージ
下記のように現在コードを入力していますが、全くなりません。
エラーメッセージ
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>flexbox応用</title> 6 <link rel="stylesheet" type="text/css" href="base.css"> 7</head> 8<body> 9 <header> 10 <h1>ヘッダー</h1> 11 </header><!-- header --> 12 13 <main> 14 <nav class="top-content"> 15 <a href="#">TOP</a> > 16 <a href="#">パンくず1</a> > 17 <a href="#">パンくず2</a> 18 </nav><!-- bottom-content --> 19 20 <div class="left-content"> 21 <p>left-content</p> 22 <ul> 23 <li>カラムメニュー1</li> 24 <li>カラムメニュー2</li> 25 <li>カラムメニュー3</li> 26 <li>カラムメニュー4</li> 27 <li>カラムメニュー5</li> 28 <li>カラムメニュー6</li> 29 <li>カラムメニュー7</li> 30 </ul> 31 </div><!-- left-content --> 32 33 <div class="right-content"> 34 <p>right-content</p> 35 <div class="box-container"> 36 <div class="content-block"> 37 <p>box1</p> 38 </div><!-- content-block --> 39 <div class="content-block"> 40 <p>box2</p> 41 </div><!-- content-block --> 42 <div class="content-block"> 43 <p>box3</p> 44 </div><!-- content-block --> 45 <div class="content-block"> 46 <p>box4</p> 47 </div><!-- content-block --> 48 <div class="content-block"> 49 <p>box5</p> 50 </div><!-- content-block --> 51 <div class="content-block"> 52 <p>box6</p> 53 </div><!-- content-block --> 54 <div class="content-block"> 55 <p>box7</p> 56 </div><!-- content-block --> 57 <div class="content-block"> 58 <p>box8</p> 59 </div><!-- content-block --> 60 <div class="content-block"> 61 <p>box9</p> 62 </div><!-- content-block --> 63 </div><!-- box-container --> 64 </div><!-- right-content --> 65 66 <div class="bottom-content"> 67 <p>bottom-content</p> 68 </div><!-- bottom-content --> 69 </main><!-- main --> 70 71 <footer> 72 <p>フッター</p> 73 <div class="footer-container"> 74 <div class="footer-left"> 75 <p>左テキスト</p> 76 </div><!-- footer-left --> 77 78 <div class="footer-right"> 79 <p>右テキスト</p> 80 <p>右テキスト</p> 81 <p>右テキスト</p> 82 </div><!-- footer-right --> 83 </div><!-- footer-container --> 84 </footer><!-- footer --> 85</body> 86</html> 87
css
1header { 2 height: 120px; 3 background-color: #efe; 4 border-bottom: 1px solid #ccc; 5} 6 7main { 8} 9 10.top-content { 11} 12.top-content a { 13 font-size: 11px; 14} 15 16.left-content { 17 background-color: #eef; 18 border: 1px solid #ccc; 19 display:grid; 20 grid-template-rows: 10px,10px,10px,10px,10px,10px,10px; 21 grid-template-columns:10px; 22 grid-gap:1px; 23} 24.left-content ul { 25} 26 27.right-content { 28 background-color: #fee; 29 border: 1px solid #ccc; 30} 31.box-container { 32} 33.content-block { 34 background-color: #eee; 35 border: 1px solid #ccc; 36} 37.box-red { 38 background-color: #f99; 39} 40 41.bottom-content { 42 width: 100%; 43 height: 120px; 44 background-color: #eff; 45 border: 1px solid #ccc; 46} 47 48footer { 49 height: 180px; 50 background-color: #eee; 51 border-top: 1px solid #ccc; 52} 53.footer-container { 54} 55.footer-left { 56 width: 15%; 57 background-color: #fef; 58 border: 1px solid #ccc; 59 padding: 10px; 60} 61.footer-right { 62 width: 35%; 63 background-color: #ffe; 64 border: 1px solid #ccc; 65 padding: 10px; 66} 67.text-rihgt { 68 text-align: right; 69}
試したこと
gridおよびflexを学び直して、親要素を意識してコードを入力したりした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/05/23 12:55