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″”)>なんてこった!!

“CSS学習 フロートとレスポンシブweb” への4件の返信

  1. 今朝は長時間苦労されていましたね(;´▽`A“
    でもその甲斐あってスマホ版も上手く納まっていますよ。
    v(*’-^*)-☆ ok!!
    本試験まであまり時間がないようですが応援して見守っています。
    d(@^∇゚)/ファイトッ♪

    1. そうなんです笑
      機械系‥苦手で(;^ω^)
      ありがとうございます(*^^*)

      迫りくる試験日。。
      しっかり準備していきたいと思います。
      ありがとうございます!!♪

  2. 30日から(((((((((((っ・ω・)っ moveこの間は…知っています。。。笑
    単語1周できたのですね!!!
    ☆(・ω・ノノ゙88888888

    ブログも途中失敗があったとはいえ、、あれだけヒントでできてしまうなんてスゴいですゥ!!ヾ(*´∀`*)
    わかる人は口を出さないリスナーの心得ですよネ◝(⁰▿⁰三⁰▿⁰)◜ネ!

    1. この間…何があったのだろう……(思い出せない笑、あの件以外‥思い出せない笑)

      はい!一応一周できました(*^^*)☆彡ただしかなり不安ですが((((;゚Д゚)))) 

      不完全ではありますがとりあえずはよかったです☆彡
      ありがとうございます(*^^*)

      Σ(゚∀゚;ノ)ノキャー たすけて た‥たすけて みんな・・・ Σ(゚∀゚;ノ)ノキャー 笑

コメントを残す