【Webコーディング】オリジナルWebデザイン : 農家の新鮮野菜通販HP - 1 PC版コーディング

背景

お題からワイヤーフレームとデザインカンプを制作するWeb配布課題に取り組みました。(有料noteです)
Webデザインカンプを1から作るための説明書｜こばやす｜Webデザイナー｜note

制作したデザインカンプについてはこちら↓

fuchsia-84.hatenablog.com

今回はこちらのPC版コーディングについてのまとめです。

成果物

こばやす(@kobayas_s)さんnote #Webデザインお題
｢農家の通販サイト｣PC版コーディング

■ 制作時間: 13.5h
■ ポイント
・文字をカーブさせる
・テキストを縦書きにする
・CSSでSVG色変更する

知らないことがたくさん...💭

次はレスポンシブ対応🌟
色々準備したのがハマるといいなー！ pic.twitter.com/LS3e2k7YhJ
— ふーしゃ@web (@fuchsia_84) 2021年12月15日

Webブラウザで見る ※Chrome、Safari対応
※ 12/17 ボタン類にドロップシャドウを追加、hover時の色変化を追加

GitHub - fuchsia-84/Kobayasu_farm

制作スケジュールと工数

制作期間

2021/12/14・15 の 2日間

スケジュールと工数

12/14
- 大まかなタグ構成 0.5h
- スタイル調整(フッター以外) 5.0h
- 画像編集 0.5h

合計 6.0h

12/15
- Google Map挿入
- スタイル調整(フッター) 0.5h
- スクロール時のヘッダースタイル調整 1.0h
- 通販ボタン 1.5h
- スクロール/トップに戻るボタン 1.5h
- 文字のカーブ 2.0h
- font-weight確認 0.5h

合計 7.5h

【全体工数】
合計 13.5h / 約1.69人日

未実施事項

Chrome/Safari以外のブラウザ対応
favicon設置
学習事項
文字をカーブさせるjsライブラリ: Arctext.js …スクロール時に変化させたかったが、回転角度がhtm側にstyleとして詳細度MAXの状態で反映されるため今回そのままの使用はできなかった。このライブラリで回転時に設定される値を参考に、1文字ずつspanで区切る処理を行った後、1文字ごとに回転角度と移動距離を変更した。
テキストを縦書きにするCSSプロパティ: -ms-writing-mode: tb-rl;、writing-mode: vertical-rl;
background-imageで読み込んだSVGの色操作: fill: currentColor; (線の場合、stroke)
imgタグに疑似要素after、beforeはつかない
(GitHubにpush出来なくなった → 2021年8月アップデートの影響。tokenを生成しパスワードとして入力で解決)

参考

今後&おわりに

今回はテキストの扱い・SVGファイルの扱いについて、知らなかったことに多く出会えた実装となりました。

ボリューム自体は少なかったため、レスポンシブ対応のための仕込みをしながらも2人日かからずで終わらせられたのは大きかったと思います！

さて、次からレスポンシブ対応となります。
パーツの切替がたくさん必要な予感なので、準備したところがぴったりハマってくれればいいな...

引き続き！

ふーしゃのWeb制作ブログ

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