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

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

レスポンシブWebデザイン（RWD）とは

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

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

作成方法

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

まず１

↑これでOK!

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

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

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

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

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

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

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

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

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

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

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

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

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

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