WEBサイトの「模写コーディング」課題をやってみた

最近はフロントエンドプログラミングの勉強をしています。フロントエンドプログラミングというのは、超簡単に言えば「WEBサイトの見た目」をつくるプログラミングのことです。

今回は、フリーランスでWeb制作をされている、ちづみさん（@098ra0209） が制作されたこちらの教材を紹介します。

用意されたデザインデータをもとに1ページのWebページをコーディングするという課題です。プログラミング学習サイトの「Progate」が終わって基礎は押さえることができたので、今の自分の実力を確認するのに良さそう！と思いまして、早速購入しチャレンジしてみました！

課題を通してつくったもの

今回購入した課題は、お値段はワンコイン500円！（売り上げは台風21号、北海道胆振東部地震に全額寄付するとのこと！）10月5日まで公開されているそうなので、Progate終えて次何しよう？と迷ってる方は是非トライしてみてください。

完成した制作物はこちら

https://twitter.com/khattori89/status/1042783736197079040

制作にかかった時間は約6時間、期間としては2日かかりました。上記ツイートにもあるように、ちょっとゴリ押しでコーディングした部分があるので、これから経験を積みつつ、復習しつつ、スキルアップに励んでいきたいと思います。

今回の制作を通して学んだこと

今回の制作を通してやったこと、学んだことを書いておきます。

テンプレートファイルを用意しておくと効率が良い

過去にも書籍等を使ってHTMLやCSSの学習をしていたことがあって、その際の経験をもとに、ベースとなるフォルダ構成とファイルをつくってから制作に取り組みました。

▼こんな感じで、基本となるフォルダ構成を事前につくっておきました

ベースとなるindex.html、基本スタイルを定義したstyle.css、ブラウザ固有のスタイルを打ち消すreset.cssを作り、これらのファイルに追記する形で制作しました。ベースがあることでスムーズに制作に着手でき、フォルダごとコピーすれば今後の制作にも使いまわすこともできます。

ご参考に、コードを貼り付けておきます！

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>基本テンプレート</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
  </body>
</html>

style.css

@charset "UTF-8";

html {
  font-size: 62.5%
}
body {
  color: #333;
  font-size: 1.2rem;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
*, *::before, *::after {
  box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
  color: #d03c56;
  text-decoration: none;
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

reset.css

以下のサイトのものを使用しました。

https://meyerweb.com/eric/tools/css/reset/

全体の構築→細部の調整の順で制作した

最初にヘッダー部分つくって、次にタイトル部分つくって、次にコンテンツ部分つくって......のように、ページの上から順番につくるのではなく、全体の骨組みを一気につくってから、細部のデザインを調整する流れで制作しました。

個人的にはこのスタイルが良いと思っていて、全体を先につくることで

共通のCSSが全体に適用されてるかコーディングできる
全体のバランスが崩れていないか確認しながらコーディングできる
行き詰まった時に後回しにして他の部分のコーディングができる
全体が先に完成すると気分がいい(*´▽｀*)

といったメリットがあります。

僕の経験上、コーディングに行き詰まったらウンウン唸って粘り続けるより、茶でも飲んだりポケモンのアニメ見たりして時間を置いてから再チャレンジすると不思議なことに解決したりします。全体をつくっておけば、行き詰まった時に他の部分を実装することができるので、手が止まりにくく、精神衛生上も良さげです( ´艸｀)

わからないことは「頭の引き出し」をもとに調べる

当然、途中でわからないことがたくさん出てくるので、そんなときはググるわけですが、生産性を左右するのは「正確な知識」ではなく「なんとなく覚えている」ことだと思いました。

もちろんわからないことが無いくらいたくさんの知識を覚えておくに越したことはないのですが、全てのことを覚えておくのはムリです。

ですが、「どっかで読んだ記事に垂直中央寄せにする方法書いてあった気がする」とか「Progateでやった気がする」のように”なんとなく”覚えてさえいれば、答えに早くたどり着ける可能性があがるんですよね。

例えば今回の制作では、「Webクリエイターズボックス」のとある記事を思い出して答えが見つかりました。日頃から、目を通すだけでもいろんな情報に触れておくことが大事ですね。

おわりに

改めて、素晴らしい教材を提供していただき、ちづみさん（@098ra0209）ありがとうございました！

次はProgateとドットインストールでPHP、WordPress、Bootstrapあたりの基礎を学びつつ、WEB制作とはジャンルが違いますが、Kohei Tanakaさん（@kolife01）の「WEB会議システムをつくるチュートリアル」をやってみようと考えています。

【初学者でも出来る！】FirebaseとAPIでWEB会議システムを作ってみよう

最後までお読みいただきありがとうございましたヾ(´￢｀)ﾉ

Tatehito's Programming Blog

現役プログラマがITっぽいネタを書いてアウトプット欲を満たすブログ