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

先日はPC版コーディング内容をまとめました。

fuchsia-84.hatenablog.com

今回はSP版と全体の修正について。
レスポンシブ化に向けて行った内容をまとめます！

成果物

PC or タブレット向け (992px以下769px以上)

タブレット向け (768px以下545px以上)

スマートフォン向け (544px以下)

スマートフォン向け (544px以下) ムービー

自作Webデザイン
SP(TAB含)版コーディングおわり！

制作期間 : 3/3 - 3/5 3日間
制作時間 : 3.5h

PC版で準備しておいたパーツ
うまく働いた😊

一方ブレイクポイント境目のレイアウトで苦しんだ💦

こちらはスマホ幅での動き#Webデザイン #Webコーディング #駆け出しエンジニアと繋がりたい pic.twitter.com/VTDPzxezLy

— ふーしゃ@web (@fuchsia_84) 2020年3月5日

GitHubリンク

https://github.com/fuchsia-84/Juicy_Ice_Cream_Web_Coding

制作期間 : 3/3 - 3/5 3日間
制作時間 : 3.5h

div/section別まとめ

タイトルロゴ画面

992px以下でdisplay:noneさせた。

ヘッダー

ロゴの大きさと中央配置

768pxを境に幅と高さを変更。
配置は上下左右で中央配置。
先日のposition:absoluteとmargin:autoを応用。

グローバルナビゲーション/トグルボタン

【グローバルナビゲーションを上下にスライド】
前回のPC版SNSリンクと同様。
z-indexをヘッダーより上から下に変更。

【トグルボタンの開閉】
前回のPC版SNSリンクの応用。
display:noneからblockにして表示。
線分の置き方は以下。

<div class="nav_toggle">
  <span></span>
  <span></span>
  <span></span>
</div>

.nav_toggle {
/*前略*/
  display: block;
  width: 30px;
  height: 34px; /*線分の太さと親要素の高さ・幅に注意*/
/*後略...top、leftなど指定*/
}
.nav_toggle span {
/*前略*/
  width: 100%;
  height: 2px;
  background: #FFFFFF;
  border-radius: 5px;
/*長さ.nav_toggle幅(30px)・白・太さ2px・角丸の線分*/
/*後略*/
}
.nav_toggle span:nth-child(1) {
  top: 0; /*上*/
}
.nav_toggle span:nth-child(2) {
  top: 14px; /*中*/
}
.nav_toggle span:nth-child(3) {
  top: 20px; /*下*/
}

上、中、下と等間隔で並んだ横向きの線分について
それぞれクリック後の位置・向きの変化をつける。

上 : 45度回転してy方向中央にさがる
中 : 長さ0、透明、x方向0位置に移動
下 : -45度回転してy方向中央にあがる

#header.open .nav_toggle span:nth-child(1) {
  top: 14px;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}
#header.open .nav_toggle span:nth-child(2) {
  width: 0;
  left: 0;
  opacity: 0;
}
#header.open .nav_toggle span:nth-child(3) {
  top: 14px;
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
}

【SP版SNSリンク】
各ボタンは各PC版のものと同様。
並びを縦から横並びにするため
display: blockからinline-blockに変更。
marginで間隔をあけた。

【下部の波形】
前回と同様。
div領域はグローバルナビゲーションdivのglobal_navクラス内にnav_waveクラスを設けて作成。
それぞれの高さと配置で繋げて表示されるようにした。

SNSボタン(+ボタン)

display: noneで非表示

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

768px以下でwidthを画面全体(100%)、
margin-leftは0として1カラムにした。

トップ(スライダー)

高さを100vhから固定値とした以外に変更なし。

ABOUT

992pxから768pxあたりでフォントサイズと文章量の関係から
大きくレイアウトが崩れる箇所があったため、
カンプにはなかったがフォントサイズを3段階に調整した。

また、背景のフィルターをbefore疑似要素を使用しており
高さ情報がとってこれず苦労していた点も、
上記の対応により固定値の指定で解決できた。

MENU

ABOUTセクションと同様、992pxから768pxあたりで
文章がかなり密となり読みにくかったため、
カンプで指定の変更に追加して
PC版とSP版でフォントサイズと改行位置を変更した。

改行位置の変更の仕方は以下。

<p>SP版はここで改行。<br class="br_sp" />PC版はここで改行。<br class="br_pc" /></p>

/*PC版*/
.br_pc {
  display: block;
}
.br_sp {
  display: none;
}
@media screen and (max-width: 768px) {
  /*SP版*/
  .br_pc {
    display: none;
  }
  .br_sp {
    display: block;
  }
}

SHOP

flickityカスタマイズ - ボタンの位置変更はtop,leftで

前回苦労したボタンのカスタマイズについて、
SVGの改変よりもっと簡単な方法を見つけることができた。
単純に該当のボタンクラスにtop, leftなどを指定
することで移動することができた。

#shop .flickity-prev-next-button.next {
  right: -30px;
  /*右に出ている次ボタンを右に移動*/
}
#shop .flickity-prev-next-button.previous {
  left: -30px;
  /*左に出ている前ボタンを左に移動*/
}

フッター

特に特筆する点はなし。

苦労したところ

ブレイクポイントの境目で崩れるレイアウトへの対応

PC版/SP版の境目で大きくレイアウトが崩れ、
新たにブレイクポイントを設け
フォントサイズ変更・改行位置変更・全体の幅/高さ/余白の調整
などさまざまな対応をとりました。

文章量と要素の大きさと余白のバランスから、
デザイン段階で対応を考えておくか、あるいは
カンプを見た段階でCSSでの対応を予測できるよう
になると楽かも...

後退不具合に注意

例えば今回、グローバルナビゲーションについて
PC版ではヘッダーより上に重なり、
SP版ではヘッダーより下となるので
z-indexを変更しますが...

このように、元あった要素を改変したり
似た名前の要素をさわることが多い場合。

改変後、前にできていたことができなくなり、
原因究明に苦労するなどしました。

まとめと感想

今回は、SP版でのコーディングと全体修正での内容をまとめました。
PC版での準備がうまくいったようで、
内容対比で今までで最短ペースで仕上げられたように思います。

個人的には、わりと長めにflickity頼りでスライダーつくってきて
ボタン位置変更に気付けなかったのは盲点でした。
今回すこし前進できたようでよかった。

しかし、カンプのスクリーンショットと比較(前回)をしてみると
未熟な点も浮き彫りになったようで...

今後の制作に活かしていきます！