初芝鉄工所様

Basic認証

ユーザー名：works
パスワード：test

サイトについて

架空のコーポレートサイトをコーディングするスクール課題です。
XDでデザインカンプが用意されており、デザインカンプを見ながらコーディングしました。
コードの答えはなく自力で作成しています。
このサイトはSCSSで、構造はFLOCSSをベースにし、メインビジュアルはスライダー、サイトに訪れる際にトップページの画面をローディングにするという条件があったので、それに従ってコーディングしています。
デザインカンプに『会社概要』の下層ページのデザインがなかったので、会社概要の下層ページは作成していません。
デザインがないページは、404ページにリンクするようにしています。

制作期間

コーディング：14日
WordPress化：2日

制作範囲

コーディング

使用ツール

VS Code/WordPress

使用言語

HTML/SCSS/Java Script/PHP

コーディングで意識したところ

今までGitを勉強したことがなかったので、作業前にコーディングデータをコピペして毎回バックアップを取っていたのですが、今回はGitの勉強をして、初めてGitでデータのバージョン管理をしました。
細かくコミットすることを意識したり、Githubとも連携をして、Githubへコーディングデータをプッシュする練習もしました。

他には今回の課題サイトでCSS設計を意識して、コーディングをしました。
まず初めにコンポーネントのページを用意してデザインデータからコンポーネントになりそうなものを取り出して設計しました。
コンポーネントページのリンクはこちら
そして、トップページや下層ページのコーディングをする際に特に余白をどの場所につけるかを意識してコーディングしました。
今まで見た目を再現すればいいという考えで、余白の場所はあまり気にせずに付けいました。
しかしBEMベースのCSS設計はBlockには他でも使い回す独立したコンポーネントである必要があり、Blockには原則marginを付けてはいけないことを知りました。
それを知ってから、今回の課題サイトでは、marginは常に親BlockのElementに対して設定することをできる限り守り、Block自体の独立性や流用性を守りながら、コーディングを進めました。

WordPress化にあたって意識したことは、smart custom fieldsというプラグインを使用して、固定ページの、後に修正が入りそうな文字や写真をWordPressの管理画面から修正できるようにしています。
また、お知らせの投稿個別ページでは、ブロックエディターでh2からh4までの見出しや文章を入力するとCSSのスタイルが当たるように作成しています。
そしてお知らせの投稿個別ページの下に関連記事のセクションがあるのですが、同じカテゴリーの記事をランダムで6つまでプラグインを使用せずに出力できるようにしています。