前回はこちらで紹介したように、_s(underscores)を左コンテンツ・右サイドバーの2カラムにレイアウト変更してみました。このままだとタブレットでの表示にはなんとか耐えられるかもしれませんが、スマートフォンでの表示は我慢できないくらいひどく崩れてしまいます。この現象を解決するためには方法は違えどスマートフォン表示に対応するための策を何かしら講じないといけません。そこで今回は今後のことも考えてモバイルファーストのレスポンシブデザイン化をすることにしました。レスポンシブデザインとは表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する。複数のファイルを用意する場合に比べ、デザインや機能の自由度は下がるが、すべての機器に同じ内容を表示でき、更新作業の簡略化や更新漏れの防止が期待できる。検索エンジンやアクセス解析に内容が重複した複数の異なるURLが出現することも避けられる。既存のコードまずは、デフォルト状態のcontent-sidebar.cssのコードはこちらになります。こちらのコードで先ほどご覧になったスマートフォン画面になるんですね。100%;}.widget-areaのwiidthが常に25%になっています。画面幅の狭いスマートフォンでの表示でも25%とってしまって、見栄えが悪くなってしまっていますね。Queryの記述とブレークポイントメディア・クエリに関しては僕が云々いうよりもこちらを参照いただいた方が理解が進むと思います。使って、Webサイトをスマートフォンに対応させるときの注意書き今回はブレークポイントを768pxと1160pxとして設定しました。モバイルファースト設計なので、まずはモバイル表示用のCSSを記載します。1160px)内にPC用のCSSをモバイル用CSSに上書きしていくイメージで記述していきます。_s(underscores)の構造デフォルト状態の_s(underscores)では、HTML構造はこのようになっています。必要に応じてこちらの構造も変更していくことにはなりますが、まずはデフォルト状態のこちらの構造を参考にレスポンシブ化してみることにします。モバイル用のコードまずはモバイル用のCSSを記載していきます。100%;}.content-areaはコンテンツ内のメイン部分を指しています。その横幅は100%に設定しています。ある1カラムのスマートフォン用表示となっています。それ故に、floatなどの要素は見当たりませんね。.site-mainは.content-area内のコンテンツを入れていくエリアになります。そちらには左右にだけ余白を1rem分設けています。.widget-areaは俗に言うサイドバー部分を指しています。そちらも横幅を100%にしてあります。.site-footerも同じ内容です。こちらは最下部のフッター要素になります。タブレット用のコードそして、タブレット用のCSSを記述していきますが、今の所必要な記述がないので(現状ではタブレットでもスマートフォンと同じように表示させる意向のため)、ブランクになっています。{}}PC用のコードPC用表示ではコンテンツ幅を1060pxに設定しています。メインコンテンツ幅は680pxに、サイドバーは380pxという形です。コンテンツが画面中央に常に位置するようにも設定してあります。auto;}}PC用のCSSに関しては、.site-headerや.site-infoというクラスも追加して設定しています。これらはヘッダー要素、フッター要素の位置設定のために記述しています。エリアが簡単に認識できるように背景に色をサンプルで入れてあります。このような表示になりますモバイルはこのような表示になります。タブレットはこのような表示になります。最後に、PCではこのような表示になります。まとめこれは一例にすぎませんが、このようにして_s(underscores)をモバイルファーストなレスポンシブ対応レイアウトにすることができます。こちらを参照しながらぜひいろいろと試してみてください。お客様の声オレインデザインにご依頼いただいたお客様(個人・法人含む)からの声を紹介しています。岐阜を中心にWeb制作全般のお仕事をしているフリーランスです。趣味はサッカー・F1観戦。英国プレミアリーグ、マンチェスターユナイテッドを長年愛しています。英国滞在歴2年、日常英会話くらいは大丈夫です。20ヶ国以上列車で単独周遊してきました。WordPress大好きです。Meetup共同オーガナイザー・CoderDojo岐阜チャンピオンなどの活動もしています。晃司2014年12月10日WordPress_s(underscores)のナビゲーションをモバイルファーストのレスポンシブ...先日、_s(underscores)のナビゲーションをカスタマイズしてみました。晃司2014年12月19日WordPress_s(underscores)ナビゲーションに追加したソーシャルメディアリンクを...前回、ナビゲーションにソーシャルメディアへのリンクを追加しました。晃司2014年12月18日この投稿へのトラックバックトラックバックはありません。Meetupの活動に協力しています。公式サイトはこちら岐阜市を拠点に活動しているフリーランスWeb制作者です。WordPressを得意としています。Meetupについて岐阜市を中心に毎月1回WordPressを使っている方向けのコミュニティを開催しています。初心者の方(これから勉強したい方も!)もどんどん参加していただいています。