アプリ版：「スタンプのみでお礼する」機能のリリースについて

急いでいます！

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

締切済

  • 質問者：39OK
  • 質問日時：
  • 回答数：2件

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


https://oshiete.goo.ne.jp/qa/12486408.html



<!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%;
height: 1000px;
grid-template-rows: 100px 50px 100px 100px;
grid-template-columns: 500px 1fr;
grid-template-areas:
"main-left-row1 main-right-row1"
"main-left-row2 main-right-row2"
"main-left-row3 main-right-row3"
"main-row4 main-row4";
gap: 40px 100px;
}


main-left-row1 {
background-color: yellow;
grid-area: main-left-row1;

border: 1px solid green;
}

main-right-row1 {
grid-area: main-right-row1;
background: #aaf;

border: 1px solid green;
}

main-left-row2 {
background-color: yellow;
grid-area: main-left-row2;

border: 1px solid green;
}

main-right-row2 {
grid-area: main-right-row2;
background: #aaf;

border: 1px solid green;
}

main-left-row3 {
background-color: yellow;
grid-area: main-left-row3;

border: 1px solid green;
}

main-right-row3 {
grid-area: main-right-row3;
background: #aaf;

border: 1px solid green;
}

main-row4 {
grid-area: main-row4;
background: #aaf;

border: 1px solid green;
}
</style>
</head>

<body>

<section id="page">
<main-left-row1><table border="1px" width="300px"><tr><td></td><td></td></tr></table></main-left-row1>
<main-right-row1><table border="1px" width="300p"><tr><td></td><td></td></tr></table></main-right-row1>
<main-left-row2><table border="1px" width="300p"height="100px"><tr><td></td><td></td></tr></table></main-left-row2>
<main-right-row2>Main area</main-right-row2>
<main-left-row3>Main area</main-left-row3>
<main-right-row3>Main area</main-right-row3>
<main-row4>Main area</main-row4>
<main-row4>Main area</main-row4>
</section>

</body>

</html>

「添付画像のような画面を作成してみたんです」の質問画像
通報する

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

質問の本文を隠す

A 回答 (2件)

参考程度に

No.2

  • 回答者： fujillin
  • 回答日時：

こんにちは



ご提示の画像の上の部分のレイアウトのことでしょうか？

画像とご提示のHTMLが全然整合していないので、どちらを基にすればよいのかわからないですし、tableでレイアウトしたいのかgridなのかもわかりません。

画像の内容を正とするなら、「項目―内容」のセットのようなので、「dtーdd」などの構成にしておくのがよさそうに感じました。
画像では空白行があるようなので、dtーdtをセットにできるように
　<div><dt></dt><dd></dd></div>
のような構成にしておく方が扱いやすいように思います。
（HTML5.2以降であれば、dl要素内にdiv要素を置くことができます）

とは言え、文書構成上は必ずしも必要ではないdivが多くなってしまうので、単純にdlーdtーddのみの構成でレイアウトできないかを試みてみました。
ご提示のCSSではgrid（？）をお考えのようなのでgridで試みましたが、（実は、私はgridレイアウトをよくわかっていないので）すみませんけれどサンプルは少々適当です。
多分、もっと適切な方法があるのではとも思いますが、以下ご参考にでもなれば。
（同じHTMLで、flexやtableでレイアウトする方法もありそうに思います）

※ 左右の段組み間の余白は、gapで処理するのは面倒そうなので、marginで処理しています。
　（上述のdivでセットをまとめる文書構成なら、簡単にgapで処理できます）
※ 空白行等に関しては、空白のdtーddを置くことであきを確保する方法にしています。
　（無駄なdtーddを置かずに、位置指定のmargin等で処理する方法もあると思います）
※ borderは一律指定にしてあるので、サンプルでは隣接要素間で2重になっています。
　（各要素できちんと指定すれば、単線にすることは可能でしょう）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
#list { padding: 0 1em; }
h2 { color: limegreen; }
#list dl {
display: grid;
--w1: calc(15% - 1em);
--w3: calc(35% - 1em);
--w2: calc(35% + 3em);
grid-template-columns: var(--w1) var(--w2) var(--w1) var(--w3);
}

#list dt, #list dd {
margin: 0;
box-sizing: border-box;
border: 1px solid green;
padding-left: .6em;
min-height: 1.6em;
}
#list dt { background-color: palegreen; }
#list dt.empty, #list dt.empty + dd {
border: none;
background-color: transparent;
}

#list dd:nth-of-type(2n+1) { margin-right: 4em; }
</style>

</head>
<body>
<section id="list">
<h2>タイトル</h2>
<dl>
<dt>項目1</dt><dd>内容1</dd>
<dt>項目2</dt><dd>内容2</dd>
<dt class="empty"></dt><dd></dd>
<dt class="empty"></dt><dd></dd>
<dt>項目3</dt><dd>内容3</dd>
<dt>項目4</dt><dd>内容4</dd>
<dt>項目5</dt><dd>内容5</dd>
<dt>項目6</dt><dd>内容6</dd>
<dt>項目7</dt><dd>内容7</dd>
<dt>項目8</dt><dd>内容8</dd>
<dt>項目9</dt><dd>内容9</dd>
<dt>項目A</dt><dd>内容A</dd>
<dt>項目B</dt><dd>内容B</dd>
<dt class="empty"></dt><dd></dd>
<dt>項目C</dt><dd>内容C</dd>
<dt>項目D</dt><dd>内容D</dd>
<dt>項目E</dt><dd>内容E</dd>
<dt>項目F</dt><dd>内容F</dd>
</dl>
</section>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： gura_
  • 回答日時：

39OKさん


･････解答を参考に作ったのですが･･･････

ご参考に↓
https://oshiete.goo.ne.jp/qa/12486408.html

<!DOCTYPE html>
<html lang="ja">
<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-rows: 50px 200px 100px 400px;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"main-left-row1 main-right-row1"
"main-left-row2 main-right-row2"
"main-left-row2 main-right-row3"
"main-row4 main-row4";
gap: 50px 100px;
}
#page table tr td {
border-collapse: collapse;
border: 1px solid green;
}
#page table { border-collapse: collapse;
border: 1px solid green;
}
#main-left-row1 td:first-child, #main-right-row1 td:first-child, #main-left-row2 td:first-child, #main-right-row2 td:first-child, #main-right-row3 td:first-child {
background-color: #efe;
width: 28%;
}

#main-left-row1 {grid-area: main-left-row1; }
#main-right-row1 { grid-area: main-right-row1; }
#main-left-row2 { grid-area: main-left-row2;}
#main-right-row2 { grid-area: main-right-row2; }
#main-right-row3 { grid-area: main-right-row3; }
#main-row4 { grid-area: main-row4; }
#main-row4 tr:nth-child(2n) td { background-color: #fff; }
#main-row4 tr:nth-child(2n+1) td { background-color: #efe; }
#main-row4 tr:first-child td { background-color: #ded; }
#main-row4 tr td { width:12%; }
#main-row4 tr td:nth-child(3) { width:26%; }
#main-row4 tr td:nth-child(6) { width:21%; }
#main-row4 tr td:last-child { width:5%; }

</style>
</head>

<body>
<section id="page">
<table id="main-left-row1"><tr><td></td><td></td></tr></table>
<table id="main-right-row1"><tr><td></td><td></td></tr></table>
<table id="main-left-row2"><tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
<table id="main-right-row2"><tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
<table id="main-right-row3"><tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
<table id="main-row4">
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</section>
</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報