- 制作課題
- コーディング
- 架空サイト
写真家PFサイト 制作課題
メンタリングサービス「Hello Mentor」の課題として制作。 デザインカンプをもとにHTML/CSSで実装しました。
Works
制作実績
「Hello Mentor」制作課題Suppleカフェ
メンタリングサービス「Hello Mentor」の課題として制作。 デザインカンプをもとにHTML/CSSで実装し、レビューを受けながら改善をおこないました。
活用サービス 「Hello Mentor」
About
制作概要
- デザイン
- 配布されるFigmaデザインカンプをもとに実装
- コーディング
- 拡張機能「PerfectPixel」を用いたピクセルパーフェクトでのコーディング
- レスポンシブ
- 中間サイズはデザインカンプ無しのため、デザイン意図を汲み取りながら調整
Point
意識したポイント
BEMやFLOCSSを活用したCSS設計
BEMやFLOCSSを活用し、保守性・再利用性を意識したCSS設計をおこないました。 ボタンやセクションタイトルなどの共通パーツはコンポーネント化して管理し、効率的に再利用できる構成としています。 また、クラス設計を整理することで、修正や機能追加にも対応しやすい構成を心掛けました。
スマートフォン/タブレット/PC 表示のレスポンシブ対応
スマートフォン・タブレット・PCそれぞれの表示を考慮し、閲覧環境に応じて最適なレイアウトとなるようレスポンシブ対応をおこないました。
ピクセルパーフェクトでのコーディング
デザインカンプの余白やサイズ、配置を細部まで確認し、デザインの再現性を意識したピクセルパーフェクトでのコーディングをおこないました。
positionを活用したレイアウト
デザインカンプの意図を再現するため、positionを活用して画像やテキストの重なりを実装しました。 また、見た目の再現性だけでなく、保守性も考慮したコーディングを意識しています。
