料金表のデザインをhtml・cssのソースコードのコピペで簡単に実装完了！

2023年11月3日
コラム
HTML/CSS

コラム

1 はじめに
2 料金表のデザイン
3 料金表のHTMLとCSSのソースコード
4 他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ

はじめに

実務案件で以前料金表の作成のご依頼がありました。内容は案件とは別のものにしています。

ソースコードも掲載するのでhtmlをcssをコピペするだけで簡単に実装ができます。

ご自身のサイトに合うようにhtml・cssを変更してぜひご利用ください。

料金表のデザイン

強調したいプランだけ他のプランよりも高さを高くし、box-shadowで影をつけ「人気！」と文字を入れることで強調しています。

スマホの画面幅では横スクロールができるようになっています。

月額費用

初期費用

質問回数

メール・チャット

電話

オンライン

エコノミープラン

〇〇円

〇〇回

〇回まで

プレミアムプラン

〇〇円

〇〇回

〇回まで

料金表のHTMLとCSSのソースコード

<div class="price-table">
	<div class="price-table__list price-table-th">
		<div class="price-table__item">
			月額費用
		</div>
		<div class="price-table__item">
			初期費用
		</div>
		<div class="price-table__item">
			質問回数
		</div>
		<div class="price-table__item">
			メール・チャット
		</div>
		<div class="price-table__item">
			電話
		</div>					
		<div class="price-table__item">
			オンライン
		</div>
	</div>
	<div class="price-table__list">
		<div class="price-table__item price-table__ttl">
			エコノミープラン
		</div>
		<div class="price-table__item price-table__item-price">
			<span class="price-table-price">
				〇〇円
			</span>
		</div>
		<div class="price-table__item price-table__item-price">
			<span class="price-table-price">
				〇〇円
			</span>
		</div>
		<div class="price-table__item">
			〇〇回
		</div>
		<div class="price-table__item">
			〇回まで
		</div>
		<div class="price-table__item">
			〇回まで
		</div>
		<div class="price-table__item">
			〇回まで
		</div>
	</div>
	<div class="price-table__list price-table-recommend">
		<div class="price-table__item price-table__ttl">
			<span class="price-table-impact">人気！</span>スタンダードプラン
		</div>
		<div class="price-table__item price-table__item-price">
			<span class="price-table-price">
				〇〇円
			</span>
		</div>
		<div class="price-table__item price-table__item-price">
			<span class="price-table-price">
				〇〇円
			</span>
		</div>
		<div class="price-table__item">
			〇〇回
		</div>
		<div class="price-table__item">
			〇回まで
		</div>
		<div class="price-table__item">
			〇回まで
		</div>
		<div class="price-table__item">
			〇回まで
		</div>
	</div>
	<div class="price-table__list">
		<div class="price-table__item price-table__ttl">
			プレミアムプラン
		</div>
		<div class="price-table__item price-table__item-price">
			<span class="price-table-price">
				〇〇円
			</span>
		</div>
		<div class="price-table__item price-table__item-price">
			<span class="price-table-price">
				〇〇円
			</span>
		</div>
		<div class="price-table__item">
			〇〇回
		</div>
		<div class="price-table__item">
			〇回まで
		</div>
		<div class="price-table__item">
			〇回まで
		</div>
		<div class="price-table__item">
			〇回まで
		</div>
	</div>
</div>

.price-table {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow-x: scroll;
}
.price-table__list {
    width: 216px;
    border-left: 1px solid #b7b7b7;
    border-top: 1px solid #b7b7b7;
    flex-shrink: 0;
}
.price-table__list:last-child {
    border-right: 1px solid #b7b7b7;
}
.price-table-th {
    width: 250px;
    background-color: #eaeaea;
}
.price-table__item {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #b7b7b7;
}
.price-table__ttl {
    color: #fff;
    background-color: #c95d63;
    height: 120px;
    flex-direction: column;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}
.price-table-recommend {
    box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
}
.price-table-recommend .price-table__ttl {
    background-color: #be0009;
    height: 160px;
}
.price-table-impact {
    font-size: 18px;
    letter-spacing: 0.2em;
    color: #fff;
    text-align: center;
    display: block;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    color: #191919;
    background-color: #ffd336;
    width: 80%;
    font-weight: 700;
    margin-bottom: 10px;
}
.price-table__item-price {
    background-color: #fdf2f3;
}
.price-table-price {
    color: #be0009;
    font-weight: 700;
    font-size: 18px;
}
@media screen and (max-width: 991px) {
    .price-table {
        justify-content: flex-start;
    }
}
@media screen and (max-width: 767px) {
    .price-table__list {
        width: 176px;
    }
    .price-table-th {
        width: 180px;
    }
    .price-table__ttl {
        font-size: 16px;
    }
    .price-table-impact {
        font-size: 16px;
        height: 28px;
        line-height: 28px;
    }
}