HOME > FEATURES

FEATURES

features_001

 

パソコンは3カラム、スマホでは1カラムの基本的な設定

カラムwidthの設定はなしの3分割。スマホレイアウトでカラム2、カラム3のpadding-topに余白を設定。各項目で説明文の文字数があるときスマホでは1カラムが読みやすい。
 
MORE

features_002


 

パソコンは4カラム、スマホでは2カラムの基本的な設定

カラムwidthの設定はなしの4分割。スマホレイアウトでは2列表示。カラム3、カラム4のpadding-topに余白を設定。各項目で説明文の文字数が少ないときスマホでは2カラムが可能。
 
MORE

features_003


 

パソコンは3カラム、スマホでは1カラムのアイコンを使ったパターン

カラムwidthの設定はなしの3分割。スマホレイアウトでは1列表示。シンプルなアイコンをSiGNで作る丸枠の中に読み込み、丸枠にはsignで影をつけています。
SiGNで作成した枠にアイコンを読み込んでフィット表示。マウスオーバーの動きはcssで設定。
 
MORE

features_004


 

カラムごとに上下にずらした変則パターン

カラムwidthの設定はなしの5分割。スマホレイアウトでは2列表示。カラム1、3、5ではpadding-topで上に余白を入れてずらしたレイアウト。各項目で説明文の文字数が少なくシンプルなアイコンを並べるときの提案。
マウスオーバーの動きはcssで設定。
 
MORE

features_005


 

横に並ぶ画像は間隔をゼロにして大きく表示。文字情報だけをCSSで余白設定したパターン

カラムwidthの設定はなしの3分割。カラムの感覚をゼロにして横に並ぶ画像をひっつくように配置。文字情報は小見出しと本文に設定し、小見出し・本文に対してcssで左右の余白を設定。
スマホでは1カラムにし、画像はスマホウィンドウ幅いっぱいに表示する。
 
MORE

features_006


 

横に並ぶ画像は間隔をゼロにして大きく表示しカラムを線で囲う設定

カラムwidthの設定はなしの3分割。カラムの感覚をゼロにして横に並ぶ画像をひっつくように配置。さらにカラムを線で囲う設定。文字情報は小見出しと本文に設定し、小見出し・本文に対してcssで左右の余白を設定。スマホでは1カラムにし、画像はスマホウィンドウ幅いっぱいに表示する。
 
MORE

features_007


 

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

カラムwidthの設定はなしの3分割。文字数が多い時にはスマホではこのようなレイアウトになるよにCSSで設定してみました。スマホでご覧いただくか、ブラウザのウィンドウ幅を640px以下に縮小してみてください。
 
MORE

features_008


 

リンクをテキストへ設定したFEATURES

画像とテキスト(小見出し、本文)という組み合わせを横に並べたレイアウト。画像へはリンク設定をしないで、本文下に「READ MORE」というリンクテキストを配置しています。
 
MORE

features_009


 

カラムごとに背景色を指定し、写真は余白なしで大きく表示

カラムごとに背景色を指定したパターン。写真はカラムいっぱいに表示して、文字情報だけを余白があるようにCSSで設定しました。
 
MORE