【Webコーディング】無料コーディング練習所 中級編 2 : 英会話とパーソナルトレーニングジムのサイト

背景

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

fuchsia-84.hatenablog.com

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

課題元 :
webdesigner-go.com

成果物

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

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

#無料コーディング練習所 中級編2の4・5日目🌟昨日6時間ときょう1時間でPC版。全体合計は24時間⏲️
これまでfloat marginしてたところをdisplay girdにしたのが今回のハイライト(この点は解答例をみて書き直しました😅)
このあと中級編3にすすみますー！デモサイト素敵だったので楽しみすぎる✨👽🛸 pic.twitter.com/Te3aoxFBhK

— ふーしゃ@web (@fuchsia_84) 2023年8月2日

課題要件以外の実施事項

• Priceセクションのスクロールバーをカスタム
• OGBの追加
• float使用不可縛り(工数が増大しない程度で)

制作スケジュールと工数

制作期間

2023/7/25 から 8/2 (実働: 5日間)

スケジュールと工数

• 7/25

  • XDカンプから画像出力
  • ヘッダ等のコンテンツ以外のタグ記述
  • ファイル構成
  • リセットCSSを適用
  • Google Fontsを適用
  • Font Awesomeを適用
  • Studioセクション以外の全コンテンツ記述
  • 共通のボタンスタイル SP版
  • 共通波型セクション境界 SP版
  • Bottomセクション SP版　完成
  • FAQセクションのアコーディオンメニュー機能作成

• 7/26

  • 共通セクションタイトル SP版
  • Swiperでスライダー作成
  • 共通フェードアップアニメーション 作成
  • ヘッダーにfixed時のスタイルとアニメーション追加
  • ヘッダー、About、Studio、Bottomセクション SP版　完成
  • 【SP版: 4/9 セクション 完成】

• 7/27

  • Topセクションの文字と背景にアニメーション追加
  • Trainerセクション タブメニュー作成
  • Top、Trainer、Price、FAQセクション、フッター、ページトップボタン SP版 完成
  • 【SP版: 10/10 セクション 完成】

• 8/1

  • 全体のPC版スタイルを調整
  • Trainerセクション/Priceセクションにてfloat使用からdisplay grid使用に修正(解答例より)
  • ヘッダー、Studioセクション、ページトップボタン PC版 完成
  • 【PC版: 3/10 セクション 完成】

• 8/2

  • Favicon追加
  • Topのテキスト位置のずれを修正
  • Aboutコンテンツが画面大時上昇する問題を修正
  • Trainerコンテンツ要素の高さを同一に修正
  • Priceセクション内、おすすめアイコン追加
  • Bottomセクション内のボタンのみフォント変更
  • Bottomセクション画像をpictureタグ使用に変更してSP版とPC版で画像の入替
  • メイン画像にフェードアップアニメーション追加
  • Top、About、Trainer、Price、FAQ、Bottomセクション、フッター PC版 完成
  • 【PC版: 10/10 セクション 完成】

【全体工数】
合計 24.0h / 3人日

追加実施

• 8/2
  • OGP追加

未実施事項

• Chrome/Safari以外のブラウザ対応

学習事項

• タブメニュー、アコーディオンメニュー、文字背景が伸びるアニメーションを初実装... を応用
• 画面全体に横並びはdisplay grid ... 例 : 横並び3つ repeat(3, 1fr)、余白指定はcolumn-gap
• モバイルファーストで記述 ... メディアクエリにてmin-widthを使って記述
• SP/PCで画像切り替え ... pictureタグで記述。
• Swiperカスタマイズ: ボタン等をスライダー外にはみ出させる ... swipeクラスにoverflow hidden*がかかっている点に注意。swiper-wrapperをswiperの外に出し、position: relativeを追加して対応した。他にも方法がある様子。

参考

• 【v8】Swiperの使い方・実用的なデモ15個の解説 ー基礎から応用までー – 東京のホームページ制作 / WEB制作会社 BRISK
• [備忘録]Swiper.js で矢印ボタンを外に出す方法　HTML CSS JavaScript - Qiita
• 動くWebデザインアイデア帳 | 動くWebデザインアイディア帳
• imgタグのsrcset・sizes属性とpictureタグの使い方 - レスポンシブイメージで画像表示を最適化 - ICS MEDIA
• 【display: gridとfrとgap】要素を横並びにする方法 | 五平餅くんの部屋

今後&おわりに

今回はほぼ初めてのモバイルファーストコーディングに加え多彩なアニメーションとタブメニューなどの機能の実装が多く、1サイトの中にボリュームが詰まった内容でありました。
しかしながら、身構えていたはずのモバイルファーストコーディングはコンテンツ入力とスクリプト実装には時間がかかるものの、レスポンシブ化に向けたレイアウト調整についてはかなり楽に感じました。感覚のみならず実際にPC版コーディングが全体の3分の1程度の時間で済んでおり、最終日には全体を見直してから一部手直しする時間も作ることができたほどでした。きっとスクリプト作成までに要素構成が整理されるためスタイルの修正が手早いのでしょうか。これは、今後はすべてモバイルファーストで制作したい勢いです。

そして、アニメーションと機能の実装にて今回扱ったものはすべて「動くデザインアイディア帳」の応用で記述できたため、敷居高くなく取り組むことができました。もともとこちらは書籍も購入しており、制作時には常に参考にしているもので馴染みがありましたが、まだ実際に自作してこなかったものを扱えたことも良い経験ができました。

さらに、前回個人的に打ち立てたfloat使用不可縛りについて。うってつけのコンテンツが2セクションにわたってタイムリーに用意されており、挑戦できたことも収穫でした。画面いっぱいに広がる横並びをdisplay gridで実装するやり方を習得できた点は大きかったです。今まではたいていfloat、inline-block、marginを駆使して書いており、今回もはじめはそれで一旦形にしたのち、解答例を一読してから書き直す順番となりました。というのも、デザインカンプを読み解く時点でタブレット表示時～PC表示時までのイメージが実装例と異なり、inline-blockで横並びしたものをスクロールして見せる～全体表示へと変化するものと踏んでおり、アプローチから遠回りしたようでありました。使用場面が2箇所ありましたので、2回目には参考文献を見ずに自分で記述してみました。画像全体を埋めて均等に横並びする場面ではdisplay grid。抵抗なく記述できるようにはなったようですが、これが見てすぐピンとくるアンテナを身に付けたいものです。

このように、今まで通りならば30時間弱で完成させていたであろう実感のものをその8割ほどの24時間で作成できたことは自信になりましたし、そのためのポイントは自分にとって新たに知ったものが多く、知識と経験として身についた実感を得ることができました。

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

無料コーディング練習所については、中級編3、上級編と引き続き取り組ませていただく予定でおります！

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

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