この記事ではデイトラWeb制作コースでの学習記録、感想やつまずいた点などをご紹介します。
参考になりましたら幸いです。
前回の「実践！サイト制作編 vol.4 卒業制作①」はこちら。
今回は卒業制作２つ目。
前回と比べて進歩はあったでしょうか…？
課題は「カフェHP」
２番目の課題として選んだのは「Open Cafe」です。
アットホームな温かい印象のHPです。
オシャレな上、使われているパスタやコーヒーの写真が美味しそうで…
作業中は食欲が増していた気がします。笑
下層ページは前回より１ページ多い12ページでした。
かかった時間は？
今回かかった時間は17日間（途中作業できなかった日は除く）。
時間にして61時間でした。
前回は19日間・時間は85時間かかっていたので、作業時間約３割減となりました！
24時間も短縮に成功！
ただ今回も目標の2週間には届かず…
次回、提出する課題では2週間での完成を目指します。
良かった点
Scssのパーツ分けを細かくし保守性アップ
前回Scssでパーツ分けをしたのは2ページ以上で使用するパーツのみとしていましたが、今回はよりパーツ分けを細かくしてみました。
同時にstyle.scssにする記述は最小限にしその分パーツ分けファイルを増やしたので、最終的にパーツファイルが分かれていたのはこんな感じ。
- header
- footer
- page-top
- firstview
- pager
- related（関連記事）
- sidebar
- sns（ボタン）
- swiper
これらはPHPファイルでも切り離していたりするので、ページの一部ではなくパーツで管理する方が管理が楽でした。
正解かどうかはわかりませんが…！
Scssの設計を学べる書籍はあるのかな。
フロントページは後回しにした方が精神的に楽だった
前回はフロントページから1ページずつ進めていったので苦しみが大きかったのですが（笑）、
今回は共通パーツ→固定ページ→フロントページの順番でコーディングを始めました。
フロントページは他ページの何倍も量があるので比較的ライトなページから始められること、更に固定ページで使用したパーツをフロントページで使い回せることで、精神的にも時間的にも前回よりゆとりがありました。
この順番が私にはぴったりだったようで、前回より楽に作業が進められました。
Swiper克服か
フロントページのスライダーは今回Swiperで実装してみました。
拡大しながらフェードアウト/インするようなものでしたが、希望通りの動きのスライダーの作り方を見つけることができたのでサクッとできました。
こちらのサイトはdemoも用意されており大変分かりやすかったです。
Local Historyでバックアップを取っておく
もしもの為に〜と、「Local History」という自動でバックアップを取ってくれるプラグインを事前に入れておきました。
標準でもあるようなのですが…一応プラグインを入れてたんです。
そうしたら、「もしも」の時が来てしまったんですよね…
急にコンパイルエラーが起こり、見たことないエラー。
しかもエラーの場所が書いてない。
心当たりあるファイルを色々いじっても全然ダメで。
翌日Local Historyで戻してみよう！と思い、前日の最初の方の内容に戻したところ、見事エラーは無くなりました。
ありがとうLocal History。
反省点・次回への課題
CSS設計規則を絞る
CSS設計は前回よりは上手くいったものの、どの規則を使うか決めずに自己流でやってしまいました。
デイトラ実務編に「CSS設計」のTipsが追加されたとのことで、卒業制作③に取り掛かる前に学習します！
TipsではFLOCSSが紹介されるようなので、FLOCSSで挑戦したいなと思っています。
フォントサイズなどを相対値で設定してみる
書籍「CSS設計完全ガイド」では、フォントサイズがほとんどの場合相対値で設定されていました。
例えばスマホなどで文字を大きく表示する設定にしているユーザーにとって、Webページで絶対値で設定された文字は小さいんですよね。
そこで相対値にしておくことで、あらゆるユーザーにとって使いやすいWebサイトに近づくとのこと。
今まで特に何も考えずpxで指定していましたが、不特定多数のユーザーが見るWebサイトにはこのような視点は欠かせないと思いました。
ユーザーに寄り添ったCSS設計ができるようになりたいな。
Flexプロパティを使えるように
未だ使えていないな〜と思うプロパティ第一位は「Flex」。
display: flex; はめちゃくちゃ使うのに、flexを全然使えていない…
flexプロパティとは、flex-grow, flex-shrink, flex-basisのショートハンド。
よくソースコードで「flex: 1; 」という記述が使われていますね。
親要素いっぱいに広げたい・小要素の幅を相対値で指定したい時には使ってみようかなと思います。
まとめ
結果、完成までの時間の大幅短縮に成功しました。
目標の2週間には届きませんでしたが、最後の卒業制作では達成できるよう頑張ります！
今後ですが、
- 実務編学習
- 卒業制作③
- ポートフォリオ作成
と進めていこうと考えております♪
明日からの実務編楽しみ！！
次回は「営業 / 転職編」をレポートします！
コメント