スマホでは画像に対して回り込み設定にしたレイアウト

 
スマホでは回り込みのレイアウト(左に写真、右に文字)になるようにCSSで設定してみました。
パソコンでの見え方は同じです。

features_007、features_007a、features_007b すべてパソコンでの見え方は同じです。


  • カラムに対しては余白ゼロとし、小見出し・本文に対して余白を設定しています。
  • カラムに対して枠線を設定しています。
  • features_006:カラムに対して上下・右の罫線を設定し、カラムの最初の子要素に対してのみ左の線を設定するためにDRESS版のみとなります。
  • features_006a:カラムの左に線を設定し、カラムの最初の子要素に対して左の線なしとする設定をDRESSで行っています。(最初の子要素が必要なのでDRESS版のみとしています)

Tablet View


 
features_007、features_007a、features_007b すべてタブレットでの見え方は同じです。

SP View


features_007
 

features_007a
 

features_007b