//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

HTML,CSS学習者がレスポンシブサイトとは何か書いてみる

投稿者: mameblack 投稿日:


マナブ(@manabubannai)さんの【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】で学習中。

今日は『7.レスポンシブサイトを作ってみよう』に取り掛かりました。

英語学習も兼ねて、英語のyoutube動画を見ながらの学習。

Responsive Web Design Tutorial and Explanation




レスポンシブ、ってなんだ?

そもそもレスポンシブって何でしょうか。

レスポンスは結構、日常的に使いますよね。

返信とか、対応とか、そういう感じの意味です。

これを踏まえて、レスポンシブというのは、対応するという意味です。

つまり、HTMLのレスポンシブっていうのは画面サイズに対応して、サイトが変形します。

パソコンでサイトを見るときは横に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時起きで。


//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js