「レスポンシブWebデザインとは何？」や「CSSをどう使えばレスポンシブ対応になるの？」など、基礎知識を初心者向けに解説していきます。 今さら聞けないレスポンシブWebデザインについて、概要やメリット・デメリット、また作り方などをまとめています。

スマートフォン対応（スマホ最適化）したテーマを選んでも投稿する記事内のhtmlタグの書き方によっては表示が想定外って事もありますよね、画像を複数横並びしたい時にtableタグとか使うと画面に収まらなかったり文字が重なったりと難儀な話です。 レスポンシブデザインはcssで各デバイス用に表示します。 レスポンシブデザインのページを実装する際に、一役買ってくれるのがフレキシブルレイアウトです。 フレキシブルレイアウトを利用すれば、ブロック要素をグリッド状に横並びに配置させたり、cssで順番の並び替えを行ったりすることができます。 レスポンシブデザイン制作時に注意したいこと スマホページの文字は大きめ、画像は可変に. 久しぶりにCSSのネタでも更新します。今回は画像をスマートフォンに対応させるテクニックをまとめました。 デモ まずはデモをご覧ください。 画像を画面幅に応じて縮小したり、画像を切り替えたりしてスマートフォンに対応させています。 Demo zipファイルをDownload HTML 解像度が高くなったとはいえ、スマホの ディスプレイ はパソコンの画面よりは当然小さくなるので、パソコンと同じ文字サイズでは、文字が小さすぎて読めなくなってしまうこともあります。 レスポンシブデザインの導入のために、ビューポートとメディアクエリを設定した後は、スマホ用のcssを調整しながら各デバイスに対応していくわけですが、今回はその際によく使う、cssのポイントをご紹介したいと思います。.