レスポンシブwebデザイン

レスポンシブが曖昧な人は必見!RWDの設定方法

みなさま、ごきげんよう。
2014-07-18 勉強会でレスポンシブWebデザイン(RWD)の実装方法について、確認しました。

自分のサイトや作品をレスポンシブにしたい!

レスポンシブWebデザインの理解が曖昧な人や、初めてRWDに挑戦する人は、以下の手順でやってみましょう。

レスポンシブWebデザイン(RWD)とは

ワンソース・マルチユースなWebデザインで、マルチデバイスに対応した手法でございます。

詳しくはこちらのサイト等をご参照ください。
レスポンシブWebデザインがマルチデバイスSEOに強い3つの理由
レスポンシブWEBデザインとは?レスポンシブWEBデザインよくわからないWEBディレクターのための入門講義

作成方法

  1. meta要素に name=”viewport” を追加します。文書の表示領域を設定することができます。
  2. cssにメディアクエリーを指定します。

まず1

↑これでOK!

↑書きたい人はこちらでも大丈夫です。

content属性に指定できる値のプロパティについてはこちらのサイトを参照ください。
表示領域を設定する

そして2
cssにメディアクエリの指定をしますが、やり方が大きく分けると3つあります。

  1. メディアクエリ用のcssをhtmlに<link>属性で指定する
  2. cssにメディアクエリの指定を記述する
  3. @importでメディアクエリ用のcssを指定する

この勉強会では2のcssに記述していく方法を推奨しています。
cssに以下のように記述し、画面サイズ別の指定をします。

@mediaにはたくさんのメディアタイプがあります

  • @media screen (見た目でわかるように表示が行われるメディアの)
  • @media print (プリント用の)
  • @media tv
  • この他にもたくさんあります

メディアクエリの指定やメディアタイプについてはこちらのサイトを参照してください。
@media
レスポンシブWebデザインのCSS判別記述方法
画面サイズ別にCSSを切り替える ‘Media Queries’ についての基礎知識
デバイスに合わせてCSSを振り分ける「Media Queries」

最後にレスポンシブWebデザインの考え方について

  • 今やスマホが手放せない人がほとんどのご時世ですから、やはりデザインはモバイルファーストでグローバルナビは下に持ってくるといった考え方になるようですが、モバイル・タブレット・PCのデザインを同時に進めてもOKです。
  • もともとレイアウトには大きく分けると
    ソリッド(個体)レイアウト=固定幅デザインと
    リキッドレイアウト=%で幅を指定して固定幅は決めない
    がありました。
    そしてレスポンシブレイアウトが出来て、表示領域ごとにソリッドレイアウトにしたりリキッドレイアウトにしたりと切り替える事が出来るようになりました。
  • メディアクエリは階段状の幅の変化が指定できますが、デバイスの種類がたくさんありすぎるのでブレイクポイントは1つか2つであとはリキッドレイアウトで幅を変えるというやり方がいいようです。もちろん表示領域ごとにソリッドレイアウトで作りブレイクポイントで切り替えるというやり方もOKです。
    この勉強会では前者を推奨しますのでブレイクポイントは気にしない!
  • メディアクエリの条件に当てはまるからといってcssの優先順位は上がりません。
    優先順序を上げるためには、もとの指定と同じ優先順序のセレクタで、より下に書くか、セレクタの優先順位を上げる必要があります。。
    スタイルの優先順位
  • 他にもレスポンシブWebデザインのポイントとしては
    多くの場合問題になるのが横並びの問題です。
    画像と文字の並びとか、、、
    文字は最低10文字はないと読みづらいので、10em〜40emくらいがいいようです。
    pcは基本的に横に並べる方式なので、そこから脱却するのは難しいようです。
  • ルックアンドフィールをかえない事も重要です。

等を勉強会で確認しました。

この他にも先生がおっしゃった事を私が聞き逃しているかもしれませんが、ご容赦ください。

分からない事や質問などは随時コメントしてください。

それではみなさま、ごきげんよう

カテゴリー: 勉強会 | タグ: , | 投稿日: | 投稿者:
ジェイ子

ジェイ子 について

WAVE立川校に2010年の3月〜8月に通っていました。取得コース名は『WEBプロフェッショナル&グラフィックコース、WEBディレクション講座』WAVE在籍は2012年11月まででした。2010年9月以降はWEBから遠ざかっていたのですが、真中さんやかおりんごさんや高橋先生のおかげで倶楽部りんごに参加できたので、また1から勉強し直しています。そしてWEBデザイナーを目指して頑張ろうと思っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.