遊びは終わりだ。

おっさんが自由気ままに更新します。

そろそろ人生の遊びは終わりだ…

超初心者のHTML & CSSのLearning story Part.6

どうも、Yoshiです。

 

 

先日久々にしゃぶしゃぶを食べにいきました。

(もちろん食べ放題です。)

いやーやっぱりおいしいですね。最近年齢のせいか焼肉よりもしゃぶしゃぶの方がおいしく感じるようになってきました。

油ですかね。あ、脂か。

 

胃がもたれるという感覚はないのですが、すぐにお腹がいっぱいになってしまいます。

 

 

さて、先日progateでの中級編をクリアしまして上級編に突入した私。

聞いたことがあるけど、いまいち内容がわからないというようなものも出てきまして、こういうことだったのか!とまた一つ勉強させていただきました。

 

 

 

 

上級編スタート

今回から上級編ということで、さらに深い部分の学習になりそうな予感です。

上級編は中級編で制作したサイトに手を加えていくような流れになりそうですので、ちょっとでも置いていかれないように頑張りたいと思います。

 

上級編の1発目はレスポンシブデザインから

f:id:to-many-hopes:20170624155953p:plain

いきなり「レスポンシブデザイン」と呼ばれるものにチャレンジです。

以前から聞いたことはあったのですが、いまいち理解ができていなかった私。

今回の学習でようやく意味を理解しました。

 

f:id:to-many-hopes:20170624160131p:plain

レスポンシブデザインとは…

いわゆるパソコン、タブレットスマホなどどの端末で見てもきちんと表示されるようにデザインという意味になるんだと思います。

たまにスマホでサイトを見てるとパソコン用のサイトをそのまま表示してるのか、思い切り字が小さく表示されるサイトとかありますよね。

そういったサイトも見やすいようにスマホ用にデザインを作るということだと思います。

 

つまりこんな感じ。

f:id:to-many-hopes:20170624160435p:plain

これがパソコン用のデザイン

 

f:id:to-many-hopes:20170624160507p:plain

これがスマホ用のデザイン

 

f:id:to-many-hopes:20170624160543p:plain

これがタブレット用のデザイン

 

 

というように、各端末によってデザインを少しづつ変えて端末に合わせてデザインをすることを”レスポンシブデザイン”というようです。

 

これって結構重要だと思うんですよね。今の時代って本当にスマホタブレットが主流だと思いますし、今後もっと加速していくと思いますから、こういったことって今後とても大切になってくると思います。

 

 

メディアクエリ?

レスポンシブデザインを適応するには、”メディアクエリ”というものを使用する必要があるようです。

f:id:to-many-hopes:20170624161418p:plain

 

 

メディアクエリの書き方はこち

f:id:to-many-hopes:20170624161506p:plain

何となく今までと少し書き方が違うような気がするのですが…

これは仕方がないのかな…?

間違えたりしそうな気がしてなりません(苦笑)

 

f:id:to-many-hopes:20170624161603p:plain

メディアクエリを追加した後は、”ブレイクポイント”と呼ばれるものを指定します。

”ブレイクポイント”というのは、簡単にいえば「表示が切り替わる基準を決める」ということであってると思います。

 

このサイズまで小さくなったら(または大きくなったら)このサイズで表示する

 

というような基準を決めることなんだと思います。

 

 

少し深い部分の学習で急に難しくなったような気がしますが、何とか頑張っていきたいと思います!!!

 

 

上級編 第一部 レスポンシブデザイン Part.1

今まで習ってきたことなどを使いながらさらに新しいことを覚えていく。

仕事でもそうですが、これが結構難しいんですよね。

慣れるまでは完全に覚えきってないこともたくさんありますから。でも、そんな思い出すっていうことが一番脳を使うことになり、脳が活性化するという話を聞いたこともありますので、ガンガン頭をフル回転させながら進めていきたいと思います。

 

いよいよこれまで学習してきたことを覚えているかどうかが試される段階に入ってきたような気がします。

 

思い出しながら頑張ります!!

 

 

ではまた!

© 2017 to-many-hopes.blog