CSS学習 フロートとレスポンシブweb

“The text isn’t showing up correctly on the mobile site.”

パソコン版で見たら

それなりにいい感じなのだけど

 

↑スマホ表示

 

スマホで見るとちょっと微妙?!?

 

タイマーとその上の文字が妙に長いというか…

左の空間がもったいないというか…

 

なんとかするには

float

だ!

floatを使って並列に表示するんだぁ。

٩( ‘ω’ )وおー!

 

本日の課題:
floatをマスターせよ!?

 

苦闘の末…


↑PC表示

 

はっ?!

(゚д゚)!

 

PC版に二個表示されるようになってしまった。

 (´д`)ママン… 

 

試行錯誤するも…

キレイな並列表記を目指す中

PC版ではキレイでも

スマホ版では微妙…という事態がどうしても…起こってしまうため

 

リスナーさんのアドバイス♡により

レスポンシブ対応(PC版とスマホ版別表示)にすることにしました。

 

本日の課題2:
レスポンシブ対応してみよう

 

@media screen and (max-width: 2200px) {
}
とか
@media screen and (max-width: 500px) {
}
とか・・

 

使ってみて無事解決━━(゚∀゚)━━━━!!

 

 


↑PC表示

 


↑スマホ表示

 

100%コピペ(甘え)でいけるものがなかったため‥わりと手間取ってしまった。。

その分‥出来た時の感動もヒトシオ。゚(゚´Д`゚)゚。

 

それはそうと、昨夜カスタマイズ作業していく中でたくさん目に付いた単語が

ゴミカスクズ

……

覚えたいのはそういう日本語のネガティブワードじゃなくて…英単語…なのだけど・・(;’∀’)

 

 

単語帳!

とりあえずの1周は終わったんだ!
(これを書いている今、至高の100語の中のラスト50を終えて完了しました👏)

 

 

 

2018年の桜🌸撮影しました。
桜の種類もいろいろ

 

さ! 次は桜を降らせるぞ!このブログに🌸🌸🌸

…じゃ、なくて、、、

 

英文法DANE。。

 

 

 

 


 

★━━━━----——————————————————————

 

お こ と ば

(レスポンシブwebの指定に関して)

 

1200pxで指定したときにCSSが反映されなかったのはデフォルトを書いていないから。

逆に今は2200px以上の人たちにはCSSは不要という英断をしている状態だよ♡

 

 

く(“”0″”)>なんてこった!!