cssで16gridの考えを用いた？プロパティ値の指定方法が理解できません…

Question

前提・実現したいこと

htmlで作成している簡単なランディングページに対してコンテンツを追加するため、
発注元から受け取った既存のcss（SCSS記法）ファイルに、記述を追加したいと考えています。

私はいつもプロパティの値をピクセル指定で行っていたため、今回先方から受け取ったコードが(お恥ずかしながら)理解できませんでした。。
Web検索に２時間かけても答えにたどり着けず、知見のある方へ見ていただけないか…と投稿しました。

分かっていること

scssファイルを見ていると、どうやらブロックを16分割して考えるグリッドレイアウトシステムデザインを作成する際に16分割してレイアウトを考えるの手法に基づいて
可変に対応できるよう割合指定をしているところまでは分かっているのですが、16で割る相手の数が何故そうなっているのかが理解できません。。

（参考例）元のscssファイルに書かれている記述

 .content__item{
   padding: (24/14) *1em;
   margin-top: (16/16) *1em;
   margin-bottom: (16/16) *1em;
   font-size: (14/16) *1em;
}

自分で作成したクラスの各値を↑の書き方に合わせたい

 .content__contact{
   padding: 20px;
   margin-top: 30px;
   margin-bottom: 30px;
   font-size: 14px;
}

Answer 1

グリッドレイアウトシステムは関係なく、emという単位を使っているのが理由だと思います。

16で割る相手の数が何故そうなっているのか

emはフォントサイズを基準とした単位なので、
pxをemに変換するのに（デザイン上のpx/基準の文字サイズpx）をしているのでしょう。

でも一部14で割っているところはなんでしょう？
この場合16で割るのが妥当な気がしますが、
これは本人でないとわからないですね、、、

入れ子の構造になると、複利計算されてちょっと厄介なところがあります。
（私はemがよっぽど適した場面の時以外はほとんど使わないです^^;）

Comments

[退会済みユーザー]

>Lishさま

ご回答ありがとうございます！また、混乱を招いて申し訳ありません。。
16グリッドと何度も言っているのは、ご指摘の通りcssのgridsystemではなく、デザイン作成における16分割してレイアウトを行う手法・考え方のことでした。。
（ あわせて本文も修正しております！ ）

元のデザインデータを見ても、メインの960px幅を16分割、メインエリア内のカラムも16分割などで作っているようなので、おそらくこの16という数字はデザインにおける分割数である可能性が高いのですが、
「(14/16) *1em;」のような書き方をいろいろな方法で調べても全くWeb検索で見つからず…元の作者さんの独自の考え方なのかな…？という気がしていました。。

>pxをemに変換するのに（デザイン上のpx/基準の文字サイズpx）をしているのでしょう。
なるほど…確かにデザインデータ上のフォントサイズをみると、そのようになっていました！
理解できそうな気がするので、もう少しじっくり見てみます！

>でも一部14で割っているところはなんでしょう？
この点は私も気づいておりませんでした…！全く想像がつかないですね。。

ぼんやりした質問を投げてしまい恐縮です、、ご回答に感謝いたします！