HTML,CSS学習者がレスポンシブサイトとは何か書いてみる
マナブ(@manabubannai)さんの【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】で学習中。
今日は『7.レスポンシブサイトを作ってみよう』に取り掛かりました。
英語学習も兼ねて、英語のyoutube動画を見ながらの学習。
Responsive Web Design Tutorial and Explanation
レスポンシブ、ってなんだ？
そもそもレスポンシブって何でしょうか。
レスポンスは結構、日常的に使いますよね。
返信とか、対応とか、そういう感じの意味です。
これを踏まえて、レスポンシブというのは、対応するという意味です。
つまり、HTMLのレスポンシブっていうのは画面サイズに対応して、サイトが変形します。
理想と現実の狭間で、悩み続けるHTML学習者。
— 日下部まめ@イギリスYMS中のバカ (@MameMrm) January 23, 2020
理想（左）と現実（右）
レスポンシブで3ブロック→1ブロックにしたいのに、どうもならない。 pic.twitter.com/kAi93R4cJo
パソコンでサイトを見るときは横に3ブロック並んでいてほしい。
でも、スマホで3ブロック並んでたら、写真も字も細かすぎて、見えづらいですよね。
レスポンシブというのは、あるコードを書くだけで、画面サイズに合わせて、デザインが変更する仕組みです。
サイズを指定したら、勝手に変わってくれるので、とても便利。
利用する立場からすると、とても見やすい！という優れものです。
ちなみに、今回ボクが書いたコードでは、この部分。
@media screen and (max-width: 620px){
div.nav ul li{
width: 33%;
}
}@media screen and (max-width: 500px){
div.nav ul li{
width: 50%;
font-size: 85%;
}
@media screen and (max-width: 〇〇px)
この部分で、最大横幅の指定をしてます。
横幅が620px以上だと、1ブロックが画面の33%の大きさなので、3ブロック並びます。
また、500px以上620px未満だと、1ブロックが画面の50%の大きさなので、2ブロック並びます。
そして、残りの1ブロックは、その下に並びます。
500px未満になると、3ブロックが1ブロックずつ縦に並びます。
分かりやすく言うと、パソコンでマンガを読むと、本のマンガを読むように見開き1ページが表示されます。
スマホで、見開き1ページが出てきても、絵も字もつぶれて読みづらい。
そうすると、1ページずつ縦に流れてきた方が見やすい。
そういう便利なことになるわけです。
ちなみに、今回ボクは動画の通り通常のCSS（サイト内でのデザインを指定するファイル）を作成。
それとは別に、レスポンシブのCSSを作成したら、レスポンシブCSSだけ読み込まないという事態に。
HTMLにも以下のコードを書いたので、動くはずなんですが……どうしても動きませんでした。
<meta name=”viewpoint” content=”width=device-width, intial-scale=1.0″>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
<link rel=”stylesheet” type=”text/css” href=”css/responsive.css” media=”screen and(max-width: 900px)”>
通常CSSにレスポンシブCSSのコードをコピペしたら、思った通りに動いたので、コード自体に問題はなし。
レスポンシブCSSだけが、どうしても読み込まれない問題。
あまり考えすぎても進めないので、今回は保留にして、次の段階に進みます。
学習を進めていくうちに、どうにか理解できることも増えていくはず！
今日は、そんな感じです。
そろそろ仕事の準備をして、働きに行ってきます。
今週は霜が降りるくらい寒いロンドンですが、明日も8時起きで。
