2019-01-06CSSとJavascriptでシンプルなポートフォリオサイトを作ったので、作った過程をまとめておこうと思います。完成したサイトはこちら。YukiソースコードはGithub上で公開してます。GithubスポンサーリンクもくじトップページのアニメーションJavacriptでイベントリスナーの実装CSSのflexによるレスポンシブ対応まとめ参考トップページのアニメーションまずは今回のポートフォリオサイトの一番のお気に入りであるトップページについて。ポートフォリオサイトのトップページ、だんだん夜になってくイメージで作ったのだけど、とても気に入っている。名前と季節感を合わせて、背景で雪が降るアニメーションになっています。朝から夜になっていくような演出になっているのもお気に入りポイント。こちらのアニメーションは、背景画像とCSSで実装されています。参考にしたのはこちら。このSnowEffectというサイトのコードをほとんどそのままいただきました。自分で変更したのは、背景色が朝から夜に代わっていく部分のみです。このアニメーションは、三枚の雪の画像を背景として重ねて、それぞれを動かすことによって作られています。ちなみにCSSのコードはこちら。}まだあまり使いこなせてはいないのですが、CSSのアニメーションで背景画像の位置を少しずつ動かして雪が降るのを実装してます。雪のオブジェクトを作ってJavascriptで動かす方法も考えたのですが、CSSのアニメーションってJavascriptと比べてどうなんでしょう?やっぱり軽量なんでしょうか。Javacriptでイベントリスナーの実装WEBページ上で、ユーザーのアクションに合わせて処理を実行したい時、イベントリスナーを実装する必要があります。今回は、Javascriptで三つのイベントリスナーを用意しました。}</items.length;>itemというページ上の要素に対して、items[i].addEventListener()でイベントリスナーを設定しています。イベントリスナーの実装は思ったより簡単ですね。Javascriptで要素を自由に動かせるようになってくると、実装の幅が広がって面白いなと思います。今回は脱bootstrapということで、レスポンシブ対応に関しても、自作のCSSのみで実装することにしました。いえ、最近流行りのflexboxを使用したことで、bootstrapなしでも簡単にグリッドレイアウトを実装できました!すごく使いやすかったです。flexboxについては、僕が解説するより、もっとわかりやすくまとまっている参考サイトのリンクを貼っておきます。Flexboxのチートシートまとめこの記事を書いている2019年の1月現在、僕は絶賛ニートの真っ最中です。12月にこれまでの小売の職を辞め、2月からエンジニアになります。ニートなので収入はなく、残高は減っていく一方です。そんな状況から抜け出すため、コーディングの仕事をすべく、ポートフォリオサイトを作成しました。一日二日でつくったような簡素なページなので、これからもっと育てていこうと思います。コメントをキャンセルメールアドレスが公開されることはありません。千葉県を中心にボランティア活動や勉強会などを行っています。好きな言語はC#とPythonとC++です。関係の技術が好きです。XamarinとかTypeScriptも触ってます。質問・相談・お仕事のご依頼は、Twitterまたは問い合わせフォームまで。今月の人気記事1一年間プログラミングを独学した過程を振り返ってわかったこと。