基本的なCSSレイアウトについて

現在CSSの勉強をしているのですが、画像のように、300x200のダミーバナーがお知らせの右に置きたいのですが、なぜかfooterとかぶってしまいます。mainタグの中にいれてあげたので、このような現象が起こる原因がわかりません。どうしたらいいでしょうか。

css
1header{
2    border-top: 8px solid #614226;
3}
4header h1{
5    text-align: center;
6
7}
8
9header ul{
10    width: 940px;
11    list-style-type: None;
12    margin: 0 auto 0 auto;
13
14}
15
16header ul li{
17    width: 155px;
18    float: left;
19}
20
21header a{
22    text-decoration: None;
23    color: white;
24    background-color: #614226;
25    display: block;
26    margin-left: 2px;
27    text-align: center;
28}
29.current a{
30    background-color: black;
31}
32header a:hover, active{
33    background-color: gray;
34}
35main{
36    width: 900px;
37    margin: 0 auto 0 auto;
38}
39
40main section{
41    width: 500px;
42}
43main h2{
44    border-bottom: 1px solid #614226;
45    border-left: 8px solid #614226;
46    padding-left: 10px;
47}
48/* aside{
49    float: right;
50    width: 300px;
51}
52aside ul{
53    margin: 0;
54    padding: 0;
55  
56    list-style-type: None;
57}
58aside ul li{
59    margin-bottom: 20px;
60
61} */
62
63footer{
64    color: white;
65    background-color: #614226;
66    width: 900px;
67    margin: 0 auto 0 auto;
68    text-align: center;
69}
70footer ul{
71    /* margin-bottom: 20px; */
72    width: 600px;
73    margin: 0 auto 0 auto;
74    list-style-type: None;
75    padding-left: 0;
76
77}
78footer li{
79    /* float: left; */
80    display: inline;
81
82}
83footer a{
84    text-decoration: None;
85    color: white;
86    margin-left: 5px;
87}
88footer a:hover{
89    text-decoration: underline;
90}
91#sidebar {
92    float: right;
93    width: 300px;
94  }
95#sidebar ul {
96    margin: 0;
97    padding: 0;
98  }
99   
100  #sidebar ul li {
101    margin-bottom: 20px;
102    list-style-type: none;

html
1    <!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="style.css">
7    <title>Document</title>
8</head>
9<body>
10    <header>
11    <h1>CSS Cafe</h1>
12    <nav>
13        <ul>
14            <li class='current'><a href="#">ホーム</a></li>
15            <li><a href="#">商品情報</a></li>
16            <li><a href="#">店舗紹介</a></li>
17            <li><a href="#">アクセス</a></li>
18            <li><a href="#">会社情報</a></li>
19            <li><a href="#">お問い合わせ</a></li>
20        </ul>
21    </nav>
22    </header>
23    <main>
24        <img src="http://via.placeholder.com/940x300" alt="">
25    
26        <section>
27            <h2>お知らせ</h2>
28            <dl>
29                <dt>2018年3月10日</dt>
30                <dd>リニューアルオープンしました。</dd>
31                <dt>2018年4月15日</dt>
32                <dd>4/27（金）は設備メンテナンスのため休業いたします。</dd>
33                <dt>2018年4月20日</dt>
34                <dd>ゴールデンウィークは休まず営業いたします</dd>
35            </dl>
36        </section>
37
38        <section>
39            <h2>キャンペーン情報</h2>
40            <ul>
41                <li>日頃の感謝を込めて、パスタ全品がいつもよりお得に！</li>
42                <li>平日11時から14時までお得なランチタイムを実施中。</li>
43                <li>バイオリン演奏付きのスペシャルディナーイベントの早期予約受付中。</li>
44            </ul>
45        </section>
46        <aside id='sidebar'>
47            <ul>
48                <li><img src="http://via.placeholder.com/300x200" alt=""></li>
49                <li><img src="http://via.placeholder.com/300x200" alt=""></li>
50            </ul>
51        </aside>
52    </main>
53    <footer>
54        <ul>
55            <li><a href="#">ホーム</a></li>
56            <li><a href="#">商品情報</a></li>
57            <li><a href="#">店舗紹介</a></li>
58            <li><a href="#">アクセス</a></li>
59            <li><a href="#">会社情報</a></li>
60            <li><a href="#">お問い合わせ</a></li>
61        </ul>
62        <br>
63        <small>(c) 2018 CSS Cafe</small>
64
65    </footer>
66</body>
67</html>

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

回答2件

ベストアンサー

HTML文書の側で、サイドバーの記述を「最初のsectionより前」に移動してください。
floatを使って左右に並べる場合、「空いた部分に以下の要素が回り込む」ので、サイドバーを先に書かないと、mainの残りの要素が回り込みません。

ついでに言うと、footerにclear: right;を書いて、回り込みを解除しておかないと、サイドバーの高さしだいではfooterも回り込む可能性があります。

いまどきなら、display: flex;を使ったほうがいいと思いますが。

投稿2020/06/16 03:11

編集2020/06/16 03:13

Daregada

総合スコア11990

chgrios

2020/06/16 03:33 編集

丁寧な回答ありがとうございます！ご指摘通り、セクションより前に移動したところ、それっぽいレイアウトが作れました！ただ300x200のダミー画像がmain部のwidth(940px)より右に大きくはみ出しているのですが、main内におさめるようにfloat: right;する方法はないのでしょうか。

Daregada

2020/06/16 03:46

ええと、<aside id="header>...</aside>を、その大きな画像の下、sectionより前に移動したんですよね? こちらで同じものを使って確認すると、mainの内部の右端にあり、はみ出していませんが。その大きな画像がmainの横幅(900px)を超えてはみ出してますけど。

chgrios

2020/06/16 03:48

すいません確認したところ、配置位置が間違っていました。問題なく動作してたと思います。ありがとうございました。

Daregada

2020/06/16 03:56

解決したようなので、補足をしますね。画像サイズからすると、mainやfooterの横幅は 900px ではなく 940px なのでは。箇条書き用の隙間をpaddingで取るブラウザー(Chromeなど)では、headerの左端に空白が表示されます。header ul に padding-left: 0; を追加したほうがいいですね。

chgrios

2020/06/16 13:19

ご丁寧にありがとうございました！とても勉強になりました。

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

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="style.css">
7    <title>Document</title>
8</head>
9<body>
10    <header>
11    <h1>CSS Cafe</h1>
12    <nav>
13        <ul>
14            <li class='current'><a href="#">ホーム</a></li>
15            <li><a href="#">商品情報</a></li>
16            <li><a href="#">店舗紹介</a></li>
17            <li><a href="#">アクセス</a></li>
18            <li><a href="#">会社情報</a></li>
19            <li><a href="#">お問い合わせ</a></li>
20        </ul>
21    </nav>
22    </header>
23    <main>
24        <img src="http://via.placeholder.com/940x300" alt="">
25
26        <div>
27            <section>
28                <h2>お知らせ</h2>
29                <dl>    
30                <dt>2018年3月10日</dt>
31                    <dd>リニューアルオープンしました。</dd>
32                    <dt>2018年4月15日</dt>
33                    <dd>4/27（金）は設備メンテナンスのため休業いたします。</dd>
34                    <dt>2018年4月20日</dt>
35                    <dd>ゴールデンウィークは休まず営業いたします</dd>
36                </dl>
37            </section>
38
39            <section>
40                <h2>キャンペーン情報</h2>
41                <ul>
42                    <li>日頃の感謝を込めて、パスタ全品がいつもよりお得に！</li>
43                    <li>平日11時から14時までお得なランチタイムを実施中。</li>
44                    <li>バイオリン演奏付きのスペシャルディナーイベントの早期予約受付中。</li>
45                </ul>
46            </section>
47            <aside id='sidebar'>
48                <ul>
49                    <li><img src="http://via.placeholder.com/300x200" alt=""></li>
50                    <li><img src="http://via.placeholder.com/300x200" alt=""></li>
51                </ul>
52            </aside>
53        </div>
54    </main>
55    <footer>
56        <ul>
57            <li><a href="#">ホーム</a></li>
58            <li><a href="#">商品情報</a></li>
59            <li><a href="#">店舗紹介</a></li>
60            <li><a href="#">アクセス</a></li>
61            <li><a href="#">会社情報</a></li>
62            <li><a href="#">お問い合わせ</a></li>
63        </ul>
64        <br>
65        <small>(c) 2018 CSS Cafe</small>
66
67    </footer>
68</body>
69</html>
70

css
1
2header{
3    border-top: 8px solid #614226;
4}
5header h1{
6    text-align: center;
7
8}
9
10header ul{
11    width: 940px;
12    list-style-type: None;
13    margin: 0 auto 0 auto;
14
15}
16
17header ul li{
18    width: 155px;
19    float: left;
20}
21
22header a{
23    text-decoration: None;
24    color: white;
25    background-color: #614226;
26    display: block;
27    margin-left: 2px;
28    text-align: center;
29}
30.current a{
31    background-color: black;
32}
33header a:hover, active{
34    background-color: gray;
35}
36main{
37    width: 900px;
38    margin: 0 auto 0 auto;
39}
40
41main > div {
42    position: relative
43}
44main section{
45    width: 500px;
46}
47main h2{
48    border-bottom: 1px solid #614226;
49    border-left: 8px solid #614226;
50    padding-left: 10px;
51}
52/* aside{
53    float: right;
54    width: 300px;
55}
56aside ul{
57    margin: 0;
58    padding: 0;
59
60    list-style-type: None;
61}
62aside ul li{
63    margin-bottom: 20px;
64
65} */
66
67footer{
68    color: white;
69    background-color: #614226;
70    width: 900px;
71    margin: 0 auto 0 auto;
72    text-align: center;
73}
74footer ul{
75    /* margin-bottom: 20px; */
76    width: 600px;
77    margin: 0 auto 0 auto;
78    list-style-type: None;
79    padding-left: 0;
80
81}
82footer li{
83    /* float: left; */
84    display: inline;
85
86}
87footer a{
88    text-decoration: None;
89    color: white;
90    margin-left: 5px;
91}
92footer a:hover{
93    text-decoration: underline;
94}
95#sidebar {
96    position: absolute;
97    top: 0;
98    right: 0;
99    width: 300px;
100}
101#sidebar ul {
102    margin: 0;
103    padding: 0;
104}
105
106#sidebar ul li {
107    margin-bottom: 20px;
108    list-style-type: none;
109}