「引き取りやすさ」で比較


美味しいラーメン

こってりラーメン
酸っぱいラーメン

しっとりラーメン

商品名
1行1列
1行2列
1行3列1行4列
2行見出し(左)
2行1列
2行2列
2行3列2行4列
3行見出し(左)

3行1列

3行1列

3行3列
×
3行4列
4行見出し(左)4行1列4行2列4行3列4行4列
5行見出し(左)公式サイト公式サイト公式サイト公式サイト
\360日間の全額保証付き/

公式サイトはこちら

公式サイトはこちら
公式サイトはこちら
公式サイトはこちら

見出しカスタマイズ1

見出しカスタマイズ

見出しカスタマイズ

見出しカスタマイズ

見出しカスタマイズ

見出しカスタマイズ

シンプルなボックスデザイン
シンプルなボックスデザインです。少し濃い目のカラーを使って見出しを白くするのがポイントです。

 

角丸デザイン
border-radiusプロパティを使って角丸にしました。全体の印象が丸くなりますね。

 

吹き出し風デザイン
疑似要素「::after」を使って見出しの下に三角を付けることで見出しが吹き出しっぽくなっています。

 

2色背景ボックス
ボーダーで枠を囲まなくても背景色でもいいじゃんと気がついたときのボックスです。シンプル・イズ・ベスト。

 

ポイント的な見出し
「見出し」だからwidth:100%みたいな縛りって必要なかったなという感じのときに使いたいポイント風のボックスです。

 

カラーインデックス風
文房具店で売っているカラーインデックスを思い出したときにこのデザインを使ってください。

 

見出しに下線
ポイントは見出しのwidthをcalcで計算式にして、下のinnerのサイドに効いているpaddingと線の長さのバランスを取ることです。

 

アイコン