コーポレートサイトの構築記録(5)
はじめに
コーポレートサイトのコーディング作業について、続きを記録していきたいと思います。
PC 版画面の作成 - 「私たちについて」ページ
前回から引き続き、「私たちについて」ページの作成作業を行いました。
ヘッダーのメニュー部分
メニュー部分がモバイル版のページでしか、表示されない状態だったので修正しました。
メニュー名の垂直位置が同じになるよう調整するのに苦労しました。
メニューの表示についての不具合
PC 上で Web ページを利用している時に、モバイル版表示状態でメニューを表示したまま 横幅を広げていくと下記の状態となる不具合が見つかりました。
再度ページの読み込みを行うと通常の表示になる事は確認出来たものの、不具合を根本的 に解決する方法が分からなかった為、今後の課題として引き続き調査・考察する事として 今は、作業を先に進める事にします。
カルーセルイメージ
各画像の横幅が小さく、横幅の変更に伴い自動でサイズ変更されない状態になっていた為、 修正しました。
画像のサイズを横幅に併せて変更されるようにする方法が分からず、散々悩みました。 width や max-width を 100% にしたりしていましたが、結局 min-width: 100% にする 事で解決出来ました。
参考にした youtube 動画を何度も見返したり、コメント欄を注意深く読んでみたりして めちゃめちゃ時間が掛かりました。
修正後の全体像
デザインに合致するように、モバイル版・PC 版、ついでにタブレットサイズの改修を行い 最終的に下記のようになりました。
まとめ
最後に、今回の記事のまとめをしたいと思います。
課題
プロジェクト全体の課題を表にまとめました。
| 課題 No. | 内容 |
|---|---|
| 01 | フッター内に、リンク先ページが存在しないリンクが記載されている。 |
| 02 | 作業が進むに従い、FLOCSS のルールから逸脱する部分が増加している。 |
| 03 | デザインと実装したページとで微妙に乖離している部分がある。 |
| 04 | PC 利用時、モバイル版表示 ⇒ メニュー表示 ⇒ サイズ変更で表示崩れる。 |
修正予定箇所
PC 版の表示にする為に、修正する予定の箇所をまとめました。
| 対象箇所 | 修正内容の概要 | 備考 |
|---|---|---|
| 全体 | ヘッダーのグロナビが表示されていない。 | 改修途中 |
| フッターのグロナビに企業情報が表示されていない。 | 改修途中 | |
| レスポンシブイメージに対応出来ていない。 | 改修途中 | |
| トップ | ページ全体のフォントサイズがデザインと合致しない。 | |
| リンクボタンの横幅がデザインと合致しない。 | ||
| サービスセクションの画像の高さが不統一。 | ||
| サービスセクションのテキストが不足している。 | ||
| ニュースセクションのレイアウトがデザインと合致しない。 | ||
| 制作実績セクションのカルーセルイメージのサイズが小さい。 | ||
| ユーザーの声セクションのレイアウトがデザインと合致しない。 | ||
| 私たちについて | セクションのタイトルの大きさがデザインと合致しない。 | 改修済み |
| カルーセルイメージのサイズが小さい。 | 改修済み | |
| 文章の間隔がデザインと合致しない。 | 改修済み | |
| サービス | 画像サイズが大きすぎる。 | |
| 画像と文章の並びがデザインと合致しない。 | ||
| ニュース | タイトルのフォントサイズがデザインと合致しない。 | |
| ニュースの本文が足りない。 | ||
| 画像の縦横サイズがデザインと合致しない。 | ||
| 会社概要 | ヘッダーのページタイトルがデザインと合致しない。 | |
| セクション全体のフォントサイズがデザインと合致しない。 | ||
| お問い合わせ | セクション全体のフォントサイズがデザインと合致しない。 | |
| テキストエリアの行数がデザインと合致しない。 |
おわりに
「私たちについて」ページの PC 版画面作成・改修作業が一旦終わりました。次も 「私たちについて」ページと同じく下位ページの PC 版画面作成・改修作業を行います。
最後までご覧頂きありがとうございました。
