デザインカンプコーディングにてボックスの余白の根拠が分からないです。

上記のサイトにてコーディングの学習をしています。

が上記です。

下記の箇所

<section id="works" class="wrapper">
<h2 class="section-title">Works</h2><!-- /.section-title -->
<ul>
  <li><img src="/images/works1.jpg" alt="テキストテキストテキスト"></li>
  <li><img src="/images/works2.jpg" alt="テキストテキストテキスト"></li>
  <li><img src="/images/works3.jpg" alt="テキストテキストテキスト"></li>
  <li><img src="/images/works4.jpg" alt="テキストテキストテキスト"></li>
  <li><img src="/images/works5.jpg" alt="テキストテキストテキスト"></li>
  <li><img src="/images/works6.jpg" alt="テキストテキストテキスト"></li>
</ul>

/*-------------------------------------------
Works
-------------------------------------------*/
 
#works ul {                          /*　　works 画像を横並びにする*/
  display:flex;                   /*　　横並びにする*/
  justify-content:space-between;  /*　　均等に横に並べる*/
  flex-wrap:wrap;                 /*　100%超えたら折り返し*/
  margin-bottom:50px;           /*　リストの下の余白50px*/
}

#works li {                       /*　リストの横幅　　31%*/       
  width:31px;                   /*　リスト下のマージン　　23px*/
  margin-bottom:23px;
}

の箇所にて　リストの横幅が31 ％　になっているですが、何故31になるのか　デザインカンプやデモサイトをみてもわかりません。

カンプだと　li の幅が264px だったので、　囲っている　幅の　wrapper の960を３で割ると　320px
そこからから両端の余白60x2 ＋　内側の余白24*2 　を引くと
320　- 148　＝222 になり、　数字が合いません。

よしなにで　31%にしているのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

よしなにで　31%にしているのでしょうか？

という質問に対しては、「そうです」という回答になります。

デザインカンプから左右のpaddingが4%になっている根拠がわかりません。でも述べましたが、

「デザインカンプ」とあるので、ここでのデザインデータはレイアウトや完成形の見本であり、それのピクセル通りにコーディングすることを想定したものではありません。

です。
ここでのモチベーションは「#worksというセクションに対して3つの要素を均等に横並びにする」というものです。
Google Chromeをお使いでしたら、デベロッパーツールを使って

css
1#works ul {
2  width: 1000px;
3}
4#works li {
5  width: 30%;
6}

を追加してあげると分かりやすいかもしれません。
1000pxのul要素に対して、li要素が30%（1000pxの30%なので300px）で3つ横並びになります。
1000px - (300px * 3) = 100pxとなるので、li要素の間の余白は100px / 2で50pxということになります。
31%と相対指定で値も中途半端なのでちょっと分かりにくいかもしれませんね。

ちなみに計算が合わない理由は、wrapperの横幅960pxに対してpaddingで左右に（windowサイズの）4%余白を取っているためです。

例えばwindowサイズ1200pxで表示した場合、wrapper(ul要素も同じ)の横幅は960px - ((1200px * 4%) * 2 = 96px) = 864pxとなり、さらにli要素はそれの31%なので864px * 31% = 267.84pxとなるので、環境によってサイズが変わってきます。

投稿2022/01/21 01:33

編集2022/01/21 01:34