上にはみ出した1つの写真と、下に4つ並ぶ写真の構成。
はみ出した画像はCSSで影を設定しています。

 
左の影付きの画像と右に見出しと本文でなるブロックと、正方形の画像が4枚並ぶブロックブロックをセットで1つとなる構成。
ブロック自体にwidth指定して背景色を設定しているため、背景に色がある時に白背景のブロックという想定です。
上のブロックはカラムをwidth指定していますので、数値を変更することで割合を簡単に変更可能です。そして、画像に影がつくようにCSSで設定していますので画像は任意に変更して大丈夫です。
 
ダウンロードするappeal_005は、ページ背景色がグレー(#f3f3f3)で、appeal_005のブロック背景色が白(#fff)になっています。
下の表示は、このページの背景色が白のためブロック背景色をグレーに設定しています

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

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

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

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


  • 文字横の画像の影はCSSで設定しています。
  • 下ブロックの4画像は正方形にすることでサイズが揃うようにしています。

Tablet View


appeal_005
 

appeal_005a

SP View


appeal_005