既存サイトのデザインのままレスポンシブWebにしてみました。その時行った作業を紹介します。モバイル用のデザインをプランする既存サイトのデザインのまま、と言っても、もちろんモバイル端末用には多少デザインを考えなくてはいけません。非レスポンシブWebデザインの旧サイトレスポンシブWeb化前のサイトレスポンシブWeb化したサイトレスポンシブWeb化したサイト(PCでの表示)レスポンシブWeb化したサイト(モバイル端末での表示)モバイル用に追加したのは以下の3つの要素。以下で、変更の作業過程を紹介します。CSSの切り替えまずは読み込むCSSファイルを変更。grids、そして、IEの古いバージョン対応のためのレスポンシブWeb用CSSを読み込み。使い方は、以下のページに説明があります。サイト内独自のCSSルールを保存したファイル。2008年頃に購入したデザインテンプレートで、構造はおおざっぱに言って、以下のようになっている。設定して全体の枠として利用。auto;}変更後(幅のレイアウトに関わる部分のみ)max-widthを設定することで、PCなどこの幅を超える端末では固定幅レイアウトになり、それ以下の端末では端末の幅に対して100%になる。このあたりの説明は以下のページ。構成はそのまま使えるので、ここにクラスを追加していく。常に横幅一杯に表示すればよい要素には付けなくて良い。不要で、その下の幅を変更する必要のある要素のすぐ上位階層からタグ付を始める。グリッドデザインの指定方法に従い割合で表示し(pure-u-md-1-5)、さらに、小さい端末になった時は幅広に縦に積んで表示する設定をする(pure-u-1)。指定があると幅があふれてしまう。含めて幅が計算されるようにする。div」などのCSSセレクタでまとめて定義すればエレガントだけれど、今回は変に一括で指定して他に影響が出るのが怖いので、個別に設定。同じ理由で元のレイアウトではメニューの間にあったわずかな隙間も除いた。設定するなどの方法を採る必要がある。小さい端末でのメニューのON/OFF小さい端末でページの先頭にメニューが常に表示されているのは邪魔なので、最小化されたボタンをクリックした時だけメニューが開くようにする。メニュー部分のHTMLコード太字が追加した部分。小さな端末では見えないように隠す。サイトからいただきました。軽量化に気合入っています。トグル(表示ON/OFF)を設定。これに伴い、メニューには「閉じる」の項目を追加(上記コード内太字)。付いていますが、これは大きな端末では隠す設定をしているので実は不要。大きな端末では隠すクラスをあらかじめ設定してしまう、という事も可能。.hidden-md。2通りあるのかというと、作業上の歴史的な理由と、最後にクリーニングをしていない私の無精のせい~。クラスを設定した方が、HTMLコードを見ただけでタグの振る舞いが分かるので楽。このようなクラス定義は以下のように行う。作っておくと便利(後で使います)。block;}}上へ戻るボタンモバイル端末でメニューにアクセスしやすいように、ページトップに戻るリンク(ボタン)を付ける。追加したHTMLコード太字部分が追加。white;}モバイル版で隠す要素モバイル版では、PC版では左カラムに表示していたいくつかの要素を隠した。「お問い合わせ先」の繰り返し表示など。PCの表示要素をモバイル端末では隠すこのためしたのは以下の作業。-->背景画像の追加メイン画像は場所を取るので、モバイル端末用には代わりに邪魔にならない背景画像としてマスコット画像を配置。class="title_top">会社概要</h2><p>2010年2月に法人化しました。システム開発を行っています。