width調整で横並びにしたい

実現したいこと

html、cssを使って模写コーディング練習しています。
一般的にはflexboxを使うと思いますが、widthをいじって要素を横ならびにしたいです。

問題点、エラーコード

モバイルファーストでwidth100％のitem要素をwidth50％にして、PC表示の時に親要素のgourumetの中に2つずつ横並びにしたいのですが、できません。
paddingを0にしたり、htmlの各item要素間に開けていた行などを消去したり,box-sizing: border-box;を指定したりしましたが、width50％ではなりませんでした。
因みに、40％に指定すると横並びになってくれましたが、きれいなレイアウトではありません。
以下、私の画面（上）と、目指している画面（下）です。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="description" content="">
6    <meta name="author" content="">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="style.css">
9    <link rel="stylesheet" href="responsive.css">
10
11    <title>Colerfl-clover</title>
12    <link rel="shortcut icon" href=" ">
13  </head>
14
15  <body>
16
17        <section class="gourmet">
18          <h2>Gourmet</h2>
19
20            <div class="item">
21              <figure>
22                <img src="image/img_top01.jpg">
23              </figure>
24              <div class="ttl">
25                <div class="area">
26                  <h3>トミガヤ テラス</h3>
27                  <ul>
28                    <li>渋谷</li>
29                    <li>代々木公園</li>
30                    <li>代々木八幡</li>
31                  </ul>
32                </div>
33              </div>
34                <p>チキンパエリア</p>
35            </div>
36            <div class="item">
37              <figure>
38                <img src="image/img_top02.jpg">
39              </figure>
40              <div class="ttl">
41                <div class="area">
42                  <h3>  ボンジョリーナ</h3>
43                  <ul>
44                    <li>池の上</li>
45                    <li>下北沢</li>
46                  </ul>
47                </div>
48              </div>
49                <p> イタリアンランチ</p>
50            </div>
51            <div class="item">
52              <figure>
53                <img src="image/img_top03.jpg">
54              </figure>
55              <div class="ttl">
56                <div class="area">
57                  <h3>揚州商人</h3>
58                  <ul>
59                    <li> 渋谷センター街</li>
60                  </ul>
61                </div>
62              </div>
63                <p>  スーラータンメン</p>
64            </div>
65            <div class="item">
66              <figure>
67                <img src="image/img_top04.jpg">
68              </figure>
69              <div class="ttl">
70                <div class="area">
71                  <h3>カレー食堂 心</h3>
72                  <ul>
73                    <li> 下北沢</li>
74                  </ul>
75                </div>
76              </div>
77                <p>骨付きチキンのスープカレー</p>
78            </div>
79            <div class="item">
80              <figure>
81                <img src="image/img_top05.jpg">
82              </figure>
83              <div class="ttl">
84                <div class="area">
85                  <h3>博多食堂</h3>
86                  <ul>
87                    <li>渋谷</li>
88                    <li>神泉</li>
89                  </ul>
90                </div>
91              </div>
92                <p>博多ラーメン </p>
93            </div>
94            <div class="item">
95              <figure>
96                <img src="image/img_top06.jpg">
97              </figure>
98                    <div class="ttl">
99                      <div class="area">
100                        <h3>UeCONA</h3>
101                        <ul>
102                          <li>渋谷</li>
103                          <li>道玄坂</li>
104                        </ul>
105                      </div>
106                    </div>
107                <p>シカゴピザ</p>
108            </div>
109        </section>
110    </main>
111
112    <footer>
113      <ul>
114        <li><a href="#">Company</a></li>
115        <li><a href="#">Service</a></li>
116        <li><a href="#">Portfolio</a></li>
117        <li><a href="#">Blog</a></li>
118        <li><a href="#">Contact</a></li>
119      </ul>
120      <a href="#"><img src="image/logo.png" alt="colorful clover"></a>
121      <p>Copyright © Colorful Clover, inc. All Rights Reserved.</p>
122  </body>
123</html>
124

css
1@charset="UTF-8"
2
3/*
4html5doctor.com Reset Stylesheet
5v1.6.1
6Last Updated: 2010-09-17
7Author: Richard Clark - http://richclarkdesign.com
8Twitter: @rich_clark
9*/
10
11html, body, div, span, object, iframe,
12h1, h2, h3, h4, h5, h6, p, blockquote, pre,
13abbr, address, cite, code,
14del, dfn, em, img, ins, kbd, q, samp,
15small, strong, sub, sup, var,
16b, i,
17dl, dt, dd, ol, ul, li,
18fieldset, form, label, legend,
19table, caption, tbody, tfoot, thead, tr, th, td,
20article, aside, canvas, details, figcaption, figure,
21footer, header, hgroup, menu, nav, section, summary,
22time, mark, audio, video {
23    margin:0;
24    padding:0;
25    border:0;
26    outline:0;
27    font-size:100%;
28    vertical-align:baseline;
29    background:transparent;
30}
31
32body {
33    line-height:1;
34}
35
36article,aside,details,figcaption,figure,
37footer,header,hgroup,menu,nav,section {
38    display:block;
39}
40
41nav ul {
42    list-style:none;
43}
44
45blockquote, q {
46    quotes:none;
47}
48
49blockquote:before, blockquote:after,
50q:before, q:after {
51    content:'';
52    content:none;
53}
54
55a {
56    margin:0;
57    padding:0;
58    font-size:100%;
59    vertical-align:baseline;
60    background:transparent;
61}
62
63/* change colours to suit your needs */
64ins {
65    background-color:#ff9;
66    color:#000;
67    text-decoration:none;
68}
69
70/* change colours to suit your needs */
71mark {
72    background-color:#ff9;
73    color:#000;
74    font-style:italic;
75    font-weight:bold;
76}
77
78del {
79    text-decoration: line-through;
80}
81
82abbr[title], dfn[title] {
83    border-bottom:1px dotted;
84    cursor:help;
85}
86
87table {
88    border-collapse:collapse;
89    border-spacing:0;
90}
91
92/* change border colour to suit your needs */
93hr {
94    display:block;
95    height:1px;
96    border:0;  
97    border-top:1px solid #cccccc;
98    margin:1em 0;
99    padding:0;
100}
101
102input, select {
103    vertical-align:middle;
104}
105/*END Reset CSS*/
106body{
107  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
108}
109*{
110  box-sizing: border-box;
111}
112
113.gourmet h2{
114  width: 100%;
115  padding:10px 12px;
116  margin: 0%;
117  background-color: #B99566;
118  color: white;
119  font-weight: normal;
120  font-size: inherit;
121}
122.item{
123  padding: 10px;
124}
125.gourmet .item figure {
126  width: 100%;
127  margin: 0 auto;
128}
129.gourmet .item figure img{
130  width: 100%;
131}
132.item h3{
133  margin-top: 10px;
134  margin-bottom:0px ;
135  font-size: 16px;
136}
137.item h3+ul{
138  margin:10px 0px;
139}
140
141.item p{
142  margin-top: 10px;
143  margin-bottom: 10px;
144  font-size: 14px;
145}
146.item p::before{
147  content: "-";
148  padding: 10px;
149}
150.gourmet .item ul{
151  text-align: left;
152  padding-inline-start: 0px;
153}
154.gourmet  li{
155  display: inline-block;
156  background-color:#B99566;
157  color: white;
158  padding: 5px 10px;
159  border-radius: 5px;
160  font-size: 10px;
161}
162.item ul li+li{
163  margin-left: 5px;
164}
165.ttl{
166  border-left: 4px #402805 solid;
167  border-radius: 2px;
168}
169.area{
170  margin-left:10px;
171  padding: 5px 0px;
172}
173body{
174  margin: 0%;
175  width: 100%;
176}
177

@media (min-width:768px){
  *{
    box-sizing: border-box;
  }

  .item{
    display: inline-block;
    width: 50%;
}
}

firegrape

2020/10/07 12:26

tableタグは使わない前提でしょうか？

Sakupi

2020/10/07 14:42

使っていませんが、使った回答も是非いただきたいです！

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

回答1件

ベストアンサー

html
1  <div class="item">
2  <!-- 中略 -->
3  </div>
4  <div class="item">
5  <!-- 中略 -->
6  </div>
7  <div class="item">
8  <!-- 中略 -->
9  </div>

div.item間に改行がありますが、それが影響してます。

html
1  <div class="item">
2  <!-- 中略 -->
3  </div><div class="item">
4  <!-- 中略 -->
5  </div><div class="item">
6  <!-- 中略 -->
7  </div>

というように改行をなくすと width: 50%;で横並びになります。
（本来はHTMLコード中の改行はレイアウトに影響を与えないはずなんですが、、、？）

ただ、読みづらくなるので、width: 49%; で妥協するか、

html
1   <div class="item">
2     <!-- 中略 -->
3   </div><!--
4--><div class="item">
5     <!-- 中略 -->
6  </div><!--
7--><div class="item">
8    <!-- 中略 -->
9  </div>

とコメントで改行を入れるか、

になると思います。

ただ、一番のお勧めは、FlexBoxを使うことです。これなら、HTMLに小細工する必要はないです。

css
1@media (min-width:768px){
2  .gourmet {
3  display: flex;
4  flex-wrap: wrap;
5  }
6  
7  .item{
8    width: 50%;
9  }
10}

投稿2020/10/07 13:06

編集2020/10/07 14:34

hatena19

総合スコア33790

Sakupi

2020/10/07 14:41

回答、ありがとうございます！改行は、itm間にしなければ意味が無かったんですね、、、。助かりました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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