汎用デザイン

CSSはスタイルシート・responsive.cssの一番下に追記する
①②③どのパターンになるか想定してコピペ。

spanタグを使った表組み

①PC、レスポンシブ共に1行で収まる場合

デメリット：一行で収まらない場合（メニュー名がおおよそ19文字以上、フォントサイズ16px時）レイアウトが崩れる

味玉ラーメン750円
コーンラーメン750円

HTML

味玉ラーメン<span class="kakaku1">750円</span>
コーンラーメン<span class="kakaku1">750円</span>

スタイルシート (style.css)

.kakaku1 {
    float: right;
}

②PCは1行で収まるがレスポンシブ時に1行で収まらない場合

デメリット：レスポンシブ時は一行で収まる場合でも価格が必ず一行下がって右に来る

コーンコーンコーンコーンコーンラーメ750円

  • コーンコーンコーンラーメン
    750円
    コーンコーンラーメン
    750円

HTML

コーンコーンコーンラーメン<span class="kakaku1">750円</span>
コーンコーンコーンラーメン<span class="kakaku1">750円</span>

スタイルシート (style.css)

.kakaku1 {
    float: right;
}

responsive.css (css/responsive.css)

.kakaku1 {
    float: none;
    display: block;
    text-align: right;
}

③PC、レスポンシブ共に1行で収まらない場合

デメリット：一行で収まる場合でも価格が必ず一行下がって右に来る

  • コーンコーンラーメン750円コーンコーンラーメン750円
  • こちらを使用
    コーンコーンラーメン750円コーンコーンラーメン750円

HTML

コーンコーンラーメン<span class="kakaku2">750円</span>
コーンコーンラーメン<span class="kakaku2">750円</span>

スタイルシート (style.css)

.kakaku2 {
    float: none;
    display: block;
    text-align: right;
}

tableタグを使った表組み

PC、レスポンシブ共に1行で収まる場合に使用、かつメニュー数が多いとき使用するとよいが、spanの方ですべて解決するが一応載せてる。
メニュー数が少ない場合は非推奨

味玉ラーメン 750円
ニンニクラーメン 750円

※メニュー数が少ない場合は「spanタグを使った表組み」がいい。

HTML

<table class="price_table1"><tbody>
<tr><td>味玉ラーメン</td><td>750円</td></tr>

<tr><td>ニンニクラーメン</td><td>750円</td></tr>
</tbody></table>

スタイルシート (style.css)

.price_table1 td, .price_table1 th {
    border: none;
    padding: 10px 15px;
    line-height: 2;
}
.price_table1 tr:first-child td {
    padding-top: 0;
}
.price_table1 td:nth-child(2n+1), .price_table1 th:nth-child(2n+1) {
    padding: 10px 15px 10px 0;
}
.price_table1 td:nth-child(2n), .price_table1 th:nth-child(2n) {
    padding: 10px 0 10px 0;
    text-align: right;
    white-space: nowrap;
}
TOP