メールでのお問い合わせはこちら、お問い合わせフォーム

スタッフブログ

2015年1月

1

レスポンシブ対応 

DAOのサイトがサーバを変更したタイミングで、レスポンシブ対応に変更してみました。

今まではスマートフォンで見ると、パソコンでみたレイアウトがそのままの状態で表示され、スマートフォンの操作で拡大するなどしてみることを前提としていました。

dao_pc.jpg

レスポンシブ対応としては、メニュー部分をコンパクトに折り畳んで、サイドバーの部分をカラム落ちさせて、コンテンツの下部に並ぶようにレイアウトを変更する形にしています。

dao_sp.jpg

メインビジュアルの部分は表示させた状態でも良いのですが、リサイズさせるのが難しいようなので非表示としました。

元々レスポンシブ対応を考えてのレイアウトではないので無理もありますが、前よりはスマートフォンで見やすくなったのではないでしょうか。

メニュー部分に使用したのはjQueryのプラグイン「MeanMenu」です。

サイトからzipファイルをダウンロードし、CSSとJavascriptをHTMLから読み込みjQueryで「MeanMenu」を呼びたします。

jQuery('要素').meanmenu();

画像を使ったメニューだとスマートフォンで見たときに、リストに画像がそのまま表示されるので、文字に置換する仕組みが必要になります。

MeanMenuはwordpressのプラグイン版もあるので便利ですね。

1