HTMLとCSSを書いてレスポンシブ対応のTwitterのトレースをやってみた！！

2019年9月17日 02:50

今回はHTMLとCSSを書いてトレースをしたことで、できるようになった事と今後の課題をあげておこうと思いNoteを書くことにしました。

トレースの方法

デベロッパーツールを使って、HTMLとCSSがどのように書かれているのかを分析。
その後、色々と調べながらコードを書いていきました。
また、GitHubも使いながらやりました。

HTMLとCSSを書いてトレースをしてよかったこと

-UIトレースをしていた時に言われていた ”箱” をより意識できるようになった。
-レスポンシブのデザインがつかめてきた。
-今まで自分がUIデザインしていた時に、HTMLとCSSを書くことを全く意識できていなかった事に気が付けた。
-HTMLとCSSでやりたいことを調べられるようになった。
-調べながらではあるが、HTMLとCSSであればしたい事をできるようになった。
-GitHubでブランチを切ったり、プルリクを出したりちょっとずつ使い方に慣れることができた。

今後の課題

-トレース作品のbackgroundに挿入した画像の動作が見本と違うのが解決できなかったので原因を探る。
-BEMを勉強する。
-もっときれいなコードを書けるようになる。
-position: relative;とposition: absolute;を使いこなせる様になる。
-beforeとafterを使えるようになる。
-JavaScriptとJavaScriptのライブラリーのjQueryを学ぶ。

まとめ

HTMLとCSSのトレースをしてまっさらな状態からコードを書けるようになったのは大きなことだと思う。
何回もコードを書き直すうちに、コードを書くスピードもあがっていったのでやりきって本当に良かった。
次なる課題も明確になったので学習を進めて行きたい。