背景
先日、無料コーディング練習所 の中級編2に取り組みました。
今回は続編となる中級編3への挑戦です！
課題元 :
webdesigner-go.com
成果物
Webブラウザで見る ※Chrome、Safari対応
fuchsia-84.github.io
本日2時間ほど⏲️ 中級編3レスポンシブおわり！
— ふーしゃ@web (@fuchsia_84) 2023年8月9日
高さ合わせは100dvhで。今回もflex✨要素高さが伸びる現象に出くわしたところalign-selfで解決(初使用)
あとWebP使用やゴミ取り作業がありますがここで一区切り。いざ上級編へ～！#無料コーディング練習所 pic.twitter.com/MefR65yANe
GitHub - fuchsia-84/Planet_Hunters: Webコーディング練習用課題 : Planet Hunters
課題要件以外の実施事項
- リンクhover時のスタイル変更
- OGBの追加
- float使用不可縛り(工数が増大しない程度で)
未実施事項
- WebPの使用(課題元ページ参照)
制作スケジュールと工数
制作期間
2023/8/7 から 8/9 (実働: 3日間)
スケジュールと工数
- 8/7
- 8/8
- ローディング画面追加
- favicon追加
- 音源追加
- Storyセクション画像skew
- 8/9
- PC版コーディング(全体)
- Topセクション高さ合わせ(100dvh追記による)
【全体工数】
合計 11.0h / 約1.4人日
追加実施
- OGP追加
未実施事項
学習事項
- CSS変数 : :rootに定義、var()で使用
- audioの再生/停止 : muted=true/falseでの切り替えはブラウザセキュリティの関係で蹴られる。pause()/play()で実装
- snsリンク設定 : facebookはアプリ設定が必要
- 100vhの高さ合わせ : iOSで下タブにより表示崩れが発生する問題はJavaScriptで解決してきたが、100dvhの新プロパティの追記で対応可能になった
- flexさせた要素の高さが伸びるとき...デフォルトがstretchであることに注意。要素個々にalign-self:flex-startを設定する
参考
- 動くWebデザインアイデア帳 | 動くWebデザインアイディア帳
- CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法 | Webクリエイターボックス
- JavaScriptで音楽や音声を再生する方法【audioタグ】株式会社Lorem
- Flexboxで画像が縦に伸びる(比率がおかしい)時の対処方法！ | 模写修行メディア
- iOS 15.4で追加されたCSS単位「dvh」が高さ100%問題を解決する
今後&おわりに
前回に習い今回もモバイルファーストで取り組み、共通パーツが多くスタイルがまとまっていることからCSS変数も活用してみたところピタリ。 基礎的なスタイルと機能を初日にほぼ書き終えたので合計11時間での制作となりました。
振り返ってみると今回の難所は2つくらいあったでしょうか。
1つは2日目の音源追加にて。muted=true/falseで再生/停止の切り替えを行っていたのを参考に進めたがために書き直しが必要となったとき、問題の解決に加えてgitでリポジトリ操作に苦戦したところ。(resetして強制pushした)
そしてSNSリンクの挿入では特にfacebookの追加にアプリ設定が必要だったこと、スタイルをカスタマイズするには内部構造が複雑すぎた点が特に混乱させられました。
その他は無料コーディング練習所を開始してから知った事項をふんだんに使い、今回はじめて取り組む内容も実際に自分で制作したことでまた一つ引き出しを増やせたように思います。
flexにもだいぶ慣れ、自力で書いてからスタイル調整に問題ある一部を調べて調整する程度くらいにはなった点も収穫でした！
実は今回の中級編3のゲームサイトの外観を初めて課題元ページでみたとき、素敵すぎて惚れ惚れしながら、こんなサイトが自分で作れたらうれしいな・できるのかな～というような、憧れのような気持ちを持っておりました。
形にすることができ、感激しております。
今回も良い学びの機会を与えてくださった無料コーディング練習所 (制作者Twitter : @webdesigner_go) さま に感謝申し上げます。(RTといいねも大変力になりました！)
ついにこの後は上級編に挑戦します！
今回の経験を元に、今後も進めて参ります。
ありがとうございました。
