CSSで利用可能な枠

ボーダーを設定する全てのclassにspq–hを設定してください。

例)左ボーダー青+太線+角丸1em+太文字+赤ストライプ+影+空白2rem+茶色アイコン

サンプルテキストテキスト
サンプルテキストテキスト
サンプルテキストテキスト

<p class="spq--h h--left h--bold h--thick h--shadow h--bc-blue h--ba-stipe-rd h--p2 h--radius10">サンプルテキストテキスト
サンプルテキストテキスト
サンプルテキストテキストト</p>

1.周囲全ボーダー(class に h–all を追加)

カスタムする場合

下記のclassを使って色々カスタムしてみてください。

1.周囲全ボーダー(class に h–all を追加)

 

2.ボーダー太く(class に h–medium を追加)

 

3.ボーダー極太(class に h–thick を追加)

 

4.上ボーダー(class に h–top を追加)

 

5.下ボーダー(class に h–bottom を追加)

 

6.ボーダー影(class に h–shadow を追加)

 

7.ボーダー白+影(class に h–bc-white と h–shadow を追加)

 

8.ボーダー青(class に h–bc-blue を追加)

 

9.ボーダー赤(class に h–bc-red を追加)

 

10.ボーダー黄(class に h–bc-yellow を追加)

 

11.ボーダー緑(class に h–bc-green を追加)

 

12.ボーダー灰(class に h–bc-gray を追加)

 

13.背景白+影(class に h–ba-white と h–shadow を追加)

 

14.背景青(class に h–ba-blue を追加)

 

15.背景赤(class に h–ba-red を追加)

 

16.背景黄(class に h–ba-yellow を追加)

 

17.背景緑(class に h–ba-green を追加)

 

18.背景灰(class に h–ba-gray を追加)

 

19.背景灰(class に h–ba-gray を追加)

 

20.背景青ストライプ(class に h–ba-stipe-bl を追加)

 

21.背景赤ストライプ(class に h–ba-stipe-rd を追加)

 

22.背景灰+角丸0.2em(class に h–radius2 を追加)

 

23.背景灰+角丸0.5em(class に h–radius5 を追加)

 

24.背景灰+角丸0.7em(class に h–radius7 を追加)

 

25.背景灰+角丸1em(class に h–radius10 を追加)

 

26.周囲全ボーダー+1rem(class に h–all h–p1 を追加)

 

27.周囲全ボーダー+2rem(class に h–all h–p2 を追加)

 

28.周囲全ボーダー+3rem(class に h–all h–p3 を追加)

 

28.周囲全ボーダー+太文字(class に h–all h–p3 h–boldを追加)