Edited at

レスポンシブデザインを導入するときにつまずいた超初歩的なミス

More than 3 years have passed since last update.


1. レスポンシブデザインを導入した時につまずいた…

 こんにちは、久しぶりの投稿です。

 またまたやらかしました。まだWebを触って1年なのですが、いままでデスクトップで動くことを前提としたアプリケーションばかり作っていました。

 この度、会社の仕事とは別件でサイトを作ることになり、レスポンシブデザインに対応しようと調べて、試行錯誤しながら作っていったわけです。

 どうもCSS側で

@media screen and (min-width: 640px) {

}

 みたいなコードを書けば動くみたいだ!!と思って、書いたんですが玄人や初心者のかたでも「いやこれだけじゃ、動かないんだなー」と思っている方はその通り。これだけでは動かないんですね。

 実はhtml側でも、あるコードを挿入してやる必要があるみたいです。それを今回、備忘録的に書きます。

 動かなかったと書いていますが、もちろん全く動いていなかったわけではありません。サイトが思っていた挙動と異なる挙動を示したということです。

 どのような挙動になったか、具体的に写真を添付することが今のところできないのですが、デスクトップのサイトがそのままスマホでも表示されたので、重いし見難いという最悪なサイトが出来上がってしまったのです。


2. 動かなかった原因

 動かなかった原因は、スマホのブラウザソフトに「僕のサイトは、あなたのデバイスの画面サイズに合わせるよー」と教えなかったことが原因です。


3. じゃあ、どうするの?

 「僕のサイトは、あなたのデバイスの画面サイズに合わせるぞ!」ということを、どこで教えるかというとhtmlのhead要素で教えます。

<head>

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

 これで何が変わるかというと、私のサイトのwidthはあなたのデバイスのサイズに合わせます。その初期の倍率(CSSで扱う1pxと画面のサイズにおける1pxの比率)は1ですよということを、デバイスのブラウザに教えてあげるのです。

 そうすることで、一生懸命書いたレスポンシブデザインに適応されるcssが読み取られます。


4. おまけ

viewportのcontentの中身は、様々なパラメータがあります。以下のサイトを参考にしてみてください!

http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho


5. 参考サイト

http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho


6. 質問やご意見などなど

 質問やご意見、「ここ間違ってるぞコラ!」みたいなのがあれば、以下のメールアドレスまでメールいただけると喜びます。

 この記事にコメントつけてもらってもOKです!

 よろしくお願いします。

 akira.kashihara@a-dawn.net


7. 改訂記録

2016年2月2日 新規記入、タイトルのミスを修正(挿入→導入)

2016年2月4日 読者の方から頂いた修正を反映(コードの色を表示)