HTMLの段組みsectionとmainを入れ替えたいのですが、少しうまくいかないのでご教授ください

実行結果が以下のようになります。右の背景の中に収めたいのですが、どうしたらいいでしょうか。
教えてください。これは勉強している参考書のコードをHTML5 &css3で変更しながらやっています。
背景を入れないコードはうまくいっているのですが、参考書ではsectionの中にmainが入っていたので
mainの中にsectionを入れて作り変えています。よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>Herb Kitchen</title>
6    <link href="css/base.css" rel="stylesheet">
7    <link href="css/3-3-77p-b.css" rel="stylesheet">
8</head>
9
10<body>
11<div class="pagebody">
12    <header>
13        <h1><a href="#">Herb Kitchen</a></h1>
14    </header>
15    
16    <nav>
17    <ul>
18      <li><a href="#">News</a></li>
19      <li id="now"><a href="#">Food</a></li>
20      <li><a href="#">Drink</a></li>
21      <li><a href="#">Goods</a></li>
22      <li><a href="#">Column</a></li>
23    </ul>
24  </nav>
25    
26  <main>
27    <section>
28        <h2>オリジナルレシピ</h2>
29        <p>ハーブを使ったカンタンで美味しいオリジナル料理のレシピをご紹介    します。ハーブを使ったカンタンで美味しいオリジナル料理のレシピ    をご紹介します。
30        </p>
31        
32        <article>
33            <h3>タコのカルパッチョ</h3>
34            <p><img src="images/salad.jpg" 
35                    alt="タコのカルパッチョの画像">
36                ハーブは西洋料理で使われるものばかりではありません。葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。
37            </p>
38        </article>
39        <article>
40            <h3>しらすのペペロンチーノ</h3>
41            <p><img src="images/pasta.jpg" 
42              alt="しらすのペペロンチーノの画像">ハーブは西洋料理で使われるものばかりではありません。葱やショウガ、ミョウガなど和食でおなじみの薬味も立派なハーブです。</p>
43        </article>
44      </section>
45  </main>
46    
47  <aside>
48  <h2>最新記事</h2>
49    <ul>
50      <li><a href="#">バジルに虫がついたら</a></li>
51      <li><a href="#">風邪に効くハーブ</a></li>
52      <li><a href="#">ハーブフェア開催!</a></li>
53      <li><a href="#">ローズヒップティー</a></li>
54      </ul>
55    <h2>人気レシピ</h2>
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      </ul>
63    <h2>人気商品</h2>
64    <ul>
65      <li><a href="#">イタリアンハーブmix</a></li>
66      <li><a href="#">オーガニックミント</a></li>
67      <li><a href="#">電動グラインダー</a></li>
68      <li><a href="#">フレッシュハーブセット</a></li>
69      <li><a href="#">エスニックmix</a></li>
70      </ul>
71    <div class="ad"><a href="#"><img src="images/ad1.jpg"  alt=""></a></div>  
72  </aside>
73
74  <footer>
75    <address>
76        Copy Right <a href="#">Herb Kitchen</a> Co.,Ltd. Since 2004
77    </address>
78  </footer>
79>
80</div>
81</body>
82</html>
83
84

css
1//css/3-3-77p-b.css
2@charset "utf-8";
3body {
4	background-image:url(../images/bk2.gif);
5	background-repeat:repeat-y;
6	background-position:top right;
7}
8header {
9	background-image:url(../images/header2.jpg);
10	height:155px;
11	line-height:155px;
12	padding:0 10px;
13}
14h1 a {
15	color:#fff;
16}
17nav {
18	background-color:#fff;
19	padding:5px 0;
20}
21main {
22	float:left;
23	margin-right:200px;
24	width:100%;
25}
26section {
27	margin-right:-200px;
28	padding-left:10px;
29	padding-right:10px;
30}
31aside {
32	float:right;
33	width:180px;
34	padding-left:10px;
35	padding-right:10px;
36}
37footer {
38	clear:both;
39}

css
1//base.css
2@charset "utf-8";
3/*ページの基本デザイン*/
4body {
5	margin: 0;
6	padding: 0;
7	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, sans-serif;
8	color: #666;
9}
10h1 {
11	margin: 0;
12	font-family: Arial, Helvetica, sans-serif;
13	font-size: 48px;
14	font-weight: normal;
15}
16h2 {
17	margin: 0;
18	font-size: 110%;
19}
20h3 {
21	margin: 0;
22	font-size: 90%;
23}
24p {
25	margin: 0;
26	font-size: 90%;
27	line-height: 1.6;
28}
29address {
30	font-style: normal;
31	text-align: center;
32	font-size: 90%;
33}
34a {
35	color: #01b2a8;
36	text-decoration: none;
37}
38article p img {
39	background-color: #fff;
40	padding: 5px;
41	border: 1px solid #ccc;
42	float: left;
43	margin-right: 5px;
44}
45article {
46	padding: 5px;
47	border: solid 1px #ccc;
48	margin: 10px;
49	min-height: 150px;
50	zoom: 1;
51}
52article:after {
53	content: ".";
54	display: block;
55	height: 0;
56	clear: both;
57	visibility: hidden;
58}
59nav ul {
60	font-family: Arial, Helvetica, sans-serif;
61	letter-spacing: 2px;
62	margin: 0;
63	padding: 0;
64	list-style-type: none;
65	text-align: right;
66}
67nav ul li {
68	display: inline-block;
69	padding: 0 5px;
70	border-left: 1px solid #037d77;
71}
72nav ul li:first-child {
73	border-left: none;
74}
75nav ul li#now a {
76	color: #037d77;
77	font-weight: bold;
78}
79
80
81aside h2 {
82	font-size: 90%;
83	margin-top:5px;
84}
85aside ul {
86	list-style-type:none;
87	font-size:90%;
88	margin:0;
89	padding:0;
90	line-height:1.5;
91}
92aside ul li {
93	padding-left:15px;
94	background-image:url(../images/ico-s.gif);
95	background-repeat:no-repeat;
96	background-position:left center;
97}
98ad {
99	margin-top:10px;
100}
101ad img {
102	border:0;
103}
104コード

miyabi_pudding

2019/03/06 09:28

ブラウザはなんでしょうか？古いブラウザだと、main要素は、ブロックとしてDOMツリーを形成せず、CSSがうまくいかないパターンがあります。

退会済みユーザー

2019/03/06 09:36

Google Chrome　で他の新しい本のコードは正常に表示されています。コードの　cssのmain、section、aside　の設定が間違っていると思われます。asideの背景画像のないコードは正常に表示されているのですが。よろしくお願いいたします。

miyabi_pudding

2019/03/06 09:37

ありがとうございます。一応、質問にも表示環境（ブラウザ）を記載しておきましょう。回答させていただきます。

yoshinavi

2019/03/06 10:01

＞右の背景の中に収めたいのですが、どうしたらいいでしょうか。 →　どこの部分をどこに収めたいのでしょうか？「aside」部分ですか？

退会済みユーザー

2019/03/06 10:06

「aside」部分の部分を右の背景画像の中に入れたいのですが、私の書いたコードで何とかなりませんか。お願いいたします。

退会済みユーザー

2019/03/06 10:38

class="pagebody"の設定が抜けていました。

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

回答3件

floatによる「カラム落ち」です。main・section・asideの調整が必要です。
CSSを以下にして試してみてください。

CSS
1main {
2  float:left;
3  width: calc(100% - 200px);
4}
5
6section {
7  padding-left:10px;
8  padding-right:10px;
9}
10
11aside {
12  float:right;
13  width:180px;
14  padding-left:10px;
15  padding-right:10px;
16}

-追記-
こんな感じです。

投稿2019/03/06 10:20

編集2019/03/06 10:32

yoshinavi

総合スコア3523

退会済みユーザー

2019/03/06 10:25

すみません、うまくいかないです。

退会済みユーザー

2019/03/06 10:36

ありがとうございます。今奮闘中で半分ぐらい画像の中に入っています。 cssを少しいじればできそうです。

yoshinavi

2019/03/06 10:42

私のコードをcss/3-3-77p-b.cssの該当箇所に入れ替えてください。

退会済みユーザー

2019/03/07 00:43

ありがとうございました。皆さんの教えで、何とか思うようにできました。 flexboxが主流になるようですので、それを取り入れて、参考書の保存しているコードを書き換えながら勉強します。

yoshinavi

2019/03/07 00:56

「floatでの横並び」が全くダメな訳ではありません。本来の使用方法での「適材適所」であり、場合によってはfloatで簡単に解決する場合も多々あります。デザインによって、レイアウトは複数の選択肢があり、状況によって「正解」は変わっていきます。 flexやgridが主流になってもfloatの存在価値は変わりません。 flex等に加え、floatもしっかり身につけることで、レイアウトの幅が必ず広がりますので、頑張ってください。 (^^)

退会済みユーザー

2019/03/07 01:36

ありがとうございます。がんばります。

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

普通の回答に関しては他の人に任せます。
今後あなたのお役に立てればと思い、別の方法を記します。

要素の横並びはfloatではなくflexboxを利用しましょう。
学んでいくと分かりますが、要素の横並びはflexboxがとても便利です。

横並びにしたい要素の親要素にdisplay: flex;を記述するだけです。

html
1<main>
2    <section>
3    メインコンテンツ
4    </section>
5</main>
6
7<aside>
8サイドコンテンツ
9</aside>

↓↓↓新たなブロックで囲む

html
1<div class="container">
2    <main>
3      <section>
4        メインコンテンツ
5      </section>
6    </main>
7
8    <aside>
9      サイドコンテンツ
10    </aside>
11</div>

css
1.container {
2  display: flex; //親要素にこのプロパティを記述
3}
4
5main {
6  display: block;
7  flex: 1; //メイン要素を可変させるために記述
8  height: 500px;
9  background-color: red;
10  color: #fff;
11}
12
13aside {
14  width: 300px;
15  height: 500px;
16  margin-left: 10px;
17  background-color: blue;
18  color: #fff;
19}

サンプル
https://jsfiddle.net/68c1vfuh/1/

【参考サイト】
これからのCSSレイアウトはFlexboxで決まり！
https://www.webcreatorbox.com/tech/flexbox

個人的意見ですが、
floatは「回り込み」をさせるには適していますが、
「横並び」という点では時代遅れだと感じています。
(もちろん、勉強という意味でfloatを使っているのは理解しています。)

自分はflexboxを覚えてからは圧倒的にコーディングの質が上がったので、
今後のために是非調べてみてください。

がんばってください。

投稿2019/03/06 09:58

kenreta

総合スコア144

退会済みユーザー

2019/03/06 11:29

教えていただいたように書きかえてみます。今後はこれを使っていくと思いますので、ありがとうございました。

退会済みユーザー

2019/03/06 11:45

@charset "utf-8"; body { background-image:url(../images/bk.gif); background-repeat:repeat-y; background-position:center top; } .container { display: flex; } header { background-image:url(../images/header2.jpg); height:120px; line-height:120px; padding-left:10px; } h1 a { color:#fff; } nav { background-color:#fff; padding:5px 0; } main { /* main要素をブロックとする */ display: block; flex:1; /* marginできかせていたのを、calcで補う */ width: calc(100% - 200px); } section { padding-left:10px; padding-right:10px; } aside { float:right; width:180px; padding-left:10px; padding-right:10px; } footer { clear:both; } このようにしたら、asideが背景画像とずれるのですが、どうすればいいでしょうか。

退会済みユーザー

2019/03/06 11:46

ブラウザを広げたりするとずれてしまいます。

kenreta

2019/03/07 02:35

返事が遅れました。 flexを使う場合は、floatはもう使う必要はないので、 aside { float:right; } main { /* marginできかせていたのを、calcで補う */ width: calc(100% - 200px); } footer { clear:both; } 上記3つの要素を削除してください！またずれていたらコメントお願いします。

退会済みユーザー

2019/03/08 03:24

ありがとうございます。とりあえず、参考書はfloat仕様になっているので、これを勉強します。 flexで書き換えてみました。うまくいったので、この後勉強します。

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

ベストアンサー

ネガティブマージンって、けっこううまくいきづらいので、
flexを使うとけっこういいと思いますが、
現状のままで、少し変えるだけで、うまくいく方法があります。

css
1@charset "utf-8";
2body {
3    background-image:url(../images/bk2.gif);
4    background-repeat:repeat-y;
5    background-position:top right;
6}
7header {
8    background-image:url(../images/header2.jpg);
9    height:155px;
10    line-height:155px;
11    padding:0 10px;
12}
13h1 a {
14    color:#fff;
15}
16nav {
17    background-color:#fff;
18    padding:5px 0;
19}
20main {
21    /* main要素をブロックとする */
22    display: block;
23    float:left;
24    /* marginできかせていたのを、calcで補う */
25    width: calc(100% - 200px);
26}
27section {
28    padding-left:10px;
29    padding-right:10px;
30}
31aside {
32    float:right;
33    width: 180px;
34    padding-left:10px;
35    padding-right:10px;
36}
37footer {
38    clear:both;
39}