ふーしゃのWeb制作ブログ

元SEアラサー女がWeb制作についての学習をシェアするブログです。

【Webコーディング】無料コーディング練習所 中級編 3 : 架空ゲームの公式サイト

Webコーディング Figma HTML CSS JavaScript

背景

先日、無料コーディング練習所 の中級編2に取り組みました。

fuchsia-84.hatenablog.com

今回は続編となる中級編3への挑戦です！

課題元 :
webdesigner-go.com

成果物

Planet Huntersレスポンシブ確認画像

Webブラウザで見る ※Chrome、Safari対応
fuchsia-84.github.io

GitHub - fuchsia-84/Planet_Hunters: Webコーディング練習用課題 : Planet Hunters

課題要件以外の実施事項

  • リンクhover時のスタイル変更
  • OGBの追加
  • float使用不可縛り(工数が増大しない程度で)

未実施事項

  • WebPの使用(課題元ページ参照)

制作スケジュールと工数

制作期間

2023/8/7 から 8/9 (実働: 3日間)

スケジュールと工数

  • 8/7
    • Figmaカンプからアセット書き出し
    • SP版コーディング(全体)
    • 残り:
      • ローディング画面追加
      • favicon追加
      • 音源追加
      • Storyセクション画像skew
  • 8/8
    • ローディング画面追加
    • favicon追加
    • 音源追加
    • Storyセクション画像skew
  • 8/9
    • PC版コーディング(全体)
    • Topセクション高さ合わせ(100dvh追記による)

【全体工数】
合計 11.0h / 約1.4人日

追加実施

  • OGP追加

未実施事項

  • Chrome/Safari以外のブラウザ対応
  • 日本語以外の対応
  • WebPによる軽量化

学習事項

  • CSS変数 : :rootに定義、var()で使用
  • audioの再生/停止 : muted=true/falseでの切り替えはブラウザセキュリティの関係で蹴られる。pause()/play()で実装
  • snsリンク設定 : facebookはアプリ設定が必要
  • 100vhの高さ合わせ : iOSで下タブにより表示崩れが発生する問題はJavaScriptで解決してきたが、100dvhの新プロパティの追記で対応可能になった
  • flexさせた要素の高さが伸びるとき...デフォルトがstretchであることに注意。要素個々にalign-self:flex-startを設定する

参考

今後&おわりに

前回に習い今回もモバイルファーストで取り組み、共通パーツが多くスタイルがまとまっていることからCSS変数も活用してみたところピタリ。 基礎的なスタイルと機能を初日にほぼ書き終えたので合計11時間での制作となりました。

振り返ってみると今回の難所は2つくらいあったでしょうか。
1つは2日目の音源追加にて。muted=true/falseで再生/停止の切り替えを行っていたのを参考に進めたがために書き直しが必要となったとき、問題の解決に加えてgitでリポジトリ操作に苦戦したところ。(resetして強制pushした)
そしてSNSリンクの挿入では特にfacebookの追加にアプリ設定が必要だったこと、スタイルをカスタマイズするには内部構造が複雑すぎた点が特に混乱させられました。

その他は無料コーディング練習所を開始してから知った事項をふんだんに使い、今回はじめて取り組む内容も実際に自分で制作したことでまた一つ引き出しを増やせたように思います。

flexにもだいぶ慣れ、自力で書いてからスタイル調整に問題ある一部を調べて調整する程度くらいにはなった点も収穫でした！

実は今回の中級編3のゲームサイトの外観を初めて課題元ページでみたとき、素敵すぎて惚れ惚れしながら、こんなサイトが自分で作れたらうれしいな・できるのかな～というような、憧れのような気持ちを持っておりました。
形にすることができ、感激しております。

今回も良い学びの機会を与えてくださった無料コーディング練習所 (制作者Twitter : @webdesigner_go) さま に感謝申し上げます。(RTといいねも大変力になりました！)

ついにこの後は上級編に挑戦します！

今回の経験を元に、今後も進めて参ります。

ありがとうございました。