「引き取りやすさ」で比較
 美味しいラーメン | こってりラーメン | 酸っぱいラーメン
| しっとりラーメン
| |
|---|---|---|---|---|
| 商品名 | 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」を使って見出しの下に三角を付けることで見出しが吹き出しっぽくなっています。
２色背景ボックス
ボーダーで枠を囲まなくても背景色でもいいじゃんと気がついたときのボックスです。シンプル・イズ・ベスト。
ポイント的な見出し
「見出し」だからwidth:100%みたいな縛りって必要なかったなという感じのときに使いたいポイント風のボックスです。
カラーインデックス風
文房具店で売っているカラーインデックスを思い出したときにこのデザインを使ってください。
見出しに下線
ポイントは見出しのwidthをcalcで計算式にして、下のinnerのサイドに効いているpaddingと線の長さのバランスを取ることです。
アイコン
fa-circle-o
fa-close
fa-caret-up