CSSにおけるレイアウトについて

前提・実現したいこと

このような構図のWebページを作ろうとしています。
メニュー部分はドロップダウンにしようとしています。

発生している問題・エラーメッセージ

現状のコードを実行すると以下のように表示され、
メニュー部分の下にarticle部分が表示されてしまいます。
メニュー部分のドロップダウンを表示しても下はarticle部分は表示されず、
空白にするにはcssをどのように修正すればいいでしょうか。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang = "ja">
3<html>
4<head>
5	<meta charset= "utf-8">
6	<title>Trial</title>
7	<link rel="stylesheet" href="trial.css" type="text/css" />
8</head>
9
10<body>
11	<!-- header -->
12	<header>
13	<h1>Trial</h1>
14	</header>
15	
16	<!-- menu -->
17	<nav class ="menu">
18		<h2>メニュー</h2>
19		<ul>
20			<li>項目１</li>
21			<li>項目2</li>
22			<li>項目3</li>
23		</ul>
24	</nav>
25
26	<!-- main content -->
27	<article>
28	<h2>タイトル1</h2>
29	<p>文章</p>
30	<br>
31	<h2>タイトル2</h2>
32	<p>文章2段1
33	<br>段2
34	<br>段3</p>
35	<br>
36	<h3>タイトル3</h3>
37	<p>文章3段1
38	<br>段2</p>
39		<ul>
40		<ol>
41			<li>リスト1</li>
42			<li>リスト2</li>
43			<li>リスト3</a></li>
44		</ol>
45		</ul>
46	</article>
47
48	<footer>
49		<small>著作権</small>
50	</footer>
51
52</body>
53</html>

css
1header h1 { 
2	text-align: center;
3}
4
5nav {
6	float: left;
7	width: 200px;
8}
9
10
11
12
13article {
14	 left-margin: 210px;
15}
16
17footer {
18	clear: left;
19	text-style: italic;
20}

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

回答3件

いくつか方法があり、その多くを網羅している記事があるので紹介します。

【段組みのCSS。】
https://lopan.jp/layout2/

【よこ並びのCSS。】
http://lopan.jp/layout/

投稿2018/05/25 17:48

kei344

総合スコア69407

float: left;よりも、display: flex;が使えるならそっちの方が扱いやすいと思ったので、そちらも提案します。
HTMLも少しいじりました！

背景の色をみやすいように入れてます。マージンや横幅もざっくり入れてますので、色々調整してみてください。
コードペンで作りました。

HTML
1    <!-- header -->
2    <header>
3    <h1>Trial</h1>
4    </header>
5
6<div class="wrap">
7    <!-- menu -->
8    <nav class ="menu">
9        <h2>メニュー</h2>
10        <ul>
11            <li>項目１</li>
12            <li>項目2</li>
13            <li>項目3</li>
14        </ul>
15    </nav>
16
17    <!-- main content -->
18    <article class="article-area">
19    <h2>タイトル1</h2>
20    <p class="text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ</p>
21    <h2>タイトル2</h2>
22    <p class="text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ</p>
23    <h3>タイトル3</h3>
24    <p class="text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ</p>
25        <ul>
26          <ol>
27              <li>リスト1</li>
28              <li>リスト2</li>
29              <li><a href="#">リスト3</a></li>
30          </ol>
31        </ul>
32    </article>
33</div>
34
35    <footer>
36        <small>著作権</small>
37    </footer>

CSS
1header {
2    width: 100%;
3    margin: 0px;
4    background: #999;
5}
6
7header h1 { 
8  text-align: center;
9  margin: 0px;
10}
11
12.wrap {
13  display: flex;
14}
15
16nav {
17    width: 20%;
18    padding: 0 2%;
19}
20
21article {
22    width: 80%;
23    padding: 0 2%;
24    background: #e7e7e7;
25}
26
27.text {
28  margin: 0 0 30px 0;
29}
30
31footer {
32  width: 100%;
33  text-style: italic;
34  background: pink;
35  padding: 2%;
36  text-align: center;
37  background: #999;
38}

投稿2018/05/25 15:22

編集2018/05/25 15:24

hitominjar

総合スコア19

ベストアンサー

css
1article {
2  left-margin: 210px;
3  float: left; <!-- これを追加 -->
4}

投稿2018/05/25 14:32

root_jp

総合スコア4666

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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