css基礎 レスポンシブデザインについて
はじめまして、こんにちは。新メンバーのLanともうします。まだまだ、デザイン・技術ともに未熟なのですが勉強・復習もかね書かせていただきますのでよろしくおねがいいたします！
早速ですが、今回のtips題名の通り・・・
今更感漂います【レスポンシブデザイン】についてです。
私も、結構前からその存在は知ってはいたのですが、なんとなーくしか理解していませんでしたので、復習という意味も込めて執筆させていただきたいと思います！！
レスポンシブデザインとは、１つのファイルでどんなデバイスにも対応できる手段のことをいいます。
初めは、リキッドデザインと似ていると思いますが、違いはこちらになります。
| レスポンシブデザイン | リキッドデザイン |
| ブラウザの横幅サイズに応じて可変、レイアウトはそのまま | ブラウザの横幅サイズに応じて可変、レイアウトも可変 |
なお、レスポンシブデザインについて分かりましたので早速構築方法に移りたいと思います。構築方法は、主に３種類です。
①CSS3のMedia queryを使う 以前のmedia queryについての記事はこちら
②view portを設定する
③リキッドレイアウトで構築する
このtipsでは簡単に短く、ホームページをレスポンシブデザインにする方法を紹介したいと思います。
レスポンシブwebデザインの記述方法PC用、スマートフォン用、タブレットの画面サイズによってCSSを切り替えることで、HTML一つで複数のデザインを表現できるという事で、まずはソースを記載します。
HTMLのmetaに以下を記載。
HTML
<meta name=”viewport” content=”width=device-width,user-scalable=no,maximum-scale=1″ /><link href=”style.css” rel=”stylesheet” media=”all” type=”text/css” /> <!– ※デフォルトのスタイル（style.css） –>
<link href=”tablet.css” rel=”stylesheet” media=”all” type=”text/css” /> <!– ※タブレット用のスタイル（tablet.css） –>
<link href=”smart.css” rel=”stylesheet” media=”all” type=”text/css” /> <!– ※スマートフォン用のスタイル（smart.css） –>
端末の画面サイズの横幅に合わせてCSSを切り替える必要があるので、viewportを挿入します。 次に３つ（任意）のCSSを用意します（数値は任意です。色々試してみて下さい）
PC：横幅769px以上
タブレット（android）：横幅768px
スマートフォン（android）：横幅640px
PCとタブレットの横幅は1024以上でも769以上でも大丈夫です。
CSS
/* style.css 画面の横幅が769px以上 */
@media screen and (min-width: 769px){ img{ max-width: 100%;
height: auto; width /***/:auto; } #container{ width:100%; } ～以下、画面の横幅が768pxまでの場合のスタイル記入～ }/* tablet.css 画面の横幅が768pxまで */
@media screen and (max-width: 768px){ img{ max-width: 100%;
height: auto; width /***/:auto; } #container{ width:100%; } ～以下、画面の横幅が768pxまでの場合のスタイル記入～ }
/* smart.css 画面の横幅が640pxまで */
@media screen and (max-width:640px){ img{ max-width: 100%;
height: auto; width /***/:auto; } #container{ width:100%; }
また、@importで各CSSを読み込む方法もあります。
CSS
@import url(style.css) screen and (min-width: 769px);
@import url(tablet.css) screen and (max-width: 768px);
@import url(smart.css) screen and (max-width: 640px);
画像の伸縮設定そのままだと画像は元のままのサイズで表示されてしまい画面からはみ出てしまいます。
上記にも記載しておりますが、スマートフォン用・タブレット用のCSSに下記のように画像を伸縮するように指定をします。
CSS
img{ max-width: 100%; height: auto; width /***/:auto; }以上となります。