【Webコーディング】はじめてオリジナルWebデザインカンプからコーディングしてみた！ - 内容と全体まとめ

前回までで準備が整ったので、レッツ・コーディング！前の記事

成果物

github.com

公開ページへ(GitHub Pages)

スクリーンショット

動画

SP版 : pic.twitter.com/Um0Z3MfV46
— ふーしゃ@web (@fuchsia_84) 2020年1月9日

コーディング時間

期間 : 1/8 - 1/9 2日間
時間 : 合計9.0h
(PC版 5.0h + SP版 4.0h)

学習ポイント

flexboxでの横並び・折り返し

Shiroコーディングのときに気になっていた、flexboxをつかった横並びに挑戦してみました。使用したのはこちらの2セクション。
左 : ITEMSセクション、右 : SNSセクション

まず、SNSセクションは常に5つを横並び・折り返し無しだったのでざっくりそのまま書けました。

.parent { /*親要素*/
  display: flex;
  flex-wrap: nowrap; /*折り返さない*/
}
.child { /*子要素*/
  width: 20%; /*5分の1にするのじゃ！*/
  ...
}
/*これ以降はchildの中身いろいろ*/

SNSセクション

次に、ITEMSはPC版では3つずつ、SP版では2つずつで常に折り返す。上のにちょっと工夫を加えて。

PC版 3つのとき

.parent {
  display: flex;
  flex-wrap: wrap; /*折り返す*/
}
.child {
  width: 33.3%; /*3分の1にするのじゃ！*/
  ...
}
/*これ以降はchildの中身いろいろ*/

ITEMSセクションPC版

SP版 2つのとき

.parent {
  display: flex;
  flex-wrap: wrap; /*折り返す*/
}
.child {
  width: 50.0%; /*半分にするのじゃ！*/
  ...
}
/*これ以降はchildの中身いろいろ*/

ITEMSセクションSP版

さて、実際は余白やコンテンツの画像との兼ね合いもいろいろ調整しましたがこんな風にまとまりました。(さすがにクラス名とかは全部ちがいますが笑)

これに近いことをやるときは、いつも子要素inline-blockにwidth%でふったら正確な値でもズレてるのを行間詰めるとか詰めないとか、float leftやabsoluteで親の高さが消失とかなんとかやっていたような。

それがこのスマート記述で済んでしまうなんて...
flex、よき！

今更感あったかもですが、初体験してみて感動の嵐でした。
flexboxでもっとたくさん書いてみたくなりました！

疑似要素::nth~での3の倍数の指定方法

要所要所つかいましたが、特に上記のITEMSセクションにおいて3つの横並びになった均等な領域内において、コンテンツの画像を左の領域では左寄せ、中央の領域では中央、右の領域では右寄せで配置して再現する必要がありました。
ITEMSセクションのレイアウトここで、左領域となるのは3n+1(1, 4, 7...)番目、中央領域となるのは3n+2(2, 5, 8...)番目、右領域となるのは3n+3(3, 6, 9...)番目の要素となります。
ITEMSセクションのレイアウトの規則性

そこで、疑似要素nth-type-ofを使用してこのように書けました。
(このときは条件的にchildよりこちらでした。後にまとめます。)

/*左領域*/
  .parent .child::nth-type-of(3n+1) {
  margin: 0 auto 0 0; /*左寄せ*/
}

/*中央*/
.parent .child::nth-type-of(3n+2) {
  margin: 0 auto; /*中央寄せ*/
}

/*右領域*/
.parent .child::nth-type-of(3n+3) {
  margin: 0 0 0 auto; /*右寄せ*/
}

↑はじめ、3n-2、3n-1、3nと書いてダメだったので結構ハマりました...注意して覚えておきます。

こちらのサイトはnth-childとの対応がヴィジュアライズされるのでわかりやすかったです。
参考 : NealGrosskopf.com l Demystifing Nth-Child in CSS

疑似要素::nth-childと::nth-of-typeの違い

<div class="parent">
  <div class="child"></div> //1つ目の要素
  <p>a</p> //2つ目の要素、1つ目のp要素
  <p>b</p> //3つ目の要素、2つ目のp要素
  <p>c</p> //4つ目の要素、3つ目のp要素
<div/>

上のようなhtmlファイルにそれぞれスタイル適用したとき、 parent p::nth-child(2) は a parent p::nth-of-type(3) は bとなります。
参考 :
CSSのnth-childとnth-of-typeについて基本から学ぼう | Stocker.jp / diary
CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違い｜Webpark

dl・dt・dd要素のスタイル揃え

レスポンシブに中身の大きさが変化するdt・dd要素を横並びにするという点で苦労していました。今回のように店舗情報を乗せる場合は特にdt要素の横幅が小さくなりやすくSP版で次の行のdt要素が隙間に入り込んでしまうケースが多かったので、横幅の小さくなる要素に対してさきほどの疑似要素で指定し、他の要素とは違う配置の仕方をするなど工夫をして何とか揃えてみました。(もっとうまい方法があったよな...)

復習項目

ハンバーガーメニュー実装
ヘッダー高さ分のズレ修正方法
Flickityによるスライド実装・カスタマイズ

まとめと感想

自作オリジナルWebデザインカンプから、コーディングまではじめて完結させることができました！

デザイン分野としてはAdobe Comp、Photoshop、XD。コーディング分野としてはXDからの読み取り、VSCode、GitHub等。コーディング内容ではflex横並び、疑似要素など...

いままでの総復習にくわえて、新領域にたくさん挑戦できたのではないでしょうか。

特に成長を感じられた点は、コーディングでのクラス構成の修正がほぼなかったことと、共通クラスをある程度まとめて作ることができたという点でした。 index.htmlを書いたら、そのまま一気にcssやスクリプトを書けるようになりたい(構成がわかる・知識もある状態でないとできないから)というのを先の目標と据えていましたが、今回は今までで一番それに近い形で書くことができました。

ただ、自作カンプからコーディングをしてみて...
本っ当にやりにくかった。
だってなんかちょっとずつズレていたり、値が小数になっていたり。
コーディングで再現しようとすると想像以上にめんどくさかったり...

とにかく親切でない感じで途中でじぶんに怒りが湧くほど。
逆に言えば、note課題や模写でふれるものがいかに気を配ってつくられていたか、わかったような気がしました。

これからつくっていくデザインカンプは、今回気付けた点を変えていけたら、少しでもよくしていけたらと...
積み重ねていきたいと思います。