ポートフォリオサイト

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

使用言語

• HTML
• CSS
  • プリプロセッサ：sass(scss記法を使用)
  • タスクランナー：gulp.js
  • FLOCSSを採用
• javascript

デザインツール

• Adobe XD

開発環境

• Visual Studio Code

開発工数

工程	所要工数
デザインカンプ作成	8H
コーディング	20H
合計	28H

こだわり

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

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

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

FLOCSSを採用してみて

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

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