コーポレートサイトの構築記録(3)
はじめに
下記コーポレートサイト（スマホ版）のコーディング作業について、続きを記録して いきたいと思います。
※ 作成した順に記載しています。
- 「サービス」ページ
- 「会社概要」ページ
- 「お問い合わせ」ページ
- 「私たちについて」ページ
- 「トップ」ページ
「サービス」ページ
- 画像の縦横の長さがバラバラで、画像が表示される領域のサイズを統一するのに少し 手間取りました。
「会社概要」ページ
- 会社概要のテーブル部分は、デザイン時に想像していたより余白が多いように感じ ました。（デザインとの乖離？）
「お問い合わせ」ページ
- FAQ のところをアコーディオンメニュー風にするところで、JavaScript の記述に少し 苦労しました。
「私たちについて」ページ
- イメージスライダーの JavaScript を記述するところで、苦労しました。
「トップ」ページ
おおよそ、デザイン通りに実装出来たようで良かったと思います。
他の下位ページのパーツを流用する事が出来て、ある程度実装スピードを上げる事が 出来て良かったです。
全体を通して
ヒーローイメージ上にあるページタイトル/メッセージを縦横中央揃えにする箇所で、 flexbox を利用せずにどう記述すべきか分からず悩みました。
⇒ 下記のように記述する事で対応しました。
/* 親要素 */ #header { position: relative; } /* 対象要素 */ .c-page-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
JavaScript について、モジュール化してちゃんと動作するようにするのが多少 難しかったです。
自分の中ではちゃんと考えながらコーディングしていたつもりだったのですが、 徐々に FLOCSS のルールから逸脱する部分が増えてきています。
⇒ 一通りコーディング作業を終えた時点でリファクタリングしたいと考えています。
まとめ
最後に、今回の記事のまとめをしたいと思います。
課題
現状認識している課題を下記表にまとめました。
| 課題 No. | 内容 |
|---|---|
| 01 | フッター内に、リンク先ページが存在しないリンクが記載されている。 |
| 02 | 作業が進むに従って、FLOCSS のルールから逸脱する部分が増えてきている。 |
| 03 | デザインと実装したページとで微妙に乖離している部分がある。 |
反省点
前回の投稿から凄まじく間隔が空いてしまいました。年末年始でちょっと忙しかった のと、ちょくちょく風邪にかかってしまったのが理由です。（それにしても酷いですが）
気づいた点をこまめに記録していなかった為、記事の内容が薄くなってしまいました。
実装作業をしていると、デザインにあわせるよりコーディング上、簡単な方に流れて しまう事がありました。
実装作業を通じて、いくつかの気付き事項がありました。反省すべき点は反省し、次の 作業に生かしていきたいと思います。
最後までご覧頂きありがとうございました。
