皆さんこんにちは。まるです。
僕はここ１か月ほどhtml cssを勉強しており、やっと模写コーディングで簡単なサイトなら作れるようになってきました。
ただふと気になったのが
『これってスマホで見たらどうなるんだろ？』
聞いたことはありましたが ”レスポンシブ化” をしないとPC基準で作ったサイトは崩れたり、ぐちゃぐちゃになったりしてしまうんですね。。。
試しに自分でコーディングしたページを縮小して見てみると。。。
(´・ω・)(´・ω・)(´・ω・)(´・ω・)(´・ω・)
ぐちゃぐちゃのめちゃくちゃです笑
これはまさか１からやり直しなのでは？？？( ;∀;)
とりあえずYoutubeで調べてみました。
今日はこちらの動画の内容を学んでいこうかと思います。
まずぱっと動画を流し見して見たときに感じた点は
- 文にしろ画像にしろ、配置をほぼすべてpositionでpx指定していたのでcssに関してはほとんどやり直さなければならない。
- 全体のサイズ感や配置などスマホ表示やタブレット表示も意識してコーディングしなければならない。
この２点を強く感じました。
正直cssを学んでいる段階で [ float ]に苦手意識があり、避けてpositionを多用していたことに疑問は抱いておりました。
それとスマホで表示させてみたところ、画像がいない( ;∀;)
やはり基本を飛ばして楽をしても遠回りするだけだなと、改めて実感しております。。。
今日からレスポンシブ化について学習、実践してみますが
まず初めに全体の配置と%について今一度考えなおしてみようかと思います。
今日発見できた課題をまとめると
- positionやwidth heightなどを指定する場合％指定することに慣れる。
- font-size指定をrem指定することに慣れる。
- スマホ表示させた時に画像が表示されない原因を検索する
まずはこの課題を解決させたいと思います。
本日もここまで読んでいただいてありがとうございます。
ブログやTwitterも毎日投稿していこうと意気込んでいるのでこちらも見ていただけたらとても嬉しいです！
面白いな、がんばれ！なんて思っていただけたら いいね を押していただけるともっと頑張ろう！
って思え、励みになるのでよろしくお願い致します。
Twitterはこちら↓↓↓
https://twitter.com/marumaru_eng