メニュー表を写真付きでつけたい。

このサイトのプランのような形式でメニューを表示したいと思い以下のcssを記述しました。

css
1.plan-box {
2    position: relative;
3    display: table;
4    width: 100%;
5    background: #fff;
6    border: #d4d4d4 1px solid;
7}
8
9.plan-box__left {
10    display: table-cell;
11    width: auto;
12    vertical-align: top;
13    padding: 20px;
14
15}
16
17.table-parent {
18    display: table;
19    width: 100%;
20}
21
22.plan-ph {
23    width: 175px;
24    vertical-align: top;
25
26}
27
28.plan-ph img {
29    width: 160px;
30    margin-right: 15px;
31
32}
33.table-child{
34	display:table-cell;
35}
36.plan-txt {
37    vertical-align: top;
38    width: 100%;
39}
40
41.plan-name {
42    font-size: 18px;
43    font-weight: 500;
44    line-height: 1.6;
45    margin-bottom: 5px;
46}
47
48.price-box {
49    display: table;
50    line-height: 1.0;
51    width: 100%;
52}
53
54.plan-time {
55    color: #777777;
56    font-size: 14px;
57
58}
59
60.plan-price {
61    color: #fb4466;
62    font-size: 14px;
63    text-align: right;
64    line-height: 1 vertical-align:middle;
65}

というcssを記述したところ、
というように画像が指定した160pxよりも小さなサイズで表示されてしまします。

どのようにすれば、このようなプランにて表示できるのかを教えてください。
よろしくお願いいたします。

AYuMu-sakura

2021/06/10 10:51

HTMLのソースコードもご提示いただきたいです。他にも使用しているコードがあればできる限りご提示してください。

julie

2021/06/11 00:49

失礼しました。 <div class="plan-box"> <div class="plan-box__left"> <div class="table-parent"> <div class="plan-ph table-child"> <img src="wp-content/uploads/2021/04/4003467_m.jpg" alt="" /> </div> <div class="plan-txt table-child"> <p class="plan-name">【初回限定】</p> <div class="price-box"> <p class="plan-time">105分</p>  <p class="plan-price"> <strong>8800</strong>円 </p>  </div> </div> </div> </div> </div> 以上がHTMLのコードです。

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

回答2件

css
1.plan-txt {
2    vertical-align: top;
3    width: 100%;
4}
5

から
width: 100%;を削除したら画像が大きくなりました。
ありがとうございます。

投稿2021/06/11 00:54

julie

総合スコア30

ベストアンサー

サンプルサイトの関連のソースを抜き出してみたので、分解しながら参考にしてみてください^^
ただ、サンプルサイトの実装も古いですね。。。最近のレイアウト調整ではdisplay: tableではなくdisplay: flexというプロパティが使用されています。
参考：https://developer.mozilla.org/ja/docs/Web/CSS/flex

HTMLと合わせてみないと確かなことは言えないかもですけど、質問者さんの原因はdisplay:table-cell;内の画像をwidth: auto;にしてるからですかね？

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Document</title>
9    <style>
10        * {
11            box-sizing: border-box;
12            -webkit-box-sizing: border-box;
13        }
14
15        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
16            margin: 0;
17            padding: 0;
18            border: 0;
19            font: inherit;
20            font-size: 100%;
21            vertical-align: baseline;
22        }
23
24        .plan-box {
25            position: relative;
26            display: table;
27            width: 100%;
28            background-color: #ffffff;
29            border: #d4d4d4 1px solid;
30        }
31
32        .ribbon {
33            position: absolute;
34            top: 10px;
35        }
36
37        .ribbon span {
38            position: relative;
39            display: block;
40            padding: 8px;
41            font-size: 12px;
42            color: #ffffff;
43            background: #6b9ed7;
44        }
45
46        .plan-box .plan-box__left {
47            display: table-cell;
48            width: auto;
49            vertical-align: top;
50            padding: 20px;
51        }
52
53        .table-parent {
54            display: table;
55            width: 100%;
56        }
57
58        .table-child {
59            display: table-cell;
60            width: auto;
61            vertical-align: middle;
62        }
63
64        .plan-box .plan-ph {
65            width: 175px;
66            vertical-align: top;
67        }
68
69        .plan-box .plan-ph img {
70            width: 160px;
71            margin-right: 15px;
72        }
73
74        .plan-box .plan-txt {
75            vertical-align: top;
76            width: 100%;
77        }
78
79        .icon-list {
80            display: inline-block;
81            font-size: 0;
82            margin-bottom: 5px;
83        }
84
85        .icon-pink {
86            border-color: #ff7b93;
87            color: #ff7b93;
88        }
89
90        .icon-gray,
91        .icon-pink,
92        .icon-bg-pink,
93        .icon-red,
94        .icon-fnt-gray {
95            position: relative;
96            display: inline-block;
97            padding: 5px 7px;
98            background: #ffffff;
99            border: 1px solid #afafaf;
100            color: #777777;
101            font-size: 12px;
102            font-weight: 500;
103            line-height: 1.0;
104            border-radius: 4px;
105            vertical-align: middle;
106        }
107
108        .icon-list>* {
109            margin: 0 5px 5px 0;
110        }
111
112        .plan-name {
113            font-size: 18px;
114            font-weight: 500;
115            line-height: 1.6;
116            margin-bottom: 5px;
117        }
118
119        .price-box {
120            display: table;
121            width: 100%;
122            line-height: 1.0;
123        }
124
125        .price-box .plan-time {
126            display: table-cell;
127            width: auto;
128            vertical-align: middle;
129        }
130
131        .plan-time {
132            color: #777777;
133            font-size: 14px;
134        }
135
136        .plan-box .plan-box__right {
137            display: table-cell;
138            width: 23%;
139            vertical-align: middle;
140            border-left: #d4d4d4 1px solid;
141            padding: 20px;
142        }
143
144        .plan-box .action-btn,
145        .plan-box .action-btn--big {
146            margin-bottom: 15px;
147        }
148
149        .plan-box .action-btn a,
150        .plan-box .action-btn--big a {
151            width: 100%;
152        }
153
154        .action-btn a,
155        .action-btn--big a,
156        .action-btn input,
157        .action-btn--big input {
158            display: inline-block;
159            width: 220px;
160            padding: 14px;
161            background: #fb9bad;
162            border: 1px solid #fb9bad;
163            box-shadow: 0px 1px 1px 0 rgb(255 255 255 / 50%) inset;
164            border-radius: 6px;
165            color: #ffffff;
166            text-align: center;
167            font-family: "Roboto", "Noto Sans Japanese", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
168            font-size: 16px;
169            line-height: 1.0;
170            text-decoration: none;
171        }
172
173        .plan-box .sub-btn a,
174        .plan-box .sub-btn--small a,
175        .plan-box .fav-btn a,
176        .plan-box .fav-btn--on a {
177            width: 100%;
178        }
179
180        .sub-btn a,
181        .sub-btn--small a,
182        .fav-btn a,
183        .fav-btn--on a,
184        .sub-btn input,
185        .sub-btn--small input,
186        .fav-btn input,
187        .fav-btn--on input {
188            display: inline-block;
189            width: 220px;
190            padding: 14px;
191            background: linear-gradient(#ffffff, #f3f3f3);
192            border: #d4d4d4 1px solid;
193            border-radius: 6px;
194            color: #383838;
195            text-align: center;
196            font-family: "Roboto", "Noto Sans Japanese", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
197            font-size: 16px;
198            line-height: 1.0;
199            text-decoration: none;
200        }
201    </style>
202</head>
203
204<body>
205    <div class="plan-box">
206        <div class="ribbon"><span>編集部おすすめ</span></div>
207        <div class="plan-box__left">
208            <div class="table-parent">
209                <div class="plan-ph table-child">
210                    <img src="https://www.ozmall.co.jp/relaxation/images/plan/957_34894.jpg" alt="">
211                </div>
212                <div class="plan-txt table-child">
213                    <ul class="icon-list">
214                        <li class="icon-pink">初回限定</li>
215                        <li class="icon-pink">個室</li>
216                    </ul>
217                    <p class="plan-name">【初回限定／痩身エステ】憧れの美ボディへ導く　2部位が選べるフォースカッター（ラジオ波・EMS・吸引）</p>
218                    <div class="price-box">
219                        <p class="plan-time">75分</p>
220                        <!-- ▼金額 -->
221                        <p class="plan-price">
222                            <strong>11000</strong>円
223                        </p>
224                        <!-- ▲金額 -->
225                    </div>
226                </div>
227            </div>
228        </div>
229        <div class="plan-box__right">
230            <div class="action-btn">
231                <a href="/relaxation/reserve/Calendar.aspx?clientID=957&amp;planID=34894"
232                    onclick="s_objectID='relaxation_shopIndex_plan_reserveBtn';">このプランを予約する</a>
233            </div>
234            <div class="sub-btn">
235                <a href="/relaxation/0957/Plan34894/" onclick="s_objectID='relaxation_shopIndex_plan_plandetailBtn';">
236                    プラン詳細
237                </a>
238            </div>
239        </div>
240    </div>
241</body>
242
243</html>