【Webコーディング】アイスクリーム専門店の仮想LP - PC版コーディング内容のまとめ

先日デザインカンプを作成したオリジナルWebデザイン。

fuchsia-84.hatenablog.com

コーディング内容のまとめを書いていきます！今回はPC版！

成果物

左: デザインカンプ 右: コーディング結果

先日つくったデザインからPC版コーディングおわり！🙌

制作期間 : 2/25 - 2/27
合計制作時間 : 10.5h

スクリプトもググらず書くようになってきた🤔

SP用みすえてのhtml記述、スタイル分け
うまくいってるといいな

引き続きー#Webデザイン #Webコーディング #駆け出しエンジニアと繋がりたい pic.twitter.com/GHS5ID6ffL

— ふーしゃ@web (@fuchsia_84) 2020年2月27日

github.com

制作期間 : 2/25 - 2/27, 29 4日間
制作時間 : 合計11.0h
※2/29 ABOUTセクション背景の修正

div/section別まとめ

タイトルロゴ画面

ロゴを画面中央に配置(上下左右で中央)

上下左右の配置は、position:absoluteとmargin:autoの方法で。
上下左右の位置指定(auto以外にする)を忘れずに。

.logo {
  display: block;
  /*幅と高さ指定*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

ロゴをクリックで上にスライド

スクリプトにてクリック時にクラスを追加し、
CSS側でそのクラス内容にてクリック後のスタイルを指定。

// 前略
   $('.title_wave_logo').on('click', function() { //ロゴがクリックされたら
// 中略
      $('.title_wave_pc').addClass('title_open');
// 後略

/*前略*/
.title_open {
  top: calc((100vh + 300px)* (-1)); /*タイトル画面+波部分の高さだけ上にずらしている*/
}
/*後略*/

タイトル画面表示中、スクロール不可にする

body全体にoverflow:hiddenをかけてスクロールさせない。クリック後に解除させた。

// 前略
   $('.title_wave_logo').on('click', function() { //ロゴがクリックされたら
// 中略
      $('body').addClass('scroll_on');
// 後略

/*前略*/
body {
  overflow: hidden; /*クリック前はスクロール不可*/
}
.scroll_on  {
  overflow: visible; /* after click title logo */
}
/*後略*/

下部は波形

波形SVGでdiv領域内をマスク。
CSS側でmask-image関連タグを使用。
ベンダープレフィックス付で記述すると以下。

.title_wave {
  mask-image: url(../img/svg/wave.svg); /*ソース指定*/
  -webkit-mask-image: url(../img/svg/wave.svg);
  mask-position: center; /*マスクする位置を中央に指定*/
  -webkit-mask-position: center;
  mask-size: cover; /*拡縮する指定*/
  -webkit-mask-size: cover;
  mask-repeat: no-repeat; /*リピートしない*/
  -webkit-mask-repeat: no-repeat;
}

ヘッダー

ロゴとグローバルメニューページ内リンクを含む形で
幅を固定してposition:fixedでスクロール時固定。
模写など今まで作成したものとほぼ同じやり方で作成。

※SP版用のSNSリンク要素をdisplay:noneで準備しておいた。
※スクリーンショットでは高さにズレが出ているように見えますが、
Chromeブラウザ上ではなくなっている...

SNSボタン(+ボタン)

ハンバーガーメニューのトグルボタンの応用。
クリック時にtoggleClassでクラスが追加/削除される。
クリック後のスタイル指定については、
メニューclose時に＋形、メニューopen時は−形となるように
1本の線の回転角度を変化させた。

SNSアイコン部分

fontawesomeのアイコンを使用。
border-radius:50%で領域を円系にし、白色のborderをつけた。
アイコン要素はtext-align:centerとpadding-topを指定して中央に配置。
各ボタンはmargin-bottomで等間隔に縦に並べた。
背景色について、instagram以外は固定色。
instagramは3色・斜めのグラデーション。
linear-gradient(角度、色1, 色2, ...)で指定。
角度について、
ベンダープレフィックス付のdeg ＝ 90 – 通常のdegに注意。

  background: -moz-linear-gradient(-45deg,#F7EB62,#F485BC,#6A407D); 
  background: -webkit-linear-gradient(-45deg,#F7EB62,#F485BC,#6A407D); 
  background: linear-gradient(135deg,#F7EB62,#F485BC,#6A407D); 

メインコンテンツ全体(トップ~SHOP)

widthを画面全体 - ヘッダー横幅分、
margin-leftをヘッダー横幅分として
ヘッダーとメインコンテンツの2カラムに分けた。

トップ(スライダー)

flickityを使用してスライダーを作成。
ドットやボタンを非表示、オートプレイとドラッグを有効。
スクリプトで指定できた。

$(function() {
    $('.top_slider').flickity({
        autoPlay: true,
        draggble: false,
        prevNextButtons: false,
        pageDots: false,
    });
});

ABOUT

背景にブラーと半透明効果(2/29追記)

ブラーについてはセクション全体の大きさをもつinner要素にbackdrop-filterを適用。

#about .inner {
  ....
  backdrop-filter: blur(1px) ;
  -webkit-backdrop-filter: blur(1px);
  ...
}

半透明効果は、XDカンプで設定されていた明るさup・少し透けさせるを
白い要素を重ねることで表現。
aboutセクションの疑似要素beforeの背景色で設定した。

#about {
 ...
  background-image : url(../img/bg/about_bg.jpeg);
  background-size: cover;
  position: relative;
}
#about::before {
  content: '';
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(255,255,255,0.4);
}

MENU

各メニューの互い違いレイアウトはnth-of-type(odd/even)をつかって偶/奇でスタイルを分けた。

SHOP

こちらもflickityを使用してスライダーを作成。
スクリプトでドット/オートプレイ無効。(トップの項目を参照)
さらに、1枚目の戻るボタン非表示、ボタンのスタイルはCSSにて記述。

.flickity-button {
  background: transparent; /*ボタン背景*/
}
.flickity-prev-next-button {
  width: 84px; /*ボタンのサイズ*/
  height: 128px;
}
.flickity-button-icon {
  fill: #777777; /*ボタンの色*/
}
.flickity-button:disabled {
  display: none; /*1枚目戻ボタンを非表示*/
}

フッター

特に特筆する点はなし。

カンプと比較

タイトル画面 : ○

ヘッダー : △
高さのズレはブラウザ上では確認されず、スクリーンショットのみ確認。
ロゴ・グローバルメニュー部分ではズレなし。

トップ : ○

SNSボタン(+) : △
border外側/内側の考慮ができていなかったので境界分大きくなっている。

SNSアイコンボタン : △
上記と同様

ABOUT : ○

MENU : △
XDデフォルトのテキスト余白とのズレで縦の余白指定にズレが出ている。
背景にズレあり。領域幅は合っていそうなのでsize、potisionの見直し。

SHOP : ×
SVG画像マスクでの余白によるズレ。
flickityボタンカスタマイズ不足。

フッター : ○
※カンプにミスあり。
テキストをメインコンテンツ幅に対して中央揃えに修正。

アニメーション全体: ○

苦労したところ

トランジション指定

SNSリンクボタンは通常非表示のためdisplay:noneしていたが、
CSSのtransitionがdisplay:none要素には効かなかった。
そこで、visility/opacityを用いて記述した。

/*前略*/
.sns_pc ul#sns_links_pc { /*close時*/
  visibility: hidden;
  /*中略*/
  opacity: 0;

  transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out 0s;
  -webkit-transition: all 1s ease-in-out 0s;
  -o-transition: all 1s ease-in-out 0s;
  -ms-transition: all 1s ease-in-out 0s;
}

.sns_pc.open_sns_pc ul#sns_links_pc { /*open時*/
  visibility: visible;
  bottom: 220px;
  opacity: 1;
}

他にも、keyframeを使用する方法もあった。

display: none; のDOMに対してtransitionを使う際の注意 - Qiita

flickityカスタマイズ

今回、SHOPセクションのスライダーについて、ボタンのカスタマイズをカンプとぴったり合わせることができなかった。
調べると、flickityデフォルトでボタンの形状はarrowShapeという名前のSVGパスとして記述されているよう。

https://flickity.metafizzy.co/options.html

これをいじれば形も変えられるようだ。

SVG画像マスクの制御

意図していた(XD作成時)よりも余白が多く切り取られたために、SHOPセクション全体のサイズ指定に大きく影響した。

まとめと感想

今回はオリジナル2作目となるWebコーディング、PC版での内容をまとめてみました。

新しく挑戦したかった内容である2カラムレイアウト・マテリアルデザイン・SVGで画像マスクでそれぞれ苦しんでいた印象。

いつもより制作時間が倍くらいかかりました。(ちょっとかけすぎでは...)
また、SHOPセクションについてflickityカスタマイズとSVGマスク制御のWショックでカンプとぴったり合わせられなかった点も反省です。 (比較をみるとよくわかります...)

成長点としては、htmlでのクラス分けミスが出てないこと・ほとんどググらずスクリプトを書けたことがあったかなと思います。

SP版のことを考えながら書いたので、そちらもうまくはたらいてくれるといいな...

引き続き、SP版をコーディングしていきます！