contents_007
![](../_src/10662/f32385e2bac981e311f9b6f9f4783074_s.jpg?v=1626934564937)
step 04
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
contents_007a
![](../_src/10664/f32385e2bac981e311f9b6f9f4783074_s.jpg?v=1626934564937)
step 04
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
詳細を見る
contents_007b
![](../_src/10666/f32385e2bac981e311f9b6f9f4783074_s.jpg?v=1626934564937)
step 04
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
左右の画像と文字を上下にちょっとずらしたレイアウト2
ブロックを2分割して右カラムをちょっと左にずらした定番のレイアウト。
カラム1,カラム2に対してCSSで設定しているため、左右のサイズ割合(画像をもっと大きく・小さく)や、重なる部分の寸法の増減、右カラム背景の色やパターン(画像データ)を簡単に変更できます。
stepの表示はリードに指定しCSSでリードに対して設定しています。
また、contents_007はスマホでは上下で並びます(1カラム)が、スマホでも若干重なるようにしています。重なる時に上になるカラムの幅を若干狭くして重なりを表現しています。
右が上になるよう重ねるパターン。「Human Stage」の『お仕事紹介までの流れ』ページのブロックをBiNDで表現してみました。
参考)
https://www.human.or.jp/flow/
contents_007a
右が下になるように重ねるパターンにCSSでアレンジしたパターン。右カラムの背景色はCSSで簡単に変更できますので、サイトのイメージカラーなどに合わせることも簡単です。
007aには詳細ページへのリンクを配置しています。
contents_007b
右カラムの背景を繰り返し配置ができる素材で指定したパターン。CSSのbackground-imageで画像を指定してあげるだけで簡単に変更できるようにしてあります。
以下のようなサイトで繰り返し配置で使える背景素材がダウンロードできます。
https://www.toptal.com/designers/subtlepatterns/thumbnail-view/
http://bgrepeat.com/
画像
上のブロックでは幅640pxの画像を配置しています。ブロックの幅は1020pxで余白30pxに設定してあるので500px程度あればサイズ的には足りますが、若干大きめの画像を配置して縮小表示されるようにしています。