ピュアチャ〜ジ

広告代理店のディレクターを辞め、マレーシアに飛び立ちました。ふわふわ生活して、やっぱり収入を上げて豊かに人生にしたい!と思いプログラミング学習を始めました!フリーランスまでの道のりを描くブログです

Webデザイン勉強75日目の成長報告!

こちらのWebサイトは移転しました。


[ピュアチャ〜ジ]

はいどうも!

 

今日も作業をしましたので進捗報告です!

小さい画面サイズ→大きい画面サイズになった時に表示を切り替える方法!

 

 【画面サイズが小さい時】

f:id:terushi-diary:20191104185251p:plain


画面サイズが小さい時は、widthを指定していないので100pxで横いっぱいに表示されています。

f:id:terushi-diary:20191104175742p:plain

 

【中くらいの画面サイズの時(600px〜)】

600pxを超えると、imageのwidthの200pxが適用され、textが横に広がります。

f:id:terushi-diary:20191104175749p:plain

 

【大きな画面サイズの時(800px〜)

799pxまでは画面いっぱいに表示され、横幅が800pxを超えたところからtextの部分を減らしてadが表示されます。

f:id:terushi-diary:20191104175756p:plain

f:id:terushi-diary:20191104175804p:plain

f:id:terushi-diary:20191104175813p:plain

 

今日はここまで!