片側に画像、反対側に文字情報で、画像の影や重なる文字をアクセント

 
大きめに配置する画像にはCSSでぼかしのない影が表示される設定で、色はCSSで変更可能です。
文字情報は、太字の大きめなフォントの番号に見出しが重なるように設定することで、アクセントにしています。

01

01. INTRODUCTION

あのイーハトーヴォのすきとおった風

 
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。

02

02. INTRODUCTION

あのイーハトーヴォのすきとおった風

 
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。


  • 数字、画像下に重ねている色はCSSで変更可能です。
  • 画像下に重ねている色は、画像に対してのbox-shadowでぼかし0で指定しています。
  • 数字はリードに設定し、CSSで文字サイズを指定しています。大見出しと重ねるデザインのためあえて大きなサイズを指定していますが、タブレットの時もそのサイズとなるので文字側のカラムがかなり高さが増えていきます。

Tablet View


 

SP View