【Webコーディング】オリジナルWebデザイン : 水族館の仮想HP - 1 PC版コーディング内容のまとめ

背景

2020年7月、Webデザインの制作課題に取り組みました。

fuchsia-84.hatenablog.com

今回は、こちらのPC版コーディングを終えたので記事にまとめていきます！

成果物

実際のWebページ(Github Pages) ※Chrome/Safari対応、PCのみ対応 (2021/8/26現在)

下にGoogle Map埋め込みを足して現在。

こちらで制作したデザイン、コーディングをすすめています🐠🌟#架空サイトPJhttps://t.co/PPhN4sGVHc

現状、以下のようになってます。
・ブラウザ : Chrome/Safari
・PC版のみ

引き続き！🙇‍♀️ https://t.co/UgTBxKhoRu pic.twitter.com/ldMPpqkA5H

— ふーしゃ@web (@fuchsia_84) 2021年8月25日

github.com

制作期間と工数

制作期間

2021/8/18 〜 8/22 + 8/25

スケジュールと工数

• 8/18
  • ヘッダー、メニュー等 4.0h
  • Topセクション 2.0h
  • Recommend～Chargeまでタグ追加 0.5h
  • (ロゴsvg修正 2.0h ※)

合計 6.0h

• 8/19
  • セクションタイトル 0.5h
  • 波形セクション 2.5h
  • Recommend、News、Model、Info 1.0h
  • 言語切替メニューに言語コードを使用する 0.5h

合計 4.5h

• 8/20
  • News、Access、Charge 2.5h
  • フッター 1.0h
  • グローバルメニュー 1.5h
  • (波形svg修正 2.0h ※)

合計 5.0h

• 8/21
  • ページトップへ戻るボタン 0.5h
  • スムーススクロール 1.0h
  • 言語切替メニュー部分 0.5h
  • グローバルメニューの表示/非表示 1.0h
  • ヘッダースクロール 0.5h
  • スクロールでふわっと 2.0h

合計 5.5h

• 8/22
  • リンクhover調整 0.5h
  • スクロールを促す矢印 1.0h

合計 1.5h

• 8/25
  • Safari向け修正 / Google Map埋め込み 0.5h

合計 0.5h

【全体工数】
合計 23.0h / 約2.8人日 (※ : 実装工数に含まず)

未実施事項

• レスポンシブ
• Chrome/Safari以外のブラウザ対応
• バナー制作
• 言語を切り替える機能の実装(メニュー設置のみ)

学習事項

【言語切替メニューは言語コードを使用】
デザインカンプでは国旗アイコンを使用していましたが、これはUIとしてよくないとのこと。
例えばカナダは英語に加えてフランス語も公用語であるように、一つの国でいくつかの言語が話されている場合があるため。
国と言語とを混同しないことに注意ということでした。
ということで、今回は言語コードを使用する形で対応しました。

言語切替メニューの変更

カンプを作ったときには意識できていなかったことなので、今後気をつけます。

参考 : UIデザイナーが多言語対応するときに気を付けること｜セブンデックス

【SVGの色変更 : ファイル内のpathタグにfill追加】
HTMLに直接SVGを記述してしまい、path部分にfillを書き入れる方法もありました。
今回ロゴは色は固定だったのでこの方法で。

【SVGで背景をマスクする】
いつものなら、mask-imageを使えば、fill指定も解決。
でも、今回はSVGを上下反転(180°回転)して使用する前提。
このままCSS側から操作できる方法はないかな？

...と、探しているとこれだ！！という情報が...！！(本当に救われました、感謝です。。。)

参考 : SVGファイルで、背景を波型や斜めにする方法 | Website MW

SVGを疑似要素としてabsoluteで重ねるという手法です。
確かに、色を調整してSVGを上から重ねれば切り抜いたように見えますよね。
目からウロコとはまさにこのこと。

【点線/破線のカスタム】
これまでのborderのdottedでなく、今回は線の調整を取り入れたのでコーディングに挑戦。
liner/radial-gradientをつかってできました。
参考 :
- dottedでもdashedでもない！CSSで好きな間隔の点線（破線）を作る方法 | amelog - 【CSS】radial-gradient を使って、CSS で水玉の背景を描いてみよー | HHH@venture | @venture = Adventure!

【スクロールダウンを促す動く矢印】
トップ画面によく登場するこれ。はじめてCSSアニメーションで作りました。

スクロールを促す矢印

ほとんどトグルボタンを×にする時のレイアウトを元にspan要素で描画した線をtransformで傾け、あとはkeyflrameでアニメーションでしょうか。上下にバウンドする動きは0%、50%、100%での縦方向の位置を指定。 我流で書くより参考先がさきに見つかったので、こちらから特に似たものを見ながら作りました。

coco-factory.jp

復習メモ

• Safariで幅指定なし横並びリストは改行される→white-space:nowrapで改行しない(CSS)
• 親要素がoverflowされると子要素にposition: sticky効かない(CSS)
• display:block/noneの切替にはtransition効かない→visibility:hidden/visibleを使う(HTML/CSS)
• CSSからfillで色変更したいときbackground読込・指定だけでは効かない→mask-image、背景をSVGでマスクしてfill適用(SVG/CSS)
• Google Map埋め込み→Google Map"共有"からiflameのHTMLを生成、クラス追加でスタイル適用(HTML/CSS)

参考 : 【解決】svgの色が変わらない！CSSorSCSSで変更したいのに！ | 武骨日記

PC版コーディングを終えて

【ググる時間が減ってひたすらコードを書いた！】
今回、基本的にググらず数カ所わからない点のみ調べる形で実装できました。
以前は全体的にすべての箇所でググることが必要だったことを思うと大きな変化です。
この変化の大きな要因は、7月に受けたHTML5認定試験でしょう。
疑似要素、疑似クラス、プロパティ、基本的によく使うものがある程度頭に入ってくれたので、調べる時間が減ったのですね。 感動しました。

【要素をうまくとってこれるようになった】
技術面で言うと具体的には、疑似要素や疑似クラスをうまく扱えるようになったところが大きかったです。
特にCSSの記述で要素1つ1つの選択からのつまづきが多かったのですが、今回はafterやnth-child、nth-type-offなどを使用して迷わずスタイル指定していけました。
結果、クラスをまとめて書くこともできるようになってきました。
以前は共通するレイアウトの把握ができてもスタイルの記述まで持って行けなかったのですが、この点については前進できた手応えがありました。
また、スクリプトでも同様に、セレクタ($)で要素をうまく引っ張れるようになった結果、あらゆるアニメーションの適用がスムーズになりました。
jQueryの書籍を参考にした(ポートフォリオ制作: 記事リンク)を経たのも大きかったように思います。

【SVGと友だちになりたい】
技術面で未だ不十分だなと痛感したのがSVGの操作に関してです。
たとえばCSSプロパティにてurl読込みfill指定で色変更をしたかったのですが、fillが効かない事態に直面。
調べに調べ、HTMLやCSSに直接SVGを埋め込む形で対応しましたが、そもそもファイル作成段階の問題(ラスター画像が埋め込まれたまま、クリッピングマスクを使用したSVGは不適など)が多くて苦労しました。はじめに手を付けたロゴSVGからかなり手間取ったため、工数が伸び伸びに...。

とはいえ波形SVGで背景を作る頃には疑似要素を使ったSVGでマスクする方法(下記参照)と出力をそのままCSSスタイル指定できるbase64変換ツール(fillを書き入れてから変換！下記参考を参照)と出会い、世界が開けました！
まずはお友達から...！

今後・おわりに

今回はPC版コーディングについてまとめました。
引き続き、レスポンシブ対応と言語切替機能を進めます！