レスポンシブデザインのサイトを作成する
本日の教材動画はこちら
今までいろいろと勉強しながら実際にコードを書いてましたが、最後に「実際にレスポンシブデザインのサイトを作る」とはどういうことなのか、上記の教材動画を見ながら作ってみました。
見よう見まねで作ろうとしてもうまくいかず…
勉強はしてきた者の今までCSSでサイトデザインしたことないし、どう組み合わせていいかもまったくイメージできていなかったので最初かなり苦戦しました…。作者さんがページのソースを配ってくれてたので最初それを見ながら作ってたのですがどうしてもうまくいかず…。
自分がわかりやすいようクラス名などを変えてたので、見本とどこが違うのかの見比べてもいまいち容量がつかめない・うまくいかない理由が分からない。というわけで最終的に自分が作った物を一旦全て破棄し、作者の見本コードを丸々コピー→自分が分かるようにクラス名などをつけなおし、1個1個色を変えたり幅を変えたり設定を変えたりして、ようやく「ここはこれのことか！」「ここを変えるとこれがかわるのか！！」という気づきを得てなんとかサイトを完成させることができました…。
あとでコードだけ見直してもおそらくちんぷんかんぷんなので、逐一ここがこうで、ここはこういう意味で…ってメモしながらやってました。（上記がそのメモ。字が汚い…）
出来上がったサイトはこちら
そんなこんなで出来上がったページがこちらになります。
今まで細切れに勉強して来てわりと理解できた気でしましたが、実際に作ってみると思ったようにいかず（特にfloatに躓いた）わりと「私のプログラミング勉強もここまでか…」って気持ちでいました。見本をコピペして弄り倒してもまったく意味が分からないようなら本気で見切りをつけようと思ってたのですが、3日間かけながらもなんとか完成したので感無量です。
ただ1から自分で作るとなるとまだまだ難しそうなので、もし今後サイトを作らなければいけなくなったら、今回作ったようなパターンをひっぱってきて、そこに内容を当てはめたり若干手を加えながら作っていく方法が一番簡単で失敗が少ないのかな？と思いました。
作ってみて一番感じたのは「最近のサイト作りはめんどくせーなー！！」でした！(笑)昔はスマホやタブレットでホームページを見る事なんてできなかったので、その辺のレイアウト崩れなんて気にしなくてよかったのですが、昨今はそういうわけにもいかずあれこれ設定してあげなきゃいけないので大変だなーとひしひしと感じました。しかも新しいスマホが出るたびに画面の大きさ増えるしね。検証とかしてる人めっちゃ大変だろうなと思いました。
今回floatを理解するのに大分苦しんだんですが、次のロードマップが「８．CSSの神業である「Flexbox」を理解しよう」なので少しだけ楽しみです。というわけで次回からはflexboxの勉強に移りたいと思います！
