好きなサイト100選 Webサイトのレイアウトパターンがひと目で分かる

好きなサイト100選 Webサイトのレイアウトパターンがひと目で分かる!カラムレイアウトからレスポンシブレイアウトまで参考になるWebサイトのデザインや配色、地域などをカテゴリ分け

好きなサイト100選 三菱鉛筆株式会社 2カラム レスポンシブ対応

好きなサイト100選 三菱鉛筆株式会社 2カラム レスポンシブ対応


uni 三菱鉛筆株式会社のオフィシャルウェブサイトです。ボールペン、シャープ、サインペン、鉛筆・色鉛筆、印章・印鑑付きボールペン、机上用品、学用品、エコ商品の情報や、お客様相談室、三菱鉛筆博物館などの情報をご紹介します。

 

f:id:site100:20170104130015p:plain

 

f:id:site100:20170104130044p:plain

ヘッダーメニュー:PC時はスライダーの上に横並び。SP時はページTOPへの上に2列2行で表示させる。

スライダー:PC時はスライダーの右側に内容を画像でたて並びに配置。SP時にはスライダーのみで右側の画像はdisplay:none

ナビゲーション:PC時はスライダーの下に横並び。SP時は2列2行で表示させる。

 

商品を検索する、商品ラインナップ:PC時は右のカラムに表示させ、SP時にフロートを解除させる。

おススメコンテンツ PC時には4列2行の表示。SP時には2列4行の表示

ニュース、商品ラインナップ、お客様相談室、トピックス:PC時には左のカラムに表示させる。SP時には横幅100%表示でアコーディオンパネルにさせる。