Q&A
で、なぜ前の質問を放置で
https://teratail.com/questions/258382
新しい質問を立てられたのでしょうか。
質問を編集すれば良い話では？
やりたいこと
- 左ヘッダー & 固定
- 右メインコンテンツ
- メインコンテンツの中でも固定の部分と可動の部分に分かれる
- レスポンシブ
といった特性をもつレイアウトを再現したい。
試したこと
以下のHTMLとCSS。
レスポンシブな挙動は再現した。
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 8 <style> 9 html, body { 10 padding: 0; 11 margin: 0; 12 width: 100%; 13 height: 100%; 14 } 15 16 @media (min-width: 700px) { 17 #app { 18 width: 100%; 19 height: 100%; 20 21 display: flex; 22 justify-content: center; 23 } 24 25 #header { 26 border: 1px dotted grey; 27 width: 80px; 28 } 29 30 #main { 31 border: 1px dotted grey; 32 width: 620px; 33 34 display: flex; 35 flex-flow: column nowrap; 36 } 37 38 #main #description { 39 border: 1px dotted grey; 40 height: 80px; 41 } 42 43 #main #contents { 44 border: 1px dotted grey; 45 flex: 1; 46 } 47 } 48 49 @media (max-width: 700px) { 50 #app { 51 width: 100%; 52 height: 100%; 53 54 display: flex; 55 } 56 57 #header { 58 border: 1px dotted grey; 59 width: 80px; 60 } 61 62 #main { 63 border: 1px dotted grey; 64 flex: 1; 65 66 display: flex; 67 flex-flow: column nowrap; 68 } 69 70 #main #description { 71 border: 1px dotted grey; 72 height: 80px; 73 } 74 75 #main #contents { 76 border: 1px dotted grey; 77 flex: 1; 78 } 79 } 80 </style> 81</head> 82<body> 83 <div id="app"> 84 <div id='header'> 85 86 </div> 87 <div id='main'> 88 <div id='description'> 89 90 </div> 91 <div id='contents'> 92 93 </div> 94 </div> 95 </div> 96</body> 97</html>
わからないこと
ここからどうやってヘッダーと、メインコンテンツのヘッダー(idをdescriptionとしている)を本家のように固定するかがわからない。
スクロールの挙動を見るに、コンテンツの部分を__overflow: scroll;__とするのは間違いだと思う。
ご教授いただければ幸いです。
宜しくお願い致します。
クリップをしている人もいなかったので、新しく投稿することで、この質問を見て頂く機会を増やすためです。
もし、編集したときに、この質問が関連するタグにおいて新しい質問としてカウントされるのであれば、この行為は確かに無駄な行為といえます。
質問の内容が重なった投稿が一つから二つに増えることが重大な問題ならば、陳謝しなければなりません。
この質問内容に不備がございましたら、ご指摘いただければ幸いです。
質問を編集すると「アクティブ」タブに上がってくるので、新しく投稿する必要はないです。
元の質問が何もアクションないまま放置されることのほうが問題です。
こちらの質問を削除依頼だして、元の質問で進められた方が良いと思います
元の質問の削除依頼をだしました。大変有益な情報提供に感謝します。
「こちらの質問」と書いたのですが・・・（本来そちらの方が運用方針にかなってますし）
・・まあいいか・・
回答1件
0
もしTwitterのようなUI目指すのでしたら、自力ではおそらくヌケモレが出るので、CSSフレームワークの利用を強くすすめます。
Bootstrap, from Twitterというのも出ているくらいです。
Bootstrap本舗のほうでもおおよそ近いレイアウトは可能かと思います。
※完全自作をしたいのでしたら、かなりCSSに精通してないと厳しいと思います。
私は迷わずフレームワークを選びます。
投稿2020/05/03 09:28
総合スコア80875
あなたの回答
tips
プレビュー
