遊びは終わりだ。

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

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

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

どうも、Yoshiです。

 

気が付けばもうすぐ7月ですね。

本当に早いです。時間が経つのが早く感じる時はそれだけ充実してる時だという話を聞いたことがありますが、あながち嘘じゃないように思いますね。

皆さんは毎日充実してますか?

僕は結構充実してます。

 

映画が好きなのですが、最近見る時間があんまりなくてちょっと落ち込んでるぐらいです(苦笑)

映画って言っても、映画館に行ったり新作をチェックしてとかっていう訳じゃないんですけどね。(B級って言ったら失礼ですけど、話題になってる映画よりもアンダーグラウンドな映画の方が好きです。)

 

さて、「超初心者のHTML & CSSのLearning story」も上級編に入りまして、使える時間を使い頑張っております。

 

 

 

前回の続きから

 前回、上級編の第一部としてレスポンシブデザインを学習するレッスンに入りました。

その前回で、メディアクエリというものを使用して、レスポンシブデザインを適応していくというところまで行きましたので、今回はその続きから!

 

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

画像のように幅によって表示されるデザインを変えることを”レスポンシブデザイン”と勉強しました。

そのレスポンシブデザインを適応させるために”メディア”クエリ”というものが必要になります。

 

メディアクエリを使うとこんな感じに

 

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

横並びだったコンテンツがページの幅が狭くなると、二段になって表示されるようにする。

これがメディアクエリ効果!です(笑)

 

スマホ用デザインっていうのはこういう部分でのデザインが効いてるっていうことになるんですよね。いやーすごいな。

 

 

レイアウトが崩れる!?

メディアクエリを使うと以前作成したレイアウトが崩れてしまうとか…

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

こんな感じでパーツの幅がおかしくなってしまうため、レイアウトが崩れてしまうそうです。

それを直す作業を。

 

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

”box-sizing”というものを使うと要素の幅にパーツと外枠との空間、そして外枠の幅も要素に含めることができるとのこと。

正直これは、書いて説明するのは難しいんじゃないかと…

 

しかしこうすることで、要素の幅をそのまま使うことになるためレイアウト崩れがなくなるという作戦です。

 

これもなかなか理解が難しいなぁ…(汗)

 

 

全体にCSSを適応する記述方法

CSSに記述するときに”*”を指定するとHTML全体に適応することができるそうです。

これはまた便利なコードですね。

  

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

上記の”box-sizing”を使用するときには全てのパーツを指定しておく方が後々のデザインや修正などがやりやすいということなのでしょうかね。

使い方を覚えておけば、もしかしたら他のデザインにも利用できるかもしれません。

 

 

中級編で作成したサイトにレスポンシブデザインを!

ここからは中級編で作成したサイト

f:id:to-many-hopes:20170624112130j:plain

※参考画像はこち

 

このサイトにレスポンシブデザインを実装するという流れになります。

 

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

本当はここは動画で動きを見ることができるのですが、ここでは動画のリンクを貼ることができませんので画像にてご確認ください。

これが中級編で作成したサイトにレスポンシブデザインを適応したイメージです。

 

この画像はスマホ用のページになってます。

横並びだったレッスン一覧が縦に並んでますよね。

 

これを実際に自分の手でやっていこうと、そういうことです。

 

 

viewport!?

「レスポンシブデザイン」を使用するには「メディアクエリ」というものが必要になると書きました。

その「メディアクエリ」を正しく表示させるためには、「viewport」というものの記述が必要不可欠だそうです。

また新しい用語が出てきましたね(苦笑)

さすがは上級編…もう何が何だか分からなくなってしまいそうです…

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

ここで書き方を暗記する必要はないと書いてありますが、書かなくてはいけないということは覚えておかなくてはならないので、また覚えることが増えます(苦笑)

 

小さい脳みそに詰め込みながら少しずつ覚えていきます(笑)

 

 

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

 今回は一気に覚えることが増えたような気がします。

進めていくのは楽しいですし、どんどん進めることができるのですが、終わりが見切れないため、思っている以上のスピードで進んでいくことが多いです(笑)

 

今はしっかりと理解していなくても、どんどん前に進めていく方がいいのかと思い、ガンガン進んでいますが、僕の場合どこかで一度整理した方がいいかもしれません。

 

ちなみの、このprogate。

一度クリアしたレッスンは復習もできますので、かなり嬉しいです。

初心者の僕にもかなり優しい作りになっててまた一から復習しなおすこともできるので、一度キリのいいところでいったん復習してみようかとも考えております。

 

着実に覚えていかないと試しに、実際に一人で一から作るっていうっていう時に調べることばかりに時間がかかってなかなか前に進まなそうですからね。

学生時代は予習復習など一度もしたことなかったのですが、今回はきちんと復習したいと思います。

 

それにしてもwebサイトの中身を知ることでますますネットサーフィンが楽しくなっている僕です。

 

 

 

ではまた!

© 2017 to-many-hopes.blog