ふーしゃのWeb制作ブログ

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

【Webコーディング模写】12月分-2 Shiroコーディング まとめ

Webコーディング模写 Photoshop Adobe Xd

今回は、ひらともや(Twitter: @hiratomoya)さんのnote記事コーディング練習用のデザイン~お花屋さんのLP編~で知った、Shiroコーディングに挑戦してみました！ デザインは、akane(Twitter: @omsss22)さんです。

学習項目とこの経験を振り返ると共に、Shiroコーディングにこれから挑戦する方にとっての逆引き辞書的なものになれば...と書いてみます。

成果物

githubリポジトリ
公開ページ

スクリーンショット

PC版タブレット版スマホ版
ページ全体のスクリーンショット

動画

制作期間

12/20,23-26 5日間 合計時間 : 22.0h

実装方法

自分の実装方法

セクション別/スクリプト別に要点まとめていきます。

共通クラス

・コンテンツ毎のタイトル
｢見出し・水平なしきり線・説明文｣のセットが各セクションにあり、全て同じレイアウトだったので共通のクラスとしてまとめた。
・水平なしきり線
hr要素をはじめて使ってみた。
・レスポンシブな改行位置
セクションのタイトルにしか使っていないが、どこでも対応できるよう共通として。PC、タブレット向けの改行をbr要素クラスbr_pc、スマホ向けの改行をbr要素クラスbr_spとして、それぞれdisplay:block/noneを切り替えた。
参考 :
スマホ表示とデスクトップ表示でレスポンシブに改行位置を変える時はbrタグにクラスを付けてcssだけで管理すると超楽な件 | WEMO

ヘッダー

・レイアウト :
全体、上部固定表示。(position : fixed;)
コンテンツについて、ロゴとトグルボタンを1つのdiv要素でまとめ、トグルボタンをdisplay: absolute、right: 0;で右端に配置。
・スクロール時の色変化 :
スクリプトでスクロール位置を取得。(scrollTop)
色変化位置までスクロールしたらfixedクラスを追加(addClass/removeClass)し、fixedクラスに変化時のスタイルを記述。
色変化位置は、グローバルメニューでConceptに飛んだ後のヘッダーの見え方も考慮してTopセクションの高さからヘッダーのmarginを含めた高さ分を引いたものとした。
参考 :
ヘッダー・ナビゲーションを固定表示させるアイデア5つ – WEBDESIGNDAY
【おしゃれ】スクロールで色が変わるナビゲーションメニューの作り方 | なかブログ
jQuery・JavaScript　高さ、横幅取得方法 - Qiita
・トグルボタン開閉 :
トグルボタンがクリックされたかどうかチェックして、
クリックされたらヘッダーにopenクラスを追加する。
クリックの度に追加/削除を切り替える。(toggleClass)
openクラスが付与されている時にクロスした形になるよう、変化時のスタイルを記述。
今回は3本あるうち上下2つがそれぞれ315度、-315度回転してクロスする位置に移動、中央の1つは中心に向かってなくなったように見えるように横幅0と中央に移動した。
時間をかけて遷移するようイーズをかける。
参考 :
【JS】スマホ用のハンバーガーメニューをjQueryとCSSで作成する方法
・上から出てくるグローバルメニュー :
グローバルメニューは普段は消して準備しておく(display: none;)。ヘッダーにopenクラスが付与されているかチェック(hasClass)。あればメニュー要素を上から下ろして表示する。(slideDwon、css('display','block')) openクラスがなくなった時、メニュー要素を上に上げて要素を消す。(slideUp、css('display','none'))
参考 :
【jQuery】アコーディオンメニュー　上下にスライドして開閉するメニュー | ティブる！

Topセクション

・写真を背景にした文字入れ
可読性を考えて、背景写真の輝度を変えた。
Topセクションは白文字なので、背景の輝度を下げた。
(backdrop-filter: brightness(80%); ※要素全体に広げた子要素に適用)
逆に、Contact usセクションでは黒文字で背景の白を強めた方が見やすいので、反対に輝度を上げた。
参考 :
backdrop-filter - CSS: カスケーディングスタイルシート | MDN
・文字の中央配置
テキスト要素としたので、横幅をセクションいっぱいに広げてtext-align: centerをかけた。

Conceptセクション

・背景色を上下に分けて別々にする
後述するが手軽な方法を知らなかったため、力技で...
色変化部分は長方形クラスに色をつけ、position: relative/absoluteとz-indexで調整して要素を重ねて表現しました。※Floristセクションも同様

Workセクション

・偶数/奇数要素で左右に分けて配置
レスポンシブ時にGift->Decoration->Wedding...の順で並ぶ事を考え、左右分けはGift(奇/左)、Decoration(偶/右)、Wedding(奇/左)...の形で切り替えることにした(nth-child(odd/even)、float: left/right)。
タブレット版はfloatを解除してブロック要素として縦並び、スマホ版は後述するFloristセクションの横スクロールと同様。
参考 :
CSSで偶数や奇数の要素にだけプロパティを適用させる方法【初心者向け】 | TechAcademyマガジン
・通常画像サイズにcover
レスポンシブ対応時、画像コンテンツは背景画像にcoverを適用した時のようにしたかったので、object-fit:cover;を使用。
参考 :
imgだけどサイズをbackground-size: cover;みたいにしたい - Qiita

Floristセクション

・inline-block要素の高さ揃え
PC版はinline-block要素を固定長で横並びにさせた。
横幅指定が正しくともただの自動折り返しだとズレが出てしまった。そこで、文字間を詰めた上で一旦1行とし、その上でもう一度折り返しをかけ、vertical-alignで高さを揃えた。
参考 :
display:inline-block で正確な幅を指定しても横並びにならず改行されてしまう場合の対処方法 | WordPressテーマ／DigiPress
display:inline-block; が微妙に下にずれる問題の解決方法 - Qiita
・横並び要素を横スクロールでみせる
1.要素を横にはみ出した状態で横並びにする
display: flex;してflex-wrap: nowrap;で折り返しを解除。
コンテンツ幅の指定に注意！※"苦労したところ"で後述
2.スクロールバーを表示
横スクロールさせるにはコンテンツ要素に以下を追加。
overflow-x: scroll;
-webkit-overflow-scrolling: touch; 今回は常に表示するようにしたいので、overflow-x: auto; とする。
3.スクロールバーのカスタマイズ
バーの高さ、色などを指定する。
1-3手順の詳細は下ページで。
参考 :
スマホ表示のとき横長テーブルの横スクロールバーを常に表示する方法 | IT女子のお気に入りフォルダ

Shop informationセクション

・店舗情報部分
dl/dt/ddで実装。dt/ddの横幅は親のdl要素を3:7で区切るように、文字間を調整したpaddingの大きさを考慮してcalcで計算させた。縦のしきり線はddにborder-leftをつけた。

Contact usセクション

・メールアイコンをCSSで描画する
font-awesomeとか無料で使えるenvelopアイコンがサイトデザインの雰囲気に合わなかったのでやめ。
四角を書いてから疑似要素before/afterで封筒を閉じる線を重ねた。以下のピュアCSSで書かれたアイコン集の記述を参考にしました。
参考 :
CSS ICON -- project by Wenting Zhang

フッター

コピーライトを入れて中央揃え。
ポイントは特殊文字くらいでしょうか。
参考 :
特殊文字一覧：HTMLで使える特殊な記号の変換コードと書き方について説明します - ウェブランサー

実装方法を見本とくらべて...

・横並びは大体flex
自分の実装方法ではfloatかinline-blockでの横並びで、Work/Floristセクションの横スクロールのみflexboxを使っていた。一方、見本ではほぼすべての横並びがflexboxで実装されていた。
・上下で背景色を分ける(背景の明るさ調整): linear-gradient
知らなかったがためにわざわざオブジェクトを重ね重ねした上下の塗り分けが、この記述だけで出来ることだったなんて...！さらに、backdrop-filterでやったようなこともこのスタイル指定で可能...。勉強になりました。

苦労したところ

・グローバルメニュー、display: block/none切替時のエラー
デベロッパーツールで確認したところ、display:noneを適用するスクリプトで"displayなんて定義されてないもん！(英語)"みたいなエラーが出続けてパニックに。
原因は、slideUp()に既にnoneしてるのに改めて要素取得してスタイルをさわろうとしたからでした。 以下のサイトを読んでわかりました。
参考 : javascript - $.slideUp() not working on elements in a CSS "display:none" parent element - Stack Overflow
・横スクロール実装時、コンテンツが細切れに！
flexboxの扱いに慣れてないせいですが、はみ出る形にしたいのに折り返し解除のみ適用されてコンテンツが細切れになってギュウギュウ詰めされた状態からしばらく抜け出せませんでした。原因は、min-widthを指定しなかったこと。 これから気をつけます！

工夫したところ

ブレークポイントを2箇所に
タブレット幅だと特にWorkセクションの内容が見切れるようだったので992pxと468pxの2箇所に増やして横並び・縦並び・横スクロールと変化させました。(Bootstrap4の値を参考に)
参考 :
こうすれば理解できるBootstrap 4のレスポンシブWebデザインとそのCSS - Qiita
・ページ内リンクにスムーススクロール
グローバルメニューからページ内リンクが動くように。スムーススクロールを調べ、実装してみました。
参考 :
ページ内リンクでスムーズスクロール - Qiita
・ヘッダーの高さ分のズレ調整
ヘッダーをposition: fixedしているため、ヘッダーの高さ分移動先がズレるので、修正しました。
参考 :
position:fixedでヘッダ固定時のページ内リンクのずれを解消したい ｜ Tips Note by TAM

さいごに

Shiroコーディングを終え、必要だった知識や注意点などまとめてみましたが、かなりのボリュームになりました。
これだけ中身の濃い内容だったということかもしれません。

今回はあえて解説記事を読まず後から答え合わせのスタイルを貫いたために、未知部分に関してはパワープレーをかましていたりしましたが...ググったりして調べながらでも、1つのものを自分で書いて作れた・動かせたという経験がまた1つできて、とってもうれしかったです。
こういったことを積み重ねながら、一歩一歩進んでいけたらと思います。

練習用デザイン/note記事をつくり、学習の機会を与えてくれたお二方に感謝の気持ちでいっぱいです。ありがとうございました！