Lognote

ネット集客に強い整体院サイトを制作

nth-child-comparison-table-thumbnail

疑似クラスnth-childで作るおしゃれな比較風テーブル

公開日:2017-05-27
最終更新日:

CSSの疑似クラスnth-childを使って、商品比較に便利なテーブルをカスタマイズしてみました。

最終完成イメージ

カスタマイズ完成イメージです。

他店舗サロン 当院
料金について 低価格。短時間のソフトマッサージもあり気分で選びやすいがその分割高。 価格もちょっと高め。技術取得者の施術なので、持ちがよく長期で考えるとコスパ良し。
待ち時間 いつでも気軽に行ける分、お客さんも多く待たされる。 完全予約制ですぐ施術に入れる。待ち時間はほとんどなし。
メリット リラクゼーション効果が得られる。気分がリフレッシュされる。 痛みや疲れの根本から改善し、健康な体を手に入れる。生活習慣の見直しやアドバイスを受けられる。

スマホでは、横がはみ出すのでスクロール処理をします。

nth-child-comparison-table-01

カスタマイズの手順

カスタマイズは以下の手順でおこないます。

  • HTMLの記述
  • 比較テーブル用CSSの記述
  • スマホ閲覧用横スクロールCSSの記述

HTMLの記述

HTMLでテーブルを記述します。

既存テーブルのセレクタとバッティングしないよう、全体を.hikakuで囲んでいます。

<div class="scroll-box">
<table class="hikaku">
<thead>
<tr>
<td></td>
<td class="top-radius">他店舗サロン</td>
<td class="top-radius2">当院</td>
</tr>
</thead>
<tbody>
<tr>
<td>料金について</td>
<td>低価格。短時間のソフトマッサージもあり気分で選びやすいがその分割高。</td>
<td>価格もちょっと高め。技術取得者の施術なので、持ちがよく長期で考えるとコスパ良し。</td>
</tr>
<tr>
<td>待ち時間</td>
<td>いつでも気軽に行ける分、お客さんも多く待たされる。</td>
<td>完全予約制ですぐ施術に入れる。待ち時間はほとんどなし。</td>
</tr>
<tr>
<td>メリット</td>
<td>リラクゼーション効果が得られる。気分がリフレッシュされる。</td>
<td>痛みや疲れの根本から改善し、健康な体を手に入れる。生活習慣の見直しやアドバイスを受けられる。</td>
</tr>
</tbody>
</table>
</div>

比較テーブル用CSSの記述

比較テーブル用CSSを追記してください。

コメントが付いているプロパティーで、色を自由にカスタマイズできます。

/*--------------------------------------
比較テーブル
--------------------------------------*/
table.hikaku {
    border: none;
    table-layout: fixed;
    margin: 30px 0;
    padding: 0;
    width: 100%;
    color: #616161; //テーブル全体の文字色
}
table.hikaku td {
    padding: 15px;
    width: 30%;
    background: #ffffff; //テーブル全体の背景色
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: .1em;
    border-top: none;
    border-left: none;
    border-right: none;
}
table.hikaku td:nth-child(1) {
    background-color: #ffffff; //左の列の背景色
    width: 100px;
    font-size: 15px;
    text-align: center;
}
table.hikaku td:nth-child(2) {
    background-color: #f9f9f9; //真ん中の列の背景色
    width: 150px;
}
table.hikaku td:nth-child(3) {
    background-color: #ffebd8; //右の列の背景色
    border-bottom: 1px solid #ff9933; //右の列の下ボーダー色
    width: 150px;
}
table.hikaku td.top-radius,
table.hikaku td.top-radius2 {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
table.hikaku td.top-radius2 {
    color: #ff9933; //右の列の見出し色
}

スマホ閲覧用横スクロールCSSの記述

スマホ閲覧時は、幅が足りなくなるので右端が切れてしまいます。

表全体を横スクロールして見られるようにしているのが、テーブルをはさんでいる.scroll-boxです。

このクラスセレクタは、STINGER8には初めから付いています。STINGER8以外を使用している方は、新しく以下のCSSを追加してください。

/*--------------------------------------
テーブルを横スクロールさせる
--------------------------------------*/
.scroll-box table {
    max-width:initial;
}
.scroll-box {
    overflow-x: auto;
    margin-bottom:10px;
}
.scroll-box::-webkit-scrollbar {
    height: 5px;
}
.scroll-box::-webkit-scrollbar-track {
    border-radius: 5px;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px;
    background: #f3f3f3;
}
.scroll-box::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #ccc;
}

これで、横にスクロールできるようになるので、tdの幅150pxをさらに長くしても大丈夫です。

プロパティー「overflow-x」の解説
overflow-xプロパティは、横幅が指定された要素でその範囲内に内容が入りきらない場合に、横にはみ出た部分の表示方法を指定します。値をautoにすると、ブラウザーに依存になりますが、基本的にスクロールできるようになります。
疑似要素「::-webkit-scrollbar」の解説
疑似要素::-webkit-scrollbarは、スクロールバーのデザインを指定します。-webkit-と先頭につけることで、Google Chrome(Android)、Safari(iPhone)独自のデザインが可能となり、これを「ベンダープレフィックス」といいます。他にもFirefoxの-moz-、Operaの-o-、Internet Explorerの-mo-などがあります。

scrollbar-trackはバー全体、scrollbar-thumbは移動する部分のバーを指定してデザインします。

nth-child-comparison-table-02

このあたりは好みで変更してみてください。

以上、「疑似クラスnth-childで作るおしゃれな比較風テーブル」という記事をお届けしました。

-ブログ運営, 整体院経営
-, ,

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

疑似クラスnth-childで作るおしゃれな比較風テーブル
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

do-not-discount-thumbnail

ひとり整体院で患者さんが減っても絶対に値下げしてはいけない理由

この記事へたどり着いたということは、あなたは整体の仕事に興味がある、またはすでに経営に行き詰まっている方かもし …

choose-square-thumbnail

整体院のクレジットカード決済にSquareを選んだたった一つの理由

最近、本業の整体院でクレジットカード決済を導入しました。 選んだのは「Square」というモバイル決済サービス …

question-of-the-reader-thumbnail

ブログの文章量を上手に増やすコツは読者の「なぜ?どうして?」に答えること

LINEやTwitterの短文に慣れてしまったせいか、ブログの文章を作るのが毎回苦痛でしかたありません。 ブロ …

xserver-ssl-thumbnail

エックスサーバーが独自SSLの無料提供を開始!引っ越しを考えてもいいかも!?

このツイートにはびっくりしました。なにしろ、エックスサーバーが独自SSLを無期限、無制限で無料提供を開始するっ …

laminator-member-card-thumbnail

ラミネート加工で折れない高品質な回数券を自作する方法

サロンを経営されている方で回数券を販売されている方は多いと思いますが、使い切った回数券の後始末は...

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい