模写コーディングに挑戦してみたら思ったより大変だった話

はじめに

模写コーディングに挑戦してみました。

モデルにさせていただいたのはAirbnbの以下のページ。模写コーディングのおすすめサイトとしてよく紹介されているページです。

スクリーンショット

学んだこと

模写コーディングをしていて「初めからこうしておけばよかった」と思うことが多々ありました。

次回以降、同じ後悔をしないために、コーディングを始めるにあたって頭に入れておいたほうがいいことを記録しておきます。

スタイルはパーツごとに定義

基本的にスタイルはパーツごとに定義したほうがいいかなと思いました。

似たようなパーツでも微妙に余白が違うということがあったので、スタイルの流用は避けたほうがいいのかなと思いました。

CSSファイルはエリアごとに分割

パーツごとにスタイルを定義していくと膨大な量のスタイルになってしまいます。

ひとつのCSSファイルにずらーっとスタイルが並んでいると可読性とメンテナンス性が落ちてしまいます。

そうならないために、エリアごとにCSSファイルを作るとか、適切なコメントを入れるとか、きれいに保つための工夫をする必要があると思いました。

Bootstrapは積極的に使う

今回、脱・Bootstrapをしようかとも思いましたが、そもそもBootstrapを使うことのデメリットはあまりないし、使って得られるメリットのほうが格段に多いので、今後もBootstrapは積極的に使っていくことにしました。

まとめ

私はウェブデザインに関してド素人なので的はずれなことを書いているかもしれません。

本当はもっといろいろと学ぶことはあったはずなんですが、うまく言葉にできずに書けなかったこともあります(それくらいド素人だと思ってください)。

ウェブデザインに関してはこれからも「下手の横好き」というスタンスで触れていこうと思います。