【38日目】サイトをスマホ対応にする

サイトを作成し始めて38日目になりました。昨日はテスト用に準備した環境でサイト全体の見栄えを変えつつレスポンシブデザイン（スマホ対応）に挑戦開始しました。

ロードマップ

ロードマップで進捗を見ると下記の通りです。

• 準備 - サイトの全体像を決める
• 使用するプログラミング言語を決めて環境を整える
• サイトの基本構造を作って公開する
• 収益化に最適なサイトにアップグレードする
• コンテンツを充実させる（他の作業と同時進行）
• サイトを見てもらえるようにサーチエンジンに登録する
• sitemap.xmlとRSSを作成する
• コンテンツに合わせてサイトを修正、スマホにも対応する　←今ここ
• お問い合わせページを作る
• 検索ボックスを作る
• サイトマップページを作る
• 個人情報に関するページを作る
• SEOとセキュリティについて調べ、対応する
• GoogleアドセンスとAmazonアソシエイトの申し込みをする
• ローカルで簡単に入力ができるようにフォームを作る
• フォローアップ - より収益化に向いたサイト構造に変更する

レスポンシブデザインはflexboxを使いたい！

早速今日の作業に取り掛かりましょう。昨日から引き続き、ローカルのテスト環境でレスポンシブデザイン（スマホ対応）にサイトを変更していきたいと思います。まずは、画面幅が小さくなるとナビゲーションバーが下の方に行くようにしたい。ナビゲーションバーがなくなると、スマホでもすっきりと見られるようになります。

いろいろと調べたところ、スタイルシートに「メディアクエリ」というものを使うらしいです。画面幅に合わせて、使用するスタイルシートを変えてくれる優れものらしい。サイトを作り始めたときには、PC用、スマホ用、とスタイルシートを別々に準備するつもりでいましたが、管理が大変なので、1つのスタイルシートに書き込んでいくことにしました。スタイルシートが長くなりますが、仕方ないです。なるべくスタイルシートに不要な設定をしないように気をつけます。

まず本文が中央に来るように設定

色々と考えまして、PC（横幅1100px以上）の場合には、本文部分は900px固定にすることにしました。この本文部分を画面中央に表示したいです。検索した結果、「calc」という、スタイルシートに計算式を入れられるものを発見！…算数の時間かな？いろいろ考えた結果、「真ん中から本文の幅の半分を引いたら、本文の左端になるはず！」と思いつきました。

これを考えるのに、実は20分ほど使ってます…。検索より時間がかかる私の頭脳…。1200pxより画面幅が小さい場合には、「max-width: 900px」とだけ設定しています。

無事ど真ん中に来ました

画面幅が狭くなるとナビゲーションバーが下に来る

次に、画面幅が狭くなるとナビゲーションバーが本文の下に回り込む仕様にしていきます。作業しなきゃ！と思いましたが、既にできていました。本文とナビゲーションバーは、最初からflexboxで囲っています。本文を900px固定にしたら、横幅が狭くなると自動的にナビゲーションバーが下に来ていました。

自動的に下には来てるんだけど…。本文を真ん中に置いたせいで、画面幅が1500px以下になるとナビゲーションバーが下に来るようになっていました…。20分も考えたのに…。どうすりゃいいんだ！いい計算式が思いつかないので、上でつくった真ん中に配置するスタイルシートは、1500px以上の場合に適用することにしておきました。そのうちゆっくり考えよう…。

しかし、画面幅1250px辺りの挙動がおかしい…。私の計算だと、本文900px+ナビゲーション300pxで1200pxlが「画面いっぱい」の分岐点です。でも、1250あたりでflexboxの折り返しが来てしまう…。もしかしたらmarginを勝手に取ってるのかも…？

articleとasideにそれぞれ「margin:0;」を設定すると、うまく動くようになりました！

下に周ったナビゲーションバーを横にそろえる

さて、今は縦一列になっているナビゲーションバー。何の設定もしていないので、当たり前ですが、下に周ったときも縦一列になっています。下に周ったときには、横に内容が広がるようにしたいです。

まずはナビゲーションバー全体をFlexboxにして、各要素をdivで囲いました。これだけで、下に来たときには横に広がるようになりました！でも、きつきつです。お互いがとっても好きみたい（笑）

あと、画面を広くしたときはお互いが嫌いになるみたいで、縦幅に合わせて均等に配置されてしまいました…。ここは、検索したら「align-content:flex-start;」と設定することで、上に集合してくれることが分かったので、設定。こちらは簡単に回避できた！

ナビゲーションが横にそろった時の見栄えを整える

ナビゲーションが本文の下に来る場合には、ナビゲーションに入れた各要素にPaddingを設定して見ました。隙間ができて見やすくなったかな？

最終的なナビゲーションのスタイルシートはこんな感じになりました。

本番環境に移植

「開発記事」と「開発日記」のトップページも綺麗にしたかったのですが、もう時間が迫っているので、今日はここまでにします。ここまでの分を本番環境に移植することにしました。スマホからも見やすくなったと思うし。

移すファイルを間違えないように注意しつつ、ドキドキしながら移し替え、本番用のファイルでもテスト。細かいデザイン上の問題はありますが、動きに問題はなかったので、このまま公開したいと思います！

ある程度レスポンシブデザインにも対応できてきたので、明日は「開発記事」と「開発日記」のトップページのデザインに挑んでいきたいと思います！では、また明日。

記事をシェアする

亀の子に連絡

ランキング参加中！ぽちっとしてね