web制作勉強中です。

職業訓練校でweb制作を勉強しています。勉強のメモなど記録します。

【授業メモ】レスポンシブデザイン基礎

授業メモ レスポンシブデザイン
レスポンシブデザイン基礎
■レスポンシブデザインとは
PC、スマートフォン、タブレット等様々なデバイスに最適化したウェブサイトを、共通のHTMLでデザインする手法。
HTMLをデバイスごとに作り変えるのではなく、HTMLはひとつで、CSSでレイアウトを調整する。
レスポンシブデザインのことを、RWDと略して呼ぶことがある。
 
スマホを持っている人はほとんどだが、PCを持っていない人は結構いる。
そういう人にとっては、スマホから見た形がすべてになる。
ECサイトは特にスマホ対応が遅れていたが（スマホで物を買うことに抵抗がある人が多かったため）、ここ数年は不動産やECサイトもどんどんスマホ対応が当たり前になってきている。
Googleも、スマホ対応していないサイトは評価しないなど、世の中的にもスマホ対応は当たり前かつ重要なこととなっている。
 
■Googleが推奨するモバイルフレンドリー
  • レスポンシブデザイン（index.html 　style.css一つでマルチデバイス対応する方法、9割こっち）
  • Dynamic Serving（デバイスごとに index.html 　style.cssを作り、.htaccessを使って振り分ける方法）
 
■Googleのモバイルフレンドリーテスト
 
覚えておく！
サイトを作る際、まず普通のPCサイトで作ってテストしてキャプチャ（点数は絶対悪いけど）を忘れずにとる！！！
レスポンシブ対応して、完璧にしてからテストしてキャプチャとる。
問題をもうやって解決しましたっていう比較の見せ方ができるので、そのまま事例としてポートフォリオに載せられる。
元がどうだったか見せられないと説得力がないし、完璧なものだけ見せても事例として出しにくいから。
 
 
■レスポンシブデザインの方法
  1. 見ている人の画面の幅に合わせて表示を切り替える方法（メディアクエリー）
  2. 見ている人のデバイスに合わせて表示を切り替える方法（ユーザーエージェント）
 
 
■見ている人の画面の幅に合わせて表示を切り替える方法
 
●メディアクエリー
メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です。レスポンシブWebデザインではメディアクエリーを使ってスクリーンサイズに応じたCSSに切り替えます。
 
●ブレイクポイント
ブレイクポイントとはデバイスサイズによってCSSを個別に適用させるために指定した画面サイズの値のことです。メディアクエリで指定します。ブレークポイントのデバイスサイズの値は特に決まっている訳ではなく、また、何分割にするのかも自由です。
 
メディアクエリーを使ったCSSの切り替えでは、CSSを切り替える条件である「ブレイクポイント（Break Point）」を決め、それぞれの条件に沿ったスタイルシートを記述していきます。
 
ブレイクポイントは決まった数や値がある訳ではありません。
例えばBootstrap3ではブレイクポインが４つあり、
1200px以上がPC(大画面)用
1199px～992pxがPC用
991px～768pxがタブレット用
767px以下がスマホ用
に分かれていましたが、
 
バージョンアップしたBootstrap4ではブレイクポイントが５つあり、
1200px以上がPC(大画面)用
1199px～992pxがPC用
991px～768pxがタブレット用
767px～544pxがスマホ用
543px以下がスマホ（小さいサイズ）用
に分かれました。これによって例えばiPhone 5, 6のポートレート／ランドスケープ時に、表示を切り替えることができるようになり、より柔軟にモバイル最適化が行えるようになりました。
 
ブレイクポイントは
PCサイズ　960px以上（PCのディスプレイのサイズの一番小さいサイズが960）
タブレットサイズ　768px～959px（768は、メジャーなタブレットの中で一番小さいiPad miniのサイズ）
スマートフォンサイズ　767px以下
ブレイクポイントは絶対的に決まった数値ではなく、その時々の要件や主要のデバイスサイズによって変わっていくので、数字を暗記するのではなく、意味を理解する必要があります。
 
 
 
■CSSメディアクエリーの書き方
@media (max-width:959px){
}
⇒959px以下＝タブレットとスマホ
 
書き方覚える　半角スペースの位置覚える　
｛｝は必ず先に書く！→太字表示になってくれるのでミスが減る
@media screen and (max-width:959px){
body { background: blue;
}
}
 
※max-width：〇px →〇px以下ということ！
 
 
■view portのwidth
HTML内に <meta name="viewport" content="width=device-width">を記述する
content内には固定値を入れることもできるが、固定値だと指定サイズ以外のデバイスで表示できないため、デバイスの幅に合わせる device-width　を入れる
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>レスポンシブデザイン基礎</title>
<link rel="stylesheet" href="style.css">
</head>
 
 
 
 
 
レスポンシブデザインのポイント
■確認するときは、  Googlechromeの検証で確認する
ブラウザで確認しても意味がない。
かならず検証モードのレスポンシブで確認。
 
■指示をしないと上で書いた内容が引き継がれてしまう
文字色もmarginやpaddingもすべて！
>|css|
/*タブレットレイアウト*/
@media screen and (max-width:959px){
body {
background: blue;
}
h1 {
  font-size: 28px;
  color: white;
}
p {
  font-size: 18px;
  color: brack;
}
}
 
/*スマホレイアウト*/
@media screen and (max-width:767px){
  body {
  background: green;
  }
  h1 {
  font-size: 24px;
  color: white;
}
p {
  color: blue; 　　※フォントサイズ18のまま
}
}
||<
 
 
■ 逆に言えば、変えたい部分だけ指示していく
  1. ファーストレイアウト（はじめに記述する基本となるデバイス。今回はPC。）の指定をまるっとコピぺ
  2. そのままで良い部分は削除し、変えたい部分だけ残し、変えたい部分だけに指示を与える
 
/*PCレイアウト*/
/*PCから記述する「PCファースト」*/
body {
  background: red;
}
h1 {
  font-size: 40px;
  color: white;
}
p {
  font-size: 22px;
  color: brack;
}
 
 
/*タブレットレイアウト*/
@media screen and (max-width:959px){
body {
  background: blue;
}
h1 {
  font-size: 28px; 　※文字色は白のまま
}
p {
  font-size: 18px; 　※文字色は黒のまま
}
}
 
 
 
 
■メディアクエリでも、要素の点数の法則はある。
 丸っとコピー→変えたいところだけ変える、がミスをしない黄金ルール
/*PCレイアウト*/
/*PCから記述する「PCファースト」*/
body {
  background: red;
}
header h1 {
  font-size: 40px;
  color: white;
}
p {
  font-size: 22px;
  color: brack;
}
 
 
/*タブレットレイアウト*/
@media screen and (max-width:959px){
body {
  background: red;
}
h1 {
  font-size: 40px; 　　
  color: blue;
}
}
 
上でheader h1と指定しており、そちらの方が点数が高いため、下でも同じようにheader　h1と指定してあげないと、上の指定のまま変更の指示は上書きされることがない。
そのため、指定したい場所の力関係の指定ミスが起きないように、
必ず上の基準を丸っとコピペ→そのままでいい部分消す→変更したいところだけ記述　　が大切！
 
 
 
 
 
■どうやったらほしいスタイルが適用されるかと同時に、どうやったらそのスタイルをキャンセルできるかを覚える
数値で指定しているものをなくしたい→０にする
それ以外→noneにする
/*PCレイアウト*/
/*PCから記述する「PCファースト」*/
body {
  background: red;
}
header h1 {
  font-size: 40px;
  color: white;
  margin-bottom: 300px;
  padding-bottom: 50px;
  border: 3px solid black;
}
p {
  font-size: 22px;
  color: brack;
}
 
 
/*タブレットレイアウト*/
@media screen and (max-width:959px){
body {
  background: red;
}
header h1 {
  font-size: 40px;
  color: blue;
  margin-bottom: 0; 　
  border: none;　
}
}
 
margin-bottomをなくしたいから0指定　
marginはなくなるが、何も記述していないpadding-bottom: 50px;はそのまま引き継がれる
borderは消したいので,数値指定以外のnoneで消す
 
 
■floatの場合はどこまでが横並びにしていたいのか注意する　
overflow: hidden;の解除は、 overflow: visible;
  • PCでは3つ横並び
  • タブレットでは2つ横並びで1つカラム落ち→まだfloatしているのでwrapperの幅だけ変えればよい
  • スマホでは3つ縦並び→ 幅も変える必要があるが、もうfloatしていないので、 overflow: hidden;もfloat:left;もいらない
/*PCレイアウト*/
/*PCから記述する「PCファースト」*/
body {
  background: gray;
}
.box {
  width: 300px;
  height: 300px;
  background: blue;
  float: left;
  margin: 10px;
}
#wrapper {
  width: 960px;
  overflow: hidden;
  margin: 20px auto;
}
 
 
/*タブレットレイアウト*/
@media screen and (max-width:959px){
#wrapper {
  width: 640px;
}
}
/*スマホレイアウト*/
@media screen and (max-width:767px){
#wrapper {
  width: 320px;
  overflow: visible;
}
.box {
  float: none
}
}
 
 
 
■positionの解除 static

f:id:shima0web:20170823192702p:plain

 
positionで天地左右ど真ん中に配置し、それを解除する
relativeを指定しないのでbodyの天地左右ど真ん中に配置
 
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
 
↓
 
解除！
 
position: static;　
 
 
 
■スタイルの解除（キャンセル）方法を覚えよう!
  background: transparent; 　
　背景色を透明にする（親要素の背景色と同じになる）
 
  text-align: left;
　文字の位置をなくす　文字を左にぴったりつける（日本語は左から読むから）
 
  line-height: 1;
　行間をなくす
 
  border: none;
　枠線を消す
 
  position: static;
　ポジションを解除する
 
  margin: 0;
　位置をなくす
 
　display:none;　
　要素を消しちゃう
　display:block;
　消した要素を戻す
　→Googleはあまり認めていないが、現場ではまだまだ使われているやり方
　 →ソースコードと表示が違うから、ルールに乗っ取っていないため
 
 
@media screen and (max-width:959px){
}　を書くときにいつもの癖でpx;ってセミコロン書いちゃって、全然表示されなくてすごく焦りました・・・・・。ここはセミコロンいらない！！！覚える！！！
 
たまにはサーバーのあげないとやりかた忘れちゃうのでアップしてみた