moshashugyo media

概要

本作品はHello Mentorというメンタリングサービスのスクール課題として制作した、WEBサイト「模写修行メディア」です。

デザインカンプをもとに、トップ・記事詳細・About・Company・Contact・404など複数ページのコーディングを行いました。

本課題からSCSSを導入し、スクール提供のファイル分割ルールに沿って、共通パーツのコンポーネント化を行いながら制作しました。

ページ数の多いサイトを題材なので、SCSSを使ったファイル分割・コンポーネント化を実践しながら、効率よく制作を進める力を身につけることを目的に取り組みました。

SCSSの導入とファイル分割

SCSSを使い、スクール提供の分割ルールに沿って管理しました。ページ数が多くても見通しが悪くならないよう、役割ごとに整理して記述しました。
先にコンポーネント化してから実装

ボタン・ラベル・記事カード・CTAなど共通パーツを先にコンポーネント化し、後工程の修正や追加がスムーズになるようにしました。
picture要素でのレスポンシブ画像

それまでCSSで表示切替（display: none）をしていましたが、picture要素を用いて端末ごとに適切な画像を出し分け、不要な読み込みを避ける方法を学びました。
フォームのセマンティックなマークアップ

labelとinputの紐付けなど、適切なタグ選定を意識してフォームを実装しました。見た目だけでなく使いやすさの土台になる部分を学べました。

ページ数が多い制作では、実装を始める前に共通パーツを整理してコンポーネント化しておくことが、結果的に最短ルートになると実感しました。

また、SCSSのファイル分割によって「どこに何を書くべきか」を意識できるようになり、後から見返しても修正箇所を追いやすい構成を作れるようになりました。

画像の出し分けやフォームのマークアップなど、実務で頻出する要素もこの課題で初めて一通り経験できました。

HTML / CSS / SCSS / VS code / Figma