CSSでできるレスポンシブサイトの作り方とうまくいかない時の解決方法5選

スマホでも見やすくデザイン レスポンシブ対応

こんにちは! Webサイト制作ならお任せあれライター、ナナミです。

みなさんこのブログを何で見ていますか? パソコン、タブレット、スマホ……人によって様々だと思います。最近はスマホは持ってるけどパソコンは使えないという人も増えてきています。

それならばスマホでも綺麗で見やすいデザインにしたいですよね。そんな時に役立つのが「レスポンシブ」という方法です。

じゃどうやってスマホに対応すればいいんだろう……

レスポンシブ対応がいいと聞いたけど、それってなに?

そんな疑問をお持ちの人も多いと思います。

それにお答えするためにこの記事では、

  • レスポンシブとは一体なんなのか
  • どうやったら使えるのか
  • 使うときのポイントやコピペで使えるコード


などなど、レスポンシブについて盛りだくさんで解説していきます!

これを読めばレスポンシブ対応の基礎はバッチリ。自分のWebサイトをスマホでどんな風に見せたいかを考えながらお読みいただければ幸いです。

スマホ対応に便利な「レスポンシブ」とは?

「レスポンシブ」とは、画面の幅に合わせてCSSを切り替えることにより、様々な大きさの機器に合わせたレイアウトを実現する方法です。

パソコンの画面の幅とスマホの画面の幅を比較すると、明らかにスマホの画面の方が小さいですよね。

つまり「スマホの画面幅より小さかったらこのレイアウトにする」という書き方をすることで、同じHTMLファイルなのにパソコンで見てもスマホで見ても綺麗なレイアウトにすることができるのです。

レスポンシブのメリット

  • 同じHTMLファイルを使うので、1回の更新でパソコン版もスマホ版も同時に更新できる
  • パソコン版とスマホ版でURLを分ける必要がない
  • 比較的簡単
  • Googleからの評価が得られる

レスポンシブのデメリット

  • CSSがちょっと煩雑になる
  • レイアウトが複雑だと作業に時間がかかる
  • スマホを意識したデザインが必要なので、パソコン版のデザインの自由度が若干下がる

手間がかかるなどのデメリットはありますが、それ以上にメリットが大きいですね!

特に長い期間運営するWebサイトならば、最初からレスポンシブにしてしまった方が後々がグッと楽になります。

ということで、さっそくチャレンジしてみましょう。

 サイトをレスポンシブにしてみよう!

CSSは使って覚えるべし! 色々調べて考えるよりも、まずは手を動かしてみましょう。

※ここの解説は、自分で1からWebサイトを作っている人向けの内容が多く含まれます。Webサイトの作成サービスを使っている方は、そのサービスの公式サイトなどの方が詳しく解説しているかもしれません。

用意するもの

レスポンシブ対応を始める前に用意しておきたいのがこちらです。

  • レスポンシブにしたいWebサイト
  • テキストエディタ
  • Google Chrome


はい、基本はこれだけです。

特に重要なのは「レスポンシブにしたいWebサイト」ですね。これがないと始まらない。

今回はすでにパソコン版ができていることを前提にして解説していくので、下記のソースを使っていきます。勉強用にコピペしていただいてOKです。

【HTML】

【CSS】

最初に書くお決まりのコード

まず必要なのは、「機器がパソコンではない時どのように画面を表示するか」をHTMLで指定するコードです。これをviewportと言います。

レスポンシブ対応の時に書いておきたいのは下記のviewportです。コピーしてタグ内に貼り付けましょう。

【HTML】

スルーしてもいい詳しい解説

name=”viewport”:viewportだよという宣言。

width=device-width:コンテンツの幅はデバイスの幅に合わせるよという記述

initial-scale=1:画面幅が違う時の倍率設定。この場合は倍率を変えない。

表示幅でCSSを切り替えよう

次に、画面幅によってCSSを切り替えるためのコードを用意していきましょう。

【CSS】

こんな感じで、CSSファイル内で「〇〇px以下の幅の場合はこれを使う」というスペースを用意します。この記述がメディアクエリです。

メディアクエリの書き方はこんな感じで条件をべしべし書いていくだけって感じですね。お作法がわかってしまえば大したことではありません。

あとはこの中にスマホ表示用のCSSを書いていくだけ! 簡単ですね。

今回は練習なので、CSSもご用意しました。下記をコピーしてメディアクエリの中に貼り付けちゃってください。

【CSS】

うまくできてるかチェック!

スマホ用のCSSが準備できたら、ちゃんと対応できているかチェックしていきましょう。

HTMLファイルをGoogle Chromeで開いて、右クリックで表示されるメニューの中から「検証」を選び、デベロッパーツールを起動します。

表示されたデベロッパーツールの中に、スマホっぽいアイコンがあるのでクリックしてみましょう。

なんと、画面幅をいい感じに変えて確認ができるようになるんです! 便利!

上のメニューの部分で、いろんな機種に変更することができます……神機能。

これで画面幅を色々変えて、崩れていないかを検証しつつ直していく──この作業がレスポンシブ対応の基本なのです。

コピペで使える便利なレスポンシブ用CSS

レスポンシブ対応の作業自体は、CSSを少しでも知っている人なら難なくこなせる作業です。

しかしレスポンシブの難しさはここから。実際どのようなレイアウトにすればスマホでも綺麗に見やすくできるのかを考える必要が出てきます。

そんな時に使える便利なCSSをいくつかご用意してみました! コピペOKなので、レイアウトに迷った時などにご活用ください。

これは入れておくべき基本のレスポンシブCSS

まずは何も考えずこれだけは入れておきましょう。

【CSS】

まず「float」「position」はレスポンシブの敵です。こいつらのおかげで崩れまくることばかりです。一個一個解除していくのは面倒なので、もう一括で全部解除しちゃいましょう。必要になったらまた追加すればOKです。

そして画像の幅、こいつもなかなか厄介です。最大幅を100%にして崩れを防ぎましょう。さらに高さの指定をautoにすることで、画像自体の比率が変わって崩れるのも防ぐことができるので、合わせて設定しておくとベストです。

画像だってCSSだけで切り替えられる

この画像、PC版だと綺麗に見えるけど、スマホ版だと見づらいな…

こんなことがレスポンシブ対応ではよくあります。

こういう時、画像の中身をCSSで変更するのは不可能なので、スマホ用の画像を用意して切り替える必要があります。

【HTML】

【CSS】

こんな感じで、パソコン用の画像、スマホ用の画像を並べて用意しておいて、CSSのdisplayプロパティで切り替えちゃえばOK!

詳しい方ならJavascriptで切り替えて……なんて考えるかもしれませんが、こっちの方がお手軽でおすすめです。

複雑なテーブルレイアウトは横スクロールで解決

例えばこんなテーブルレイアウト、このまま縮めるとものすごく見づらいですよね。

こんな時はもういっそはみ出させて、横にスクロールできるようにしちゃいましょう。

【HTML】

【CSS】

こうすることで、複雑なテーブルレイアウトも崩れず見やすい状態にすることができます。スマホ版では「横スクロールでご覧ください」と一言入れておくと親切ですね。

こんな感じで、CSSをうまく使えばスマホでも見やすく素敵なレイアウトを実現することができます。

ここにあるパターンとは違う見た目にしたい
もっといろんな見せ方を知りたい!

そんな方は侍エンジニア塾で、CSSについてもっと深く学習してみませんか?

基本的なレイアウト案もそうですが、オリジナリティのあるレイアウトをどんどん作ることで、あなたの技術をより一層磨くことができます。そのお手伝いをマンツーマンレッスンという形で提供しているのが、侍エンジニア塾です。

気になった方は、ぜひ下記のボタンからサービスの紹介をご覧ください。

侍エンジニア塾
サービス紹介はこちら

ここからはレスポンシブ対応によくあるミスなど、プラスアルファの解説をしていきます。どうしてもうまくレスポンシブ化できないという方は要チェックです。

うまくいかない時のチェックポイント

言われた通りやったけどうまくいかない!
どうしても崩れる……原因がわからない……

こんなレスポンシブあるあるのお悩み、私も経験あります……。

うまくいかない時はとにかく原因を見つけ出すのが大事。下記のチェックリストを使って原因特定を目指しましょう。

  • viewportがきちんと入っているか
  • viewportの記述を間違えていないか
  • パソコン用のCSSが残っていないか
  • HTMLに直接幅や高さを指定していかないか
  • importantが付いているCSSを上書きしようとしていないか
  • ブラウザや機種によって崩れたり崩れなかったりしないか

 viewportの入れ忘れや記述ミスはない?

なんか全体的に崩れてる! という時にありがちな凡ミスがviewportのミス。

  • そもそもちゃんと入っているか
  • 記述にミスがないか


を確認してみましょう。

【HTML】

これが正しいレスポンシブ用viewportです。間違っていたりしたらサクッと修正しちゃいましょう。

PCだけに使うCSS残ってない?

メディアクエリで囲われていない部分は、パソコンでもスマホでも両方適用されるCSSとなります。つまり共通CSSということですね。

この共通CSSに、PCだけで使いたい記述が残っていたりしませんか?

これが原因の場合は、

  • 該当するCSSをパソコン用のメディアクエリに入れる
  • スマホ用のCSSで打ち消す


という2つの解決方法があります。

基本的にはパソコン用はパソコン用で別にしておくのがベストなので、下記のようにCSSを組んでおくようにするのがおすすめです。

【CSS】

変なところに幅や高さを指定してない?

これが超厄介! HTMLで画像などに直接幅や高さを指定していたり、親要素に幅や高さが指定してあるパターンです。

【HTML】

HTMLで直接指定している場合は、もう全部消しましょう。消しても画像はちゃんと表示されます、大丈夫です。

親要素の幅や高さも消しちゃいましょう。それでパソコン版に影響が出るならば、パソコン版用のメディアクエリに入れればOKです。

important使ってない?

共通のCSSに書かれているから打ち消そうと思ったらうまくいかない……という場合はimportantが使われている可能性があります。

importantをつけたCSSは、どんな状況でもとにかく最優先で適用されます。それはメディアクエリも同じです。

どうしても必要ではない場合は、パソコン版用メディアクエリに移動したりしてスマホ版に影響が出ないようにしましょう。

ブラウザや機種による違いかも……

もう何をやってもうまくいかない!! という場合は、何かをミスっているというよりはブラウザや機種による違いの可能性があります。

ブラウザも機種もいろんな会社が独自で作っているもの。全てが同じように表示されるとは限らないのです。

こればかりはどうしようもないので、とにかくいろんなブラウザや機種でチェックをして、ひとつひとつ崩れを直していくほかありません……。

特にIEは崩れやすい上に使っている人も多い厄介なブラウザなので、チェックをお忘れなく!

その他のレスポンシブ対応方法

今回ご紹介したのはメディアクエリを使った方法でしたが、他にもレスポンシブにする方法がいくつかあります。

CSSファイルの読み込み方を変える

CSSの記述ではなく、読み込む際に対応幅をしていする方法です。

CSSの記述が長くなるのが嫌だ!という人にはこちらの方が扱いやすいと思います。

ただファイルの数が増えるので、管理するのがちょっとだけ手間です。お好みで使い分けてみてください。

フレームワークを使う

一からレスポンシブ化はなかなか骨の折れる作業ですよね。自分でやるのは大変という方は、フレームワークを使うのも手です。

フレームワークとは、よく使うCSSなどをまとめたファイルのことです。すでに設定されているclassをつけることで、自分でCSSを書かなくてもおしゃれで便利な見栄えを作ることができます。

bootstrapって聞いたことありませんか? これはCSSの代表的なフレームワークです。bootstrapはレスポンシブ対応なので、使うだけで簡単にレスポンシブなサイトを作ることができます。

詳しく知りたい方は、下記の記事など参考にしてみてくださいね。

CSSでレスポンシブにする時のQ&A

最後にレスポンシブに関するよくある質問をまとめてみました。困った時の参考にどうぞ!

Q:Wordpressの場合の設定方法は?

基本的に設定方法は変わりません。

ただWordPressは記事の部分など、投稿内容によって高さや幅が変わることがあるので、その点に気をつけながらCSSを組むようにしてくださいね。

 Q:JavaScriptはどうすればいい?

スマホ版では使いたくないJavaScriptのコードがあったりする場合は、スマホかどうかを判断して分岐させるという作業が必要です。

方法は2つです。

  • 幅で判定する
  • ブラウザが持っている機種などの情報で判定する


幅のでの判定は、読み込んだ時と幅が変わった時に現在の幅を取得し、それがスマホサイズ以下だったらこの記述、そうじゃなければこの記述と分岐する感じですね。

下記の記事などが参考になると思います。ぜひチェックしてみてください。

【jQuery入門】resize()によるウィンドウリサイズの方法まとめ!
更新日 : 2019年5月30日

ブラウザが持っている情報での判定は、ユーザーエージェントという情報を取得して分岐をします。

この分岐方法は下記の記事で詳細に解説しています。

 Q:タブレットの対応はやった方がいい?

当然ながらした方がいいんですが、そうなるとメディアクエリの数が増えてちょっと大変ですよね……。タブレットの普及率を考えると、必ずやりましょう!というほどではないと思います。

パソコンとスマホがしっかり対応できていることの方が重要なので、タブレットの対応は余裕があったらくらいで考えておきましょう。

Q:どうしてもやり方がわからない!うまくいかない!

一人でやっていると、壁に当たった時にどう乗り越えればいいかわからないですよね……。そんなとき誰かに相談できる環境があればスムーズにできると思いませんか?

侍エンジニア塾は、マンツーマンレッスンであなたの悩みを即解決し、レスポンシブ化でもなんでもスイスイできるようサポートさせていただきます。

 

もっといいWebサイトが作れるようになりたい……

レスポンシブをマスターしたい!

という方は、ぜひ気軽に無料体験レッスンにお申し込みください。プロのコンサルタントが、あなたにぴったりの学習方法や心強い講師をご紹介します。

高い壁でも、誰かが支えてくれれば登ることができます。ぜひ侍エンジニア塾に、あなたの成長の手助けをさせてください。

スマホ対応はとにかく奥が深い

今回ご紹介したのはスマホ対応方法のほんの一部です。完璧なスマホ対応を目指すならば、とにかくトライ&エラーを繰り返していくしかありません。

この記事が、レスポンシブ対応にチャレンジしてみよう!と思うきっかけになれば幸いです。

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説