2つ目の模写サイトができたので紹介します！

皆さん、こんにちは。

すなです。

今回も「大学卒業までに20万円/月を稼ぐ人の話」のシリーズ第二弾になります。

前回に記事をまだ見ていない方は、こちらをご覧ください。

2つ目のサイト模写が完成！

さて、今回も前回に引き続きサイト模写してポートフォリオを充実させようという話をしたいと思います。

前回制作した模写サイトは、HTMLとCSSのみを用いた簡単なものでした。

今回は第二弾ということで、技術的に少しだけレベルアップしたサイトを作成しました。

写真家のポートフォリオサイト

今回は写真家のポートフォリオサイトを想定したサイトを模写しました。

参考にしたサイトはこちらです。

これも前回と同様に、模写用に練習サイトを集めているこちらのサイトから見つけました。

実際に制作したサイトがこちら

このサイトを参考に僕が模写したサイトがこちらです。

こちらも前回と同様に、本家のサイトと同程度のクオリティを保てたかなと思っています。

所要時間約3時間

今回も体感時間にはなるのですが、所要時間は3時間程度で済んだかなと思います。

時間が大幅に短縮できた要因は、前回の第一弾からすぐに2つ目を制作したので感覚がだいぶ戻ったのと、スキル的には大きくはレベルアップしてないので、それもあると思います。

またレスポンシブ対応も慣れてきて、前回よりも早く作業することができました。

今回も1ページだけ

今回のページ数も1枚のみになりました。

HTML,CSSに少しのjQuery

このサイトで用いているスキルは以下の様になります。

• HTML
• CSS
• jQuery (=JavaScript)

今回のサイトは90%が前回と同様にHTMLとCSSのみで制作できるスキル感になります。

また今回は前回使わなかったJavaScriptを用いました。

ページ上部のメニューボタンを押すと、ページ下部の該当要素に遷移するのですが、その時にJSのanimate関数を用いたスムーススクロールを使用しました。

これでサイトが少し動的になりました(厳密には動的ではありませんが)。

PHPも使いたかった

ページの1番下に連絡を送る用のフォームがあって、こちらは本来PHPを使わないと機能しません。

僕個人は過去にPHPを扱っていたので、この機能自体は作成できるのですが、

• ((居ないとは思いますが)悪意あるユーザーによって不必要に)メールが送信されてしまう
• 使用するスキルを限定したかった

ので、今回はHTMLでフォームだけを作成して、機能面のバックエンドは何もしませんでした。

5万~円程度で受注できたら嬉しい

気持ち程度ですがjQueryを使用しましたし、本来はPHPでメールを送信できる機能も付けれるので、この程度のレベル感なら5万円程度で受注したいところですかね。

作業時間を短くできた

今回の大きな収穫は、作業時間を大幅に短縮できたことです。

これを作るにはなにをどうすればいい、って言うのがすぐにイメージできる様になったのが良かったです。

また使う言語も少しづつ増えてきているので、もっと色んなことをできるようになりたいですね！