レスポンシブWebデザインにする為に行った事のまとめ
ブログのデザインを変えました！（IEでの確認未）以前からモバイル対応もしたいと思っていたので、これを機にレスポンシブWebデザインを取り入れてみました。
今のところ800pxと480pxでデザインが変わる様にしています。忘れないうちにMedia Queriesの書き方、スマートフォンへの対応方法など、このブログでレスポンシブにする為に行った事をまとめてみました。
参考記事
edia Queriesの使い方やスマートフォンへの対応方法など下記の記事を参考にさせて頂きました。
[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル | コリス
Media Queriesの書き方
Media Queriesの書き方は3種類あります。このブログでは2.のスタイルシート内で画面サイズ事のスタイルを適用するようにしました。
1. スタイルシートをサイズごとに用意する
スタイルシートをサイズごとに用意し、HTMLのヘッドを読み込む時に画面サイズによって適用するスタイルシート読み込みます。
下記の様にhead内に各サイズのスタイルシートの記入します。
<link href="style.css" rel="stylesheet" > //↑↑通常のスタイルシート <link rel="stylesheet" media="screen and (max-width: 1024px)" href="tablet.css" /> //↑↑タブレットサイズへのスタイルシート <link rel="stylesheet" media="screen and (max-width: 768px)" href="mobile.css" /> //↑↑スマートフォンサイズへのスタイルシート
“media=screen and ( )”の所で”当てはまる横幅”を指定してスタイルシートへ振り分け各スタイルが適用されていきます。”当てはまる横幅”の指定方法は以下の様になっています。
( max-width: サイズ )
→ 指定の横幅以下のサイズに適用
例）media=”screen and (max-width: 320px)”
iPhoneの縦向きサイズへの適用など。
( min-width: サイズ )
→ 指定の横幅以上のサイズに適用
例）media=”screen and (min-width: 1024px)”
ディスプレイサイズへの適用など。
( min-width: サイズa ) and ( max-width: サイズb )
→サイズa〜サイズbまでのサイズに適用
例）media=”only screen and (min-width: 768px) and (max-width: 1024px)”
768px〜1024pxまでのサイズへ適用する。
2. Media Queries用のスタイルシートを作る方法
Media Queries用のCSSファイルを作り、そこへ画面サイズ事のスタイルをまとめて記入します。（通常のスタイルシートに追加して記入してもよいと思いますが、私はファイルがすごく長くなってしまったのでMedia Queries用のCSSファイルを作りました。）
headでは下記の様に二つのファイルを読み込みます。
<link href="style.css" rel="stylesheet" type="text/css"> // ↑↑通常のスタイルシート <link href="mediaqueries.css" rel="stylesheet" type="text/css"> // ↑↑Media Queries用のスタイルシート
メディアクエリ用のCSSファイルに下記のように画面サイズによってスタイルを適用していきます。サイズの指定の仕方は上記のスタイルシートで分ける時と同じです。
/*===============================================
画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
#content{
width:100%;
}
:
画面の横幅が768pxまでの場合のスタイル記入
:
}
/*===============================================
画面の横幅が320pxまで
===============================================*/
@media screen and (max-width:320px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
#content{
width:100%;
}
:
画面の横幅が320pxまでの場合のスタイル記入
:
}
3. @importantで該当するサイズのCSSファイルを読み込む方法
スタイルシートをサイズごとに用意して、スタイルシートを読み込む時に@importantで該当するサイズのCSSファイルを追加で読み込みます。
スタイルシートへ下記の様に記入して、各ファイルでそれぞれのスタイルを指定します。
@import url("tablet.css") screen and (max-width: 768px);
@import url("mobile.css") screen and (max-width: 320px);
Viewportの書き方
モバイル端末から見た時に指定したサイズで表示させる為にViewportの指定をする必要があります。Viewportの指定はhead内に下記の様に記入します。
<meta name="viewport" content=" プロパティ= 値 , プロパティ = 値 ">
プロパティと値
プロパティと値には以下のものが入ります。
width
横幅の指定。そのデバイスのサイズに合わせる場合は、device-width を入れる。
height
縦の指定。そのデバイスのサイズに合わせる場合は、device-height を入れる。
initial-scale
ズーム倍率の初期値。普通は画面にフィットして表示したい場合がほとんどなので1.0（1.0倍数＝ズームなし）を指定。
minimum-scale と maximum-scale
ユーザーがズームできる範囲を指定。それぞれ0 〜 10 で指定できる。
• minimum-scale が最小倍率。初期値は 0.25。
• maximum-scale が最大倍率。初期値は 1.6。
0.5倍～2倍の範囲で拡大できるようにするには下記のように記入。
content=”minimum-scale=0.5, maximum-scale=2″
user-scalable
ズームできるようにするかどうか。 yes か no で指定。
ズームはできた方がユーザビリティ的にはいいと思いますが、このブログでは見ているデバイスのサイズで画面にフィットさせたいのでズームできないようにしています。
ズームしないようにするには下記のように記入します。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
画像の伸縮指定
そのままだと画像は元のままのサイズで表示されてしまい、画面からはみ出てしまいます。
以下のように img に max-width:100% を指定して画像を伸縮するようにして対応します。
img{
max-width: 100%;
height: auto;
}
しかし、IE8には、 max-width を指定すると、縦のサイズが変化しなくなるというバクがあります。その為IE8にも対応するには width:auto を指定する必要があります。
IEハックを使ったIE8対応方法
img{
max-width: 100%;
height: auto;
width /***/:auto; /*IE8のみ適用*/
}
IE8のみにCSSを上書きする方法
HTMLファイルでIEのバージョン分岐でクラス付与し、IE8のクラスで上書き対応します。
HTMLファイル冒頭で以下のようにクラスを付与します。
<!DOCTYPE html> <!--[if IE 8]><html class="ie8" lang="ja"><![endif]--> <!--[if IE 9]><html class="ie9" lang="ja"><![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="ja"><![endif]-->
CSSファイルで以下のように上書きします。
img {
max-width: 100%;
height: auto;
}
.ie8 img {
width: auto;
}
iPhoneのsubmitボタンのスタイルを初期化する
iPhoneのsubmitボタンはデフォルトで角丸のスタイルが設定されており、普通にCSSを上書きしても反映されません。そのため以下のように appearance というプロパティを無効にします。
submit{
-webkit-appearance: none;
}
感想など
モバイル対応してみたのはいいのですが、記事コード部分はWPプラグインSyntaxHighlighterで表示していますが、なぜかiPhoneからみた場合文字サイズが大きいままで表示されて見にくくなってしまっています。（ボックスよりも長いコードで横スクロールが必要な場合のみ）CSSの指定してもなかなか上手く行きません…。
↑解決しました！モバイルサイトの文字サイズ指定の際に気をつけるプロパティ -webkit-text-size-adjust | memocarilog(2012/7/7 追記)
レスポンシブWebデザインに挑戦して思ったのは、確認作業が大変なのと、どこをブレークポイントとするのかに悩むなぁと思いました。やってるうちにもっと細かく分けたくなってきてしまいました…。メニュー表示も、もっと押しやすく見やすくしたい、けど邪魔にならないようにしたいなど、もう一工夫必要だなと思います。
こんにちは！デザイン、すごく素敵になりましたね♡前のも好きでしたが、今回のはまた目に優しくて可愛いです！
しかもレスポンシブ！また勉強させて頂きますヽ(ﾟ∀ﾟ)ﾉ
わぁ！コメントありがとうございます！！！見やすいデザインを目指しました！
youさんみたいに分かりやすい記事を書けるように勉強勉強ですー(｀・ω・´)
山田 さま
ご参考頂きありがとうございます。
レスポンシブは確認作業も大変ですよね。がんばって下さい。