急いでいます！

添付画像のような画面を作成してみたんですがうまいこといきません

締切済

質問者：39OK
質問日時：2021/08/03 05:42
回答数：1件

添付画像のような画面を作成してみたんですがうまいこといきません
下記の解答を参考に作ったのですが行き詰っていますか
どなたか補正していただけませんでしょうか
私の掲載したコードを全く無視してコーディングしていただいてもかまいません
すみません。。。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="">
<style>
#page {
display: grid;
width: 100%;
grid-template-columns: 150px 1fr;
grid-template-areas:
"nav"
"main";
}

nav {
background-color: lightblue;
grid-area: nav;
}

main {
background-color: rgb(226, 188, 204);
grid-area: main;

display: grid;
width: 100%;
grid-template-rows: 200px 200px;
grid-template-areas:
"main-search"
"main-list";
}

.main-search{
grid-template-areas:
"main-search"
}

.main-list{
grid-template-areas:
"main-list"
}

.main-search td:first-child {
background-color: rgb(223, 115, 27);
width: 28%;
}

.main-search table tr td {
border-collapse: collapse;
border: 1px solid green;
}

.main-search table {
border-collapse: collapse;
border: 1px solid green;
}

.main-list td:first-child {
background-color: rgb(223, 115, 27);
width: 28%;
}

.main-list table tr td {
border-collapse: collapse;
border: 1px solid green;
}

.main-list table {
border-collapse: collapse;
border: 1px solid green;
}
</style>
</head>

<body>
<section id="page">

<nav>Navigation</nav>
<main>
<div class="main-search">
<table>
<tr>
<td>ss</td>
<td>ss</td>
<td>ss</td>
<td>ss</td>
</tr>
</table>
</div>
<div class="main-list">
<table>
<tr>
<td>ff</td>
<td>ff</td>
<td>gg</td>
<td>gg</td>
</tr>
</table>
</div>
</main>
</section>
</body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2021/08/04 00:01

こんばんは

ご提示の画像とHTMLに何らの関連があるとも思えないので、何をどうしたいのかわかりません。
雰囲気からすると、もしかすると画像左側のメニュー（？）部分を模写したいということなのでしょうか？
模写をしているのであれば、やみくもに作成して質問することよりも、元にしているサイトのソースを参考にするのが近道と思いますよ。

添付の画像がよく見えませんけれど、左側は開閉式のツリー形式のメニューになっているのではないでしょうか？
（単純なものなのか、複層構成のものかまではわかりませんけれど…）
もしも開閉式なら、少しだけ仕組みに工夫が必要になりますけれど、そのあたりの情報は、検索してみる気さえあれば、山ほど説明サイトが見つかるはずです。

また、原則的に『HTMLで文書構成をマークアップし、CSSでレイアウトを行う』という考え方が一般的と思いますけれど、ご提示のマークアップはまったく逆行しているようにも思われます。
tableやgridなど用いずとも、左カラムの包含要素内にシンプルなリスト構造で表示すれば、それで充分そうに思われますけれど？
失礼ながら、そのあたりの考え方を改めることから始めた方が宜しそうに感じられます。
（敢えて複雑な形式で実現するにしても、その後でないと、ただメタメタになるばかりかと）

前回、前々回のご質問を見ても、質問者様からの反応は何もないようですし（質問しっ放しの放置状態？）、理解しようとしている節も感じられないので、まずは「HTMLとCSSの基本」を学習することのほうが先決のように思われます。
何をどうしたいのかさっぱりわかりませんけれど、（回答しても無駄な気もしますが）何かのご参考にでもなれば。