学習のためにWordPressを使ってレスポンシブウェッブ（当サイト）を制作してから、要点をまとめてみました。レスポンシブウェッブ作成のための３要素の｢フリードグリッド｣と｢フルードイメージ｣は、比較的理解もし易く、やってみれば比較的容易に作成出来ます。
作成のポイントでは、やっかいなメディアクエリーを中心に記述しています。これを使いこなさないとデザインが思い通りにいきません。
当サイトの枠・ＣＳＳ記述
body {width:100%;
line-height:1.5em;
background-color: silver;
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;}
#container {margin: 0 auto;
max-width: 918px;
padding: 0px 9px 5px 9px;
background-color: #ffffff;}
ＣＳＳの説明
- １行目：サイトの幅をPXでなく、％で指定
- ２～４行目：行間、背景色、フォントファミリーの設定
- ５行目：全体を中央寄せ
- ６行目：最大幅をpx指定、これでサイトの枠幅が決まる
- ７行目：表示領域containerの内部余白の指定
- ８行目：表示領域背景色の指定
viewport（meta要素）
<meta name="viewport" content="width=device-width,maximum-scale=1">
スマホなど画面が小さいのに解像度は非常に高くなっている。同じ3.5インチのデバイスでも解像度が機種によって異なり、例えば a)iPhone 3Gs 320px×480px
、b)iPhone 4s 640px×960px。同じサイズで表示出来るデータ量が2倍違う、b)の方が１画面で沢山のデータを見られる、一方それだけ小さく見えるため、見にくくなってしまう。この問題を解決するための技術がwindow.devicePixelRatioで、b)の機種で2倍のpixcelで表示する事で見やすくなるというわけです。PixelRatioは、現在１から３まであり、機種によって異なります。ＣＳＳは、PixelRatioを元に表示されます。
viewportの詳しいサイト→ご紹介
メディアクエリー
@media only screen and (max-width: 480px) {
ここにスマホ用（最大幅480px）のＣＳＳを記述
}
@media only screen and (min-width: 481px) and (max-width:768px) {
ここにタブレット用（481px～768pxまで）のＣＳＳを記述
}
@media only screen and (min-width: 769px) {
ここにパソコン用（最小幅769px）のＣＳＳを記述
}
メディアクエリーの幅の値をブレークポイントと呼び、この値や幾つのポイントを作るかの決めは無い。サイト作成者が決めるしか無いが、当サイトでは最も多く使われているブレークポイントにしている。
「作成のポイント」のサブメニューの説明
-
ホーム（トップページ）のページ下部の３つのボックスをfloatでＰＣ表示横に配列したメディアクエリー
-
３つの要素のページ 画像と文章の３ボックスをdisplay:flexでＰＣ表示横に配列したメディアクエリー
-
左右に２分割したサンプルＡ
-
メディアクエリーを使わないときの左右に２分割したサンプルＢ
-
横３列配置のＣＳＳの異なる記述、利用WordPressプラグイン