回答率: 85.46%

質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう

ただいま回答率: 85.46%

トップ HTML5に関する質問

Q&A

1回答

346閲覧

Web App版のTwitterのヘッダーとメインコンテンツのレイアウトを再現したい。

総合スコア17

0グッド

0クリップ

投稿2020/05/03 08:22

0

0

やりたいこと

Web App版 Twitterの

左ヘッダー & 固定
右メインコンテンツ
メインコンテンツの中でも固定の部分と可動の部分に分かれる
レスポンシブ

といった特性をもつレイアウトを再現したい。

試したこと

以下の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;__とするのは間違いだと思う。

ご教授いただければ幸いです。
宜しくお願い致します。

2020/05/03 08:26

で、なぜ前の質問を放置で https://teratail.com/questions/258382 新しい質問を立てられたのでしょうか。質問を編集すれば良い話では？

2020/05/03 08:51

クリップをしている人もいなかったので、新しく投稿することで、この質問を見て頂く機会を増やすためです。もし、編集したときに、この質問が関連するタグにおいて新しい質問としてカウントされるのであれば、この行為は確かに無駄な行為といえます。

2020/05/03 08:53

質問の内容が重なった投稿が一つから二つに増えることが重大な問題ならば、陳謝しなければなりません。

2020/05/03 08:55

この質問内容に不備がございましたら、ご指摘いただければ幸いです。

2020/05/03 08:59

質問を編集すると「アクティブ」タブに上がってくるので、新しく投稿する必要はないです。元の質問が何もアクションないまま放置されることのほうが問題です。こちらの質問を削除依頼だして、元の質問で進められた方が良いと思います

2020/05/03 09:14

元の質問の削除依頼をだしました。大変有益な情報提供に感謝します。

2020/05/03 09:25

「こちらの質問」と書いたのですが・・・（本来そちらの方が運用方針にかなってますし）・・まあいいか・・

行動規範の内容に同意します

回答1件

0

もしTwitterのようなUI目指すのでしたら、自力ではおそらくヌケモレが出るので、CSSフレームワークの利用を強くすすめます。

Bootstrap, from Twitterというのも出ているくらいです。
Bootstrap本舗のほうでもおおよそ近いレイアウトは可能かと思います。

※完全自作をしたいのでしたら、かなりCSSに精通してないと厳しいと思います。
私は迷わずフレームワークを選びます。

投稿2020/05/03 09:28

総合スコア80861

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップ HTML5に関する質問

Web App版のTwitterのヘッダーとメインコンテンツのレイアウトを再現したい。