超超初心者向け漫画サイトのつくり方【レスポンシブサイトにする】

画面幅によって、適用するCSSを分けます。

そうする事によって、PCとスマホのどちらで見ても見やすいページになります。

なりますって言っちゃったけど、CSSの記述方法によってはならないので頑張りが必要です…！

ｈｔｍｌの記述

まず、ｈｔｍｌに、スマホで表示する時のルール設定を記述します。

<head>～</head>の間に、以下の記述をまるっとコピーして貼り付けてください。

<meta name="viewport" content="width=device-width, initial-scale=1">

何者か分からなくても貼っときましょう。ただのおまじないです。

あと、テスト用に<body＞～＜/body＞の間に

<p>レスポンシブテスト</p>

と、記述しておいてください。

ｈｔｍｌに記述した「レスポンシブテスト」の文字サイズを画面幅により変えてみます。

画面幅が766px以上の時は50px
画面幅が767px以下の時は20pxになるようにします。

p {
      font-size: 50px;
    }
@media screen and (max-width :767px) {
  p {
        font-size: 20px;
      }
    }

保存したら、ブラウザで確認してみてください。

そして、ブラウザの横幅を広げたり狭めたりしてみてください。

ブラウザ幅を伸び縮みさせていると、あるポイントで文字サイズがキュっと変わるはずです。

@media screen and (max-width :767px) {　ここに、画面幅767px以下の時に適用したいCSSを記述　｝

……といった感じで、画面幅によってCSSを変えることが可能です。

なーんだ。簡単じゃん。って思うでしょ？

簡単なのに簡単にいかないから不思議なんですよねー…。なんでだろう。

内容を理解したい。というひとへ。

ｈｔｍｌに記述した内容の詳細です。

meta name=”viewport”　表示画面について指定するよ～という意味。

content=”width=device-width, 　横幅はね、表示端末（スマホ）の横幅に合わせてね。という意味。

initial-scale=1″　最初に表示される状態を、1倍で出してね。という意味。

うん。意味わからんですな。

まー、この設定は基本触らなくていいと思います。レスポンシブにするなら、触っちゃダメです。

例えば、widthをスマホ幅より大きく設定したら横にはみ出して表示されない部分が出来るし、scaleを２とかにしたら、２倍の大きさで表示されるので、やっぱりはみ出て表示されない部分ができます。

ファーストビューで何となくの全体図が出るのが基本はいいと思う……けど、漫画描きさんは独創的な人が多いから、思いもよらぬ利用価値とかを見出しちゃったりするんだろうなぁ…。

一般的には、viewport設定は中級者あたりから手を出す領域（多分）ですが、漫画描きさんは特殊なので自分好みに調整してみてもいいかもです。

サイトデザインに凝るより、漫画描いたほうが絶対いいですけどね。