ポートフォリオサイト

FLOCSSの勉強をするために作ったポートフォリオです。レスポンシブ対応済み。ブレークポイントはPC、タブレット、スマートフォンの三段階で、最小画面サイズは320pxです。単純に今まで作った作品を掲載すだけだと味気ないため、これまでの主な業務内容も掲載し、職務履歴書を兼ねるような形にしました。

使用言語

このポートフォリオとは別に作成したWordPressのオリジナルテーマと色味を似せ、統一感を持った作りにしています。

フォントサイズについては、16pxを基準とし、ジャンプ率を白銀比（1.414）に設定しました。理由としては、デザインにメリハリを効かせつつも黄金比では日本語フォントが大きくなりすぎてしまうため、バランスを取る形で採用しました。

各種marginやpaddingサイズは基本的に8の倍数で取るようにしています。これは、画面サイズが8の倍数で設計されているため、それとの親和性をもたせる狙いがあります。

今回、CSSのコーディング規約としてFLOCSSを採用しました。書籍やネットで調べた上での自己流のため、おそらく正しくない部分もあるかと思います。（誰かコードレビューして欲しい…）

感想としては、保守性は上がった感じはしますが、命名規則にあやふやな部分があったり、productとcomponentがごちゃごっちゃだったり、まだまだ慣れが必要だと感じました。