プロジェクト概要
制作ポイント
FLOCSSをベースとしたCSS設計を採用し、Layout / Project / Componentに役割を分けてスタイルを管理しました。 SCSSでは変数やmixinを活用し、カラーやブレイクポイントを整理することで、保守性を意識したスタイル設計を行っています。 また、JavaScript / jQueryを使用し、ハンバーガーメニュー・ドロップダウンナビゲーション・モーダル・アコーディオン・Swiperによるスライダーなど、実際の企業サイトでもよく使用されるインタラクションを実装しました。
課題と解決
レスポンシブ対応を進める中で、スタイルの影響範囲が広がりレイアウトが崩れてしまう点が課題でした。 そこでFLOCSSのルールに沿ってクラス設計を整理し、スタイルの責務を明確に分けることで、影響範囲をコントロールできる構造に改善しました。 また、SCSSの変数やmixinを活用することで、スタイルの再利用性を高め、可読性と保守性を意識したコード構造を実装しています。
