※新卒社員の研修用に2013年頃作ったもので一部内容が古い可能性があります。
2022年でもサイトがレスポンシブまたはスマホ非対応だと、ウワ～！改修楽しそう～！と思うけどページ数多いとそんな簡単にできないのもわかる。
とりあえずレスポンシブについては下記になります。
レスポンシブWEBサイト パソコン・スマホなど、どれで見てもサイトを調整して見やすくなっているサイト 下記のイメージは「レスポンシブ対応してないサイト」と「対応しているサイト」
スマホ化もしくはレスポンシブ化の大まかなイメージ
とりあえずのスマホ化や頑張ってレスポンシブしたい場合のまずは3パターンあるメモ
①PC用とスマホ用ページを作ってしまい、プログラムで自動的に移動させる方法
②ページ自体は１つ、cssを２つ用意しクリックしてcssを選ぶ方法
③１つのページと１つのcssですべてを作る方法（横幅で切替）
①に関しては通常のWEBサイトでは使わないと思います。
主に用途としてはプログラムを突っ込みにくい楽天やヤフーのショッピングサイト系ぐらい…だった（過去形）。楽天は今年2022年4月～来年にRMSでしかスマホトップページ制作できなくなるのでこれはほぼ過去の手段になっていく筈。
②・③に関してはサイトの仕組みや利用者に合わせてというところがあります。
サイト訪問者の年齢が高い場合、PCサイズとスマホサイズでデザインが変わると「アレはどこいった！？」って混乱して問合せしてくる方もいます。可愛いね。
実際に所属してる会社のサイトも②のパターンがあったり、そうじゃないサイトに関しては③にしてたりなので適宜合わせるしかない。css切替のプログラムは多分検索すれば優しい人のがある。
一般的には企業系サイトが②で、ブログサイトとか若者向けだと③が多い印象。
ここから下は③の方法でレスポンシブ対応していく場合の手順です。
レスポンシブ化の手順①viewportのmetaタグを入れる
はじめに、画面の幅を認識するviewportのコードをヘッダーに入れる必要があります。
コードを入れる事によって、そのページが今画面がどんなサイズか勝手に考えてくれます。
ヘッダー部分に入れるコードは大体下記のような感じになります
<meta name=”viewport” content=”width=device-width,user-scalable=no,maximum-scale=1″ />
<head></head>の間であればどこでも大丈夫ですが、できればcssよりも上が望ましいです。
レスポンシブ化の手順②ブレイクポイントを設定する
次にCSSでブレイクポイントを設定します。主に書き方は下記のような形で、〇px以上の時～とか〇px以下の時～とか色々あります。サイトに合った書き方があるので正解はないです。
@ media screen and (max-width:640px) { }
@ media screen and (min-width:480px) and (max-width: 767px) { }
@ media screen and (orientation:portrait) { }
あとはもうCSSを書き込んでいくだけです。
既存のサイトをレスポンシブに改修していく場合PC用のCSSはすでにあると思うので、@ media screen and (ほにゃらら) { } の{ }の中に同じクラスのままスマホサイズの時の表示内容を書くだけになります。
例としては、PCでは.textbox{padding:10%;}でも、スマホでは.textbox{padding:1%;}とかにするような感じ。
※レスポンシブサイトを作るうえでの注意点
「パソコンでは見せたくない」「スマホではこれはジャマ」となった時は「display:none;」のクラスを用意しておこう。
フォントサイズは部分部分で設定せず、大枠でサイズを決めた方が良い スマホ用とパソコン用で文字サイズの標準は大きく変わります。