レスポンシブデザイン簡単導入法02 – よく使う項目まとめ編 | SEO Packブログ by ディーボ

レスポンシブデザイン簡単導入法02 – よく使う項目まとめ編 | SEO Packブログ by ディーボ

ビューポートとメディアクエリを設定した後は、スマホ用のcssを調整しながら各デバイスに対応していくわ...概要を表示 ビューポートとメディアクエリを設定した後は、スマホ用のcssを調整しながら各デバイスに対応していくわけですが、その際によく使う、cssのポイントをご紹介します。 画像を可変にする レスポンシブデザインは、ビューポートの設置によって表示されるサイトの表示領域がデバイスのサイズへと変わります。その横幅に対して画像を可変にします。 下記の設定で、最大でも実寸サイズとなり、画面サイズからはみ出すことを防ぐことができます。それ以下のサイズの場合は画面幅に合わせて縮小されます。 img {max-width:100%;} スマホを横にしても文字サイズを変えない デフォルトでは、スマホを横にすると横幅に応じて、文字サイズが大きくなります。これはこれで見やすいですが、文字数が多い時など、デザイン上フォントサイズを変えたくない場合は、スマホ用cssに下記タグを追記します。 body {-webkit-te

• レスポンシブ
• WEBデザイン
• CSS
• Web制作
• スマホ
• SEO
• レスポンシブデザイン
• スマートフォン
• HTML