【制作備忘録】ポートフォリオサイト編／レイアウト #1

今日から本格的に営業や転職活動でも使えるポートフォリオサイトの制作をはじめようと思い、タイトルにも書いている通り制作物の過程を記録していこうと思います。

理由としては、悩んだことなどを忘れないように記録していきたいというのとインプットとアウトプットが効率よくできると思ったからです。

ポートフォリオサイト編ではHTML/CSS/Sass/jQuery言語を使って制作していきます。

また、この記録が僕と同じような初心者の方々にもお役立てれば嬉しいです。

ポートフォリオサイト編／レイアウト #1

制作するポートフォリオサイトはデザインや項目などはなるべくシンプルに仕上げレスポンシブ対応は必須として見やすいサイトを意識して作っていきます。

サイトに載せる項目としては、

・About（自己紹介）
・Works（できるスキルの内容）
・Contact（問合せフォーム）

本当はもう一つ「制作実績」が欲しいのですが、こちら実際に制作物が増えてから追加していく予定です。

冒頭でも言いましたが、今回は以下4種類の言語を使用して制作していきます。

・HTML
・CSS
・Sass
・jQuery

今回は主にSass／jQueryのスキルアップに繋がればいいなと思っています。jQueryもどこまで動きを付けれるかは分かりませんができる範囲で完成させていきたいです。

ポートフォリオサイトのコーディングで意識したいことは、インデントやフォルダ分けなどをしっかり行い見やすくしていきたいです。

ちづみさん（@098ra0209）のnote課題「コーディングの練習をしよう〜その２〜」で模写コーディングを挑戦したときにインデントを整理しないで書いていると修正するのに大変な思いをしたからです。

ポートフォリオサイトも今後アップデートしていきたいと思っているのでコメントアウトなども使いながら後で修正がしやすいようにキレイに仕上げていきます。

Sassのフォルダ分けなども行っていきたいので、はにわまんさん（@haniwa008）の記事「Sassを使うメリットとよく使う機能を５つだけ厳選！」を参考しながら作っていこうと思います。

最初からレスポンシブ対応を心がけてコーディングしていかないとレスポンシブ対応が難しいということを模写コーディングで気付かされました。

柔軟なレスポンシブ対応ができるように、はにわまんさん（@haniwa008）の記事「レイアウトの基本である.innerの中央寄せを覚えよう！」で書かれている「.inner」を参考にしてみたいと思います。

今後は、コーディングするときに悩んだところや途中経過の画像を貼り付けて記録して行けたらなと思っています。

本業の合間時間に制作していくので完成までは少し時間がかかりそうですが、ゆっくりと制作していきます。