特徴やフローを横に並べるブロックで数字の表示に工夫

 
数字はリードに設定しCSSで調整しています。また、数字の次の英語、日本語見出しについては数字の位置に重なるように設定しているため、数字と文字が重なったときの可読性を確保できる色の設定もCSSでできるようにしています。

1

CAT

吾輩は猫である

 
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
 


 
VIEW MORE

2

DOG

吾輩は犬である

 
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
 


 
VIEW MORE

3

MONKEY

吾輩は猿である

 
吾輩は猿である。名前はまだ無い。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
 


 
VIEW MORE

features_013 DRESS版

DRESSに数字のフォント(Google FontのAnton)を埋め込んでいるパターン
ブロック内にGoogle fontの読み込みと、フォント指定のDRESSが含まれているので、ブロックをコピペするだけで数字のフォント(Anton)が反映されます。

1

CAT

吾輩は猫である

 
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
 


 
VIEW MORE

2

DOG

吾輩は犬である

 
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
 


 
VIEW MORE

3

MONKEY

吾輩は猿である

 
吾輩は猿である。名前はまだ無い。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
 


 
VIEW MORE


  • リード、タイトル、大見出しの色はCSS(DRESS版はDRESS)で設定しています。
  • 「VIEW MORE」の上にからの改行がいくつか入っています。BiNDupの挙動として複数の改行がないと縦位置合わせが機能しないため数行の改行を入れてありますが、本文と「VIEW MORE」がひっついてしまうようでしたら更に改行を増やしてみてください。

Tablet View

SP View