ENTRY TITLE

CSSメディアクエリーをつかったレスポンシブWebデザイン対応の基本

  • LINEで送る
  • このエントリーをはてなブックマークに追加

自分がウェブの勉強を始めたときからすでにWeb制作をする上で必要不可欠になっていたスマートデバイス対応
。さっこんインターネット利用者の大半は携帯端末からアクセスしてるっていわれてますよね。そんなスマートデバイスにWebページを対応させてユーザビリティをあげようというのがこのレスポンシブWebデザインだと思います。たぶん。
今回は、CSSのメディアクエリーを使ってスマホや、タブレットに対応させる方法をまとめてみたいと思います。

スポンサードリンク

3パターンのCSSファイルを作成する

まずは従来通りに作成したデザイン用のCSSファイルを用意します。
ここで先に簡単に言ってしまうと幅をせまくしても可読性のいいデザインに変えてやるだけです。

そんな考えに基づいてスタイルを組んでいきます。
組んでいくといっても最初に作ったCSSファイルとは別に作ります。例えば、smartphone.cssとかで。
え、何個もスタイルを書くなんてめんどくさい??
頑張って書いてください。

作成済みのスタイルをコピーして書き換えていくのが楽かもですね。
基本的にwidthの指定とかはパーセントでしておくのがいいみたい。
マウスオーバーでの効果とかはタッチデバイスでは表現が難しいので変更などする必要があります。
あとは、スマホ用のデザインの構造上必要のないコンテンツだったり、要素はdisplay:none;なんかで消してあげればいいです。
ナビゲーションなんかは横や上からぴゅっと出てくるタイプがよく使われてますよね。

エディターにDreamweaverなんか利用の方はソフト搭載の機能で簡単に編集できたりするみたいですね。
お持ちの方はやってみてください。
詳しくは検索、検索。

レスポンシブWebデザインに必須なメディアクエリー

はい、レスポンシブ用のスタイルができましたら今度はこのCSSファイルをスマホやタブレットを使ってページにアクセスしたときにそれぞれ適用できるように設定をしていきます。
ここでやっとこさ登場するメディアクエリーです。
このCSSの機能を使って反映させたいスタイルを画面サイズに合わせて選択できるように設定するわけです。

[code lang=”js”]
<!– スマートフォン –>
<link href="css/smaho.css" rel="stylesheet" type="text/css" media="only screen and (max-width:767px)">
<!– タブレット–>
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and (max-width:939px)">
<!– デスクトップ –>
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:940px)">
[/code]

こんな感じでmediaの指定をそれぞれデバイスの画面幅に合わせて設定してあげます。
実際今回書いておりますwidthの幅は個人的考えでの指定ですので臨機応変な対応が必要です。

参考ツール
Demonstrating Responsive Design
http://jamus.co.uk/demos/rwd-demonstrations/
こんな便利なサイトもあります。ご活用ください。

viewportも忘れずに

併せて設定しないといけない部分が、これ
[code lang=”js”]
<meta name="viewport" content="width=device-width">
[/code]
headタグ内に書きます。
これを指定しておかないとデバイスサイズに関係なくデスクトップサイズで読み込んでしまうようです。

いらっしゃいませ「デスクトップのお客様ですか?」「タブレットのお客様ですか?」「スマホのお客様ですか?」って尋ねて、あなたはこのサイズって誘導してくれるのがこのviewportの指定みたいですね。
ユーザーエージェントとはまた違うみたいですけどね。その辺は詳しくわかりません。すません。

最後に

実際このブログをご覧いただいてる方の約半分の方がスマホからのアクセスです。
最近ではECサイトを運営してらっしゃる方の声でもスマホからの流入が半分以上あるようです。それほどスマートデバイスに対応することは必要な部分になっているといえると思います。
自分もユーザー側からの意見としてはスマホ対応していないページは見にくくてしかたありません。
中にはスマホ対応していても見にくいページもありますがね。
制作者スキルとしてもレスポンシブ対応は重要視されているポイントみたいですね。自分もさらに勉強がんばります!
スマホ対応、甘く見てはいけません!!

では!

  • LINEで送る
  • このエントリーをはてなブックマークに追加

RELATED POST関連する記事を表示しています

POPULAR POST人気の記事を表示しています