Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
HPのカテゴリーとボタンが入ったコンテナと、記事の内容が書かれた縦に長いコンテナが隣り合ったレイアウトになっているのですが、記事が長くなると隣のカテゴリーが入ったグリッドも長くなってしまうので、カテゴリーが入ったレイアウトだけそのままのサイズで固定したいです。
CSS
body{
background-color : #cccccc;
color : white;
text-indent: 1em;
list-style-type: none;
}
.grid {
display: grid;
grid-template-columns: [left] 380px [main] 900px;
grid-template-rows: [top] 140px [nav] 500px;
gap: 20px;
width: 500px;
grid-template-areas:
"header header"
"nav main"
"nav main"; /* ←navがmainの長さと同じになります*/
}
.grid > div {
border: solid 1px gray;
}
.header {
grid-area: header;
background-image: url();
}
.nav {
grid-area: nav;
background: #;
font-size: 50px;
grid-row: 180px;
}
.ul {
list-style-type: none;
padding: 0;
}
.main {
grid-area: main;
background: ;
}
html （画像ファイル名等は消してますが入れてもサイズ的に問題は無かったです）
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet"> </head> <body> <div class="grid"> <div class="header"></div> <div class="nav"> /* ここからカテゴリー*/ <div align="center"> </div> <div align="center"> <div> </div> <div> </div> <div> </div> <div> </a> </div> <div> </div> <div> </div> <div> </div> </div> </div> /* ここまでカテゴリー*/ <div class="main"> /* ここから記事*/ <div align="center"> <h1></h1> <p> <div align="center"> </div> </p> <p> <div align="center"> </div> </p> <p> <div align="center"> </div> </p> </div> </div> </div> /* ここまで記事*/ </body> </html>
回答1件
ベストアンサー
あなたの回答
tips
プレビュー
