【コピペで簡単】同人サイトをスマホ対応（レスポンシブデザイン）にするやり方
同人サイト（二次創作サイト）をとりあえずレスポンシブデザインにしたい！と思っている方向けに、コピペで作れる方法をご紹介します。
多少の知識（と言っても、PCやスマホ用に横幅などを調整すること）が必要なのですが、初心者でも簡単に実装できるかなと思います。
とりあえずコピペ！なので、詳しい説明まではしていません。気になる方は下記のブログを参考にどうぞ。
もくじ
<head>～</head>の間にviewportを設定する
HTMLファイルの<head>～</head>の間に、下記のコードを入れます。（文字コードのすぐ下に書くのが好ましい）
<meta name="viewport" content="width=device-width, initial-scale=1">※閉じタグはHTML5用なので、HTML4文章の場合はそちらに合わせてください。
例として、私はこんな感じで指定しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サイトの名前</title>
</head>
<body>
ここに内容
</body>
</html>この設定をしていないと、PCサイトをスマホで見た時に、文字が小さく表示されていたりしますよね。
このコードはそれをそれぞれのデバイスに合わせてくれる、と思っていただいてOKです。（等倍表示）
ちなみにviewportにも色々と指定はできるので、参考までにブログのリンクを貼っておきます。（上のコードだけでも表示する分には問題ないです）
スポンサーリンクスマホ用にデバイスの幅でCSSを切り替える
スタイルシートに、スマホ用の設定をします。
@media screen and (max-width:736px){
/* ここにスマホ用のスタイルシートを記述 */
} /* ←この閉じタグは削除禁止！ */この (max-width:736px;) という部分で「横幅は最大736pxまで」という指定になります。
私は736pxに指定していますが、幅は狭くても460px～740pxあたりで指定するとよさそうです。（最近はスマホも大きくなっているので、どこまで効かせるか悩みどころ）
今回はPCとスマホで切り替えていますが、間にタブレット用もはさみたい！という場合は、
/*スマホ用ここから
================================================= */
@media screen and (max-width:736px){
/* ここにスマホ用のスタイルシート */
} /* ←削除禁止 */
/* タブレット用ここから
================================================= */
@media screen and (max-width:1024px){
/* ここにタブレット用のスタイルシート */
} /* ←削除禁止 */こんな感じで、タブレットのmax-widthはPC適用範囲くらい（1024pxあたり）までを指定すると、それに合わせてスタイルシートが切り替わります。
ちなみに、PC用で別で指定したい！という場合には、
/*パソコン用ここから
================================================= */
@media screen and (min-width:1025px){
/* ここにパソコン用のスタイルシート */
} /* ←削除禁止 */こんな感じでmin-width（最低の横幅）を指定しています。（maxじゃないですよ）
スタイルシートの書き方は通常の書き方と一緒です。
ただ、間違えて削除禁止の閉じタグを消してしまわないように注意してください！（media指定用です）
スポンサーリンクスマホ用のサイズの横幅指定
スタイルシートの記述で、 width:100%; や width:80%; という%で記述していたら、そのままデバイスのサイズに合わせて横幅も縮んでいくのですが、width:950px;などの数字で指定していると、PCからの見え方は問題なくても、スマホで見た場合は横にびゅーんと伸びてしまいます。
スマホではpxより%で指定した方が幅が飛び出すことは少ないです。
@media screen and (min-width:0px) and (max-width:736px){
header{
margin:auto; /* 中央に寄せる */
width:95%; /* 横幅の指定 */
}
} /* ←この閉じタグは削除禁止！ */ただ、paddingを指定している時に（特に左右の余白）、横にはみ出てしまい、きちんと収まっていない時があります。
その時は、 box-sizing:border-box; を記述すると綺麗に幅の中に収まります。
@media screen and (min-width:0px) and (max-width:736px){
header{
margin:auto; /* 中央に寄せる */
width:95%; /* 横幅の指定 */
padding:0px 40px; /* 左右の余白 */
box-sizing:border-box; /* 横幅内に収める記述 */
}
} /* ←この閉じタグは削除禁止！ */※ただしこちらはブロック要素でしか機能しないので（一応幅は指定していますが）、インライン要素（<a>など）でもきちっとしたい！という場合はdisplay:block;などを別途指定しなければなりませんので、ご注意を！
スポンサーリンクスマホで大きめの画像をはみ出さないように表示させたい
イラストなどをスマホで表示する場合は、画像サイズを指定しなければ、スマホの横幅を超えてしまい、はみ出すことがあります。
そのため、以下のように指定することで、横幅をはみ出さないように表示することができます。（一括指定なのでこれだけでOK）
/*スマホ用ここから
================================================= */
@media screen and (max-width:736px){
img {
max-width: 100%;
height: auto;
width: auto;
}
} /* ←削除禁止！ */max-width:100%; にすることで、デバイスより大きな画像を入れても自動的にそのデバイスの幅に合わせてくれます。
また、小さめの画像を載せた場合でも、max-widthで横幅指定しているので、拡大表示されることはなく、その画像のサイズに合わせて表示してくれます。
（これがwidth:100%;で指定した場合が全て横幅ぴったりに表示されてしまうのでご注意）
スポンサーリンクviewportや@media screen（メディアクエリ）を指定したけど、効かないんだけど！
こちらの注意点ですが、メディアクエリはIE8以下では対応していない（！）ので、元のHTML（<head>～</head>の間）に追加で記述が必要になります。（9以降は問題ない）
また、viewportの場合はスタイルシートに記述が必要だったり。
IEはしらん！無視する！！！！でもまあ、いいと思います（私の会社でもたまにある）が、IEを使ってる人も多かったですしね。
スマホだと、ほとんどがSafariかChromeだとは思いますが…。念の為記載。
とりあえずはこれでいける！はず！
更新したらお知らせします
