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

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

ただいまの
回答率

87.95%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 97

score 22

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

.plan-box {
    position: relative;
    display: table;
    width: 100%;
    background: #fff;
    border: #d4d4d4 1px solid;
}

.plan-box__left {
    display: table-cell;
    width: auto;
    vertical-align: top;
    padding: 20px;

}

.table-parent {
    display: table;
    width: 100%;
}

.plan-ph {
    width: 175px;
    vertical-align: top;

}

.plan-ph img {
    width: 160px;
    margin-right: 15px;

}
.table-child{
    display:table-cell;
}
.plan-txt {
    vertical-align: top;
    width: 100%;
}

.plan-name {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 5px;
}

.price-box {
    display: table;
    line-height: 1.0;
    width: 100%;
}

.plan-time {
    color: #777777;
    font-size: 14px;

}

.plan-price {
    color: #fb4466;
    font-size: 14px;
    text-align: right;
    line-height: 1 vertical-align:middle;
}


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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • AYuMu-sakura

    2021/06/10 19:51

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

    キャンセル

  • julie

    2021/06/11 09: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

checkベストアンサー

0

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        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 {
            margin: 0;
            padding: 0;
            border: 0;
            font: inherit;
            font-size: 100%;
            vertical-align: baseline;
        }

        .plan-box {
            position: relative;
            display: table;
            width: 100%;
            background-color: #ffffff;
            border: #d4d4d4 1px solid;
        }

        .ribbon {
            position: absolute;
            top: 10px;
        }

        .ribbon span {
            position: relative;
            display: block;
            padding: 8px;
            font-size: 12px;
            color: #ffffff;
            background: #6b9ed7;
        }

        .plan-box .plan-box__left {
            display: table-cell;
            width: auto;
            vertical-align: top;
            padding: 20px;
        }

        .table-parent {
            display: table;
            width: 100%;
        }

        .table-child {
            display: table-cell;
            width: auto;
            vertical-align: middle;
        }

        .plan-box .plan-ph {
            width: 175px;
            vertical-align: top;
        }

        .plan-box .plan-ph img {
            width: 160px;
            margin-right: 15px;
        }

        .plan-box .plan-txt {
            vertical-align: top;
            width: 100%;
        }

        .icon-list {
            display: inline-block;
            font-size: 0;
            margin-bottom: 5px;
        }

        .icon-pink {
            border-color: #ff7b93;
            color: #ff7b93;
        }

        .icon-gray,
        .icon-pink,
        .icon-bg-pink,
        .icon-red,
        .icon-fnt-gray {
            position: relative;
            display: inline-block;
            padding: 5px 7px;
            background: #ffffff;
            border: 1px solid #afafaf;
            color: #777777;
            font-size: 12px;
            font-weight: 500;
            line-height: 1.0;
            border-radius: 4px;
            vertical-align: middle;
        }

        .icon-list>* {
            margin: 0 5px 5px 0;
        }

        .plan-name {
            font-size: 18px;
            font-weight: 500;
            line-height: 1.6;
            margin-bottom: 5px;
        }

        .price-box {
            display: table;
            width: 100%;
            line-height: 1.0;
        }

        .price-box .plan-time {
            display: table-cell;
            width: auto;
            vertical-align: middle;
        }

        .plan-time {
            color: #777777;
            font-size: 14px;
        }

        .plan-box .plan-box__right {
            display: table-cell;
            width: 23%;
            vertical-align: middle;
            border-left: #d4d4d4 1px solid;
            padding: 20px;
        }

        .plan-box .action-btn,
        .plan-box .action-btn--big {
            margin-bottom: 15px;
        }

        .plan-box .action-btn a,
        .plan-box .action-btn--big a {
            width: 100%;
        }

        .action-btn a,
        .action-btn--big a,
        .action-btn input,
        .action-btn--big input {
            display: inline-block;
            width: 220px;
            padding: 14px;
            background: #fb9bad;
            border: 1px solid #fb9bad;
            box-shadow: 0px 1px 1px 0 rgb(255 255 255 / 50%) inset;
            border-radius: 6px;
            color: #ffffff;
            text-align: center;
            font-family: "Roboto", "Noto Sans Japanese", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
            font-size: 16px;
            line-height: 1.0;
            text-decoration: none;
        }

        .plan-box .sub-btn a,
        .plan-box .sub-btn--small a,
        .plan-box .fav-btn a,
        .plan-box .fav-btn--on a {
            width: 100%;
        }

        .sub-btn a,
        .sub-btn--small a,
        .fav-btn a,
        .fav-btn--on a,
        .sub-btn input,
        .sub-btn--small input,
        .fav-btn input,
        .fav-btn--on input {
            display: inline-block;
            width: 220px;
            padding: 14px;
            background: linear-gradient(#ffffff, #f3f3f3);
            border: #d4d4d4 1px solid;
            border-radius: 6px;
            color: #383838;
            text-align: center;
            font-family: "Roboto", "Noto Sans Japanese", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
            font-size: 16px;
            line-height: 1.0;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="plan-box">
        <div class="ribbon"><span>編集部おすすめ</span></div>
        <div class="plan-box__left">
            <div class="table-parent">
                <div class="plan-ph table-child">
                    <img src="https://www.ozmall.co.jp/relaxation/images/plan/957_34894.jpg" alt="">
                </div>
                <div class="plan-txt table-child">
                    <ul class="icon-list">
                        <li class="icon-pink">初回限定</li>
                        <li class="icon-pink">個室</li>
                    </ul>
                    <p class="plan-name">【初回限定/痩身エステ】憧れの美ボディへ導く 2部位が選べるフォースカッター(ラジオ波・EMS・吸引)</p>
                    <div class="price-box">
                        <p class="plan-time">75分</p>
                        <!-- ▼金額 -->
                        <p class="plan-price">
                            <strong>11000</strong></p>
                        <!-- ▲金額 -->
                    </div>
                </div>
            </div>
        </div>
        <div class="plan-box__right">
            <div class="action-btn">
                <a href="/relaxation/reserve/Calendar.aspx?clientID=957&amp;planID=34894"
                    onclick="s_objectID='relaxation_shopIndex_plan_reserveBtn';">このプランを予約する</a>
            </div>
            <div class="sub-btn">
                <a href="/relaxation/0957/Plan34894/" onclick="s_objectID='relaxation_shopIndex_plan_plandetailBtn';">
                    プラン詳細
                </a>
            </div>
        </div>
    </div>
</body>

</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

.plan-txt {
    vertical-align: top;
    width: 100%;
}


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.95%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る