innerについて　それぞれの合わせ方

Q.それぞれのitemの位置調整の基準線についてです。
よく、デザイン図をみると線が2種類あります。innerとinnerの外側にあります。これらはどちらに基準を置くべきか困惑しています。アドバイスをいただけると幸いです。

innerの枠内の中に収めるためにデザイン図に線が表記されています。
この中に合わせるために、この線を基準にmarginやpaddingの指定をすればよいのでしょうか？

innerの外側の線を基準にそろえればよいのでしょうか？

ポイントは、それぞれの項目で1000px(inner)をはみ出す項目とはみ出さない項目があることです。
ご教授お願い致します。m(__)m

やってみたこと/考えたこと
・1innerの線を基準にする場合と2innerの外側基準の場合の2種類があるのではないかと考えました。
1じゃinner線内にitemが入る場合
2だとinnerをはみ出す場合です。

下記にデザイン図を添付します。この場合のbusinessの画像はどちらを基準に余白などを取ればよいのでしょうか？

HTML（一部）
1 <section class="business content-wrapper">
2            <h2 class="section-title biz-title">
3                <div class="en-title">business</div>
4                <div class="jp-title">事業内容</div>
5            </h2>
6            <div class="biz-wrapper">
7            <!--1-->
8                <ul class="biz-name1">
9                    <li class="biz-list">
10                        <p class="biz-ttl">- Web制作・マーケティング</p> 
11                        <img src="./img/elneed lake midnight.jpg" alt="" class="biz-img">
12                    </li>
13                    <li class="biz-list">
14                    <p class="biz-ttl">- プロモーション企画・制作</p> 
15                        <img src="./img/small Lagoon at elneed.jpg" alt="" class="biz-img">
16                    </li>
17                </ul>
18                <!--2-->
19                <ul class="biz-name2">
20                    <li class="biz-list">
21                    <p class="biz-ttl">- インターネットメディア事業</p> 
22                        <img src="./img/To go anead in elneed.JPG" alt="" class="biz-img">
23                    </li>
24                    <li class="biz-list">
25                    <p class="biz-ttl">- ソーシャル企画・運営</p> 
26                        <img src="./img/Me at elneed.jpg" alt="" class="biz-img">
27                    </li>
28                </ul>
29            </div>
30
31        </section>

CSS(business)
1.biz-wrapper {
2  display: -webkit-box;
3  display: -webkit-flex;
4  display: -ms-flexbox;
5  display: flex;
6  -webkit-box-pack: justify;
7  -webkit-justify-content: space-between;
8      -ms-flex-pack: justify;
9          justify-content: space-between;
10}
11
12.biz-wrapper .biz-name1 {
13  display: -webkit-box;
14  display: -webkit-flex;
15  display: -ms-flexbox;
16  display: flex;
17  -webkit-box-orient: vertical;
18  -webkit-box-direction: normal;
19  -webkit-flex-direction: column;
20      -ms-flex-direction: column;
21          flex-direction: column;
22  margin-top: 191px;
23  margin-left: 300px;
24}
25
26.biz-wrapper .biz-name1 .biz-list {
27  margin-right: 64px;
28}
29
30.biz-wrapper .biz-name1 .biz-list > p {
31  display: block;
32}
33
34.biz-wrapper .biz-name1 .biz-list .biz-img {
35  width: 100%;
36  max-width: 368px;
37}
38
39.biz-wrapper .biz-name2 {
40  display: -webkit-box;
41  display: -webkit-flex;
42  display: -ms-flexbox;
43  display: flex;
44  -webkit-box-orient: vertical;
45  -webkit-box-direction: normal;
46  -webkit-flex-direction: column;
47      -ms-flex-direction: column;
48          flex-direction: column;
49  margin-top: 91px;
50  margin-right: 300px;
51}
52
53.biz-wrapper .biz-name2 .biz-list > p {
54  display: block;
55}
56
57.biz-wrapper .biz-name2 .biz-list .biz-img {
58  width: 100%;
59  max-width: 368px;
60}
61

hope_mucci

2021/07/04 15:43

画像では右と左に線が1つずつあり、その各々の線に対し、淡い水色と濃い水色の2種類の線が引かれている、ということでしょうか。画像解像度が荒くしかもjpegなので色境界部分が潰れて視認しづらいです。解像度の高いPNGファイルを投稿したほうが見やすくなるので回答がつきやすいでしょう。ファイルサイズが大きくなる場合は問題部分を拡大した画像を用意するのも一つです。いずれにせよ図版の画像はPNGファイルで投稿してください。

free_teku

2021/07/05 07:39

かしこまりました。本日の夜に投稿しなおします！よろしくお願い致します。

hope_mucci

2021/07/05 15:54

修正された画像、やや改善されましたが依然jpegの特徴的なモアレがあり、jpegからpngに変換したものと推測されます。また、まだ線の境界が明確に視認できないほど解像度が低いです。最低でもピクセル等倍以上の倍率で表示し、PNG形式でスクリーンショットを保存してアップしてください。現状の画像でも水色の線の詳細は分かりません。また、水色の線がどのような意図であるか、デザインを作成した方に確認しましたか？確認すればすぐわかるようなことだと思いますが、何か問合せできない理由があるのでしょうか。

free_teku

2021/07/05 16:12

回答ありがとうございます。結論、PNGでスクショする方法がわかりませんでした。調べましたが、、また、問い合わせもできないです。しているのですが、一向に返事を頂けない状況です。大変申し訳ございません。こういったデザイン（水色の余白内に入る項目と入らない項目です）で、どこに基準を置きながら皆さんは書いているのか気になっています。 inner線は1000pxで左右200pxになっています、

hope_mucci

2021/07/05 17:42

OSが分かりませんが、現在はwindowsもmacもデフォルトのスクリーンショットフォーマットはpngです。デザインはXDだと思いますが、拡大してスクリーンショットをとるくらい可能でしょう。基準線の詳細な状態を知りたいのでお願いしています。対応していただけないでしょうか？あと、質問を後回しにしていましたが、この質問で言うinnerとは何を指しているのでしょうか？説明がないので分かりやすい説明をお願いします。問合せしても返事が来ないとのことですが、返事が来なければ仕事にならないのであらゆる手段で連絡しましょう。ビジネスなのですから相互の認識を合わせないと後でゴネゴネになります。電話、メール、問合せフォーム等駆使して全力で連絡しましょう。

free_teku

2021/07/06 07:30

本日、行ったところ、スクリーンショット後に.PNGに変更できる形でした！改めて、添付しましたが、何ら変わってないのかなと感じます。 hopeさんがおっしゃるようにしていますが、改善の余地が見当たらないです泣退勤後、改めてしてみます！！ innerとは、水色の線を意味しています。水色の線の範囲内はwidth1000px,外側のデザインいっぱいいっぱいだと左右200px加算で1400pxです。

hope_mucci

2021/07/06 10:27

とりあえず、Businessの部分を200%以上に拡大したスクリーンショットを添付してください。水色の線周りの詳細が知りたいので。

free_teku

2021/07/07 06:02 編集

hopeさん、行いました。212pxoverです。ご確認お願い致します。

hope_mucci

2021/07/07 08:47

既存の画像は削除しないでください。問題点が余計分かりにくくなります。何でBusinessのキャプションと逆側の拡大画像を貼ったのか大変疑問でしたが、水色の基準線とbusinessセクションの画像にあたる領域の間の余白をどう扱うべきかという質問だったのでしょうか？質問文が分かりにくくて理解できませんでした。スクリーンショットにどの線が問題であるかを書き込んでくれたらすぐに質問内容が理解できたかもしれません。それに、最初の補足質問の「画像では右と左に線が1つずつあり、その各々の線に対し、淡い水色と濃い水色の2種類の線が引かれている」というところは論点ではないということですね。そうであるならはっきり否定してください。否定がなかったので水色の線の濃淡にしか注目しませんでした。（結局水色の線は両側1対だけ？画像では濃い水色の細い線の下に薄い水色の太い線があるように見えますが実際はそうではない？それを正確に知りたかったために"PNGでのスクリーンショット"を要求したのです）しかしそれだと「innerの線が2種類ある」という説明と矛盾します。スクリーンショットに書き込んで説明していただかないと本当の問題がわからないです。先述したように水色の線（幅1000pxの基準線）とbusinessセクションの各画像（というか各アイテム）の余白についてが問題なのでしたら、回答は「デザイナーに質問すること」の1点しかありません。デザイン上の疑義は当事者同士で解決すべきです。デザイナーと連絡が取れないのであれば顧客と相談してください。

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

回答1件

ベストアンサー

質問補足からやり取りした情報をもとに考えると、こういうことなのだろうと思います。

まずBusinessセクションの中の各アイテム（事業内容1つ1つの項目のこと）について、このような構造を想定していると思います。

セクションごとinner（水色の線を基準とする領域。width:1000px でmargin-left/right:auto）の中に入っている。
それぞれのアイテムはおそらくdisplay:flexを指定したdivに入っている（以後これを内部コンテナと呼ぶ）。
添付された画像から各アイテム間の余白を計測すると、innerの領域が625px、水色線から画像領域までが60px、アイテム間の余白は45px
innerは1000pxと説明されているので、それぞれに比率を計算すると、x=96, y=72
y=72によりアイテムの左右マージンは36pxずつと推測される。すると内部コンテナの左右余白は60pxずつとなる。

図解するとこうなります。

businessセクションはinnerを表す水色の基準線内に全部入っているので、inner線を基準に図の様に余白をとればよいと一般的に考えられるでしょう。

また、上部にある水色の基準線About領域については、ウィンドウ横幅いっぱいのボックス内に描画するつもりで制作されているのでしょう。
なので、下図のようなボックスで構成する意図であると思います。

この構成はごく一般的な手法であると思います。Web上にあるオンライン学習コンテンツのLPページ制作講座は皆このような構成であると思われます。

最後に

繰り返しになりますが、デザイン上の疑義は必ずデザイナーに問い合わせてください。疑問点のすり合わせをせず自分勝手に解釈して制作した結果デザイナーや顧客の意図通りではない、と言われたら大変です。なので、私の回答も鵜呑みにせず必ずデザイナーと質疑のやり取りを行ってください。

追記

2021-07-08現在のcodecanpサイトから当該のXDデータを取得して表示してみましたが、質問文の表示とは異なるガイド線のファイルになっていました。短期間で差し替えがあったようには見えない（ほかの課題のXDも同じように片側2本のガイド線がある）ですが、自分でガイド線をいじりましたか？

投稿2021/07/07 11:19

編集2021/07/08 15:09

hope_mucci

総合スコア4447

free_teku

2021/07/08 05:43

hopeさん、ご丁寧にご回答いただきき、心から感謝申し上げます！！初めの算出方法の理解が追い付いていません。なんとなく、x=96などは全体の(innerではない線)1400pxまでの余白かなと感じていますがこの算出法に興味があります。名前だけでも教えていただけることは可能ですか？デザイなーさんについては、以後気を付けます。仕事はコミュニケーションあってこそ成り立つものだと感じますので、気を付けます！！今回のものは、「恥ずかしながら」codestepさんのサイトのデモサイトです。こちらの初級編を題材に質問しました。大変お手数をおかけしたことと、丁寧な回答に頭上がりません！！ありがとうございます！！！

hope_mucci

2021/07/08 15:16

codestepの課題であるならば、最初からそのことを明かしてくれた方が話が早かったです。あんな回りくどい補足依頼をせずともXDファイルを見て回答ができました。あそこは今質問をシャットアウトしているようなので内容に疑問があってもどうにもならないでしょう。 codestepサイトからDLしたXDファイルを見ると確かに両側2本ずつの水色の線があります。これはガイド線です。レイアウトの説明に「全幅」と「1000px」とありますので、内側の線が1000pxコンテンツガイドで、外側の線はその余白のつもりなのでしょう（この余白はデザイン上全く無意味ですが）また、レイアウト上のヒントは全部コーディングのヒントとして載っているのでそちらを参照してください。

free_teku

2021/07/09 02:46

本当に申し訳ありません！！！お手数おかけしました！！謝罪いたします！水色の線は、もしかしたらいじったかもしれません！今回は、基準線について気になり、質問しました。コンテンツ毎に、水色の線内(inner内)とinner外のものがあり、どこを基準にmargin,paddingを取ったら良いのかが気になり、質問させていただきました。いろいろと試してみましたが、inner外の線をどのコンテンツでも基準に取った方が良いのではないか？と考えましたが、今後、どんなサイトや案件に出会すか、分からずご質問いたしました。

hope_mucci

2021/07/09 06:01

> コンテンツ毎に、水色の線内(inner内)とinner外のものがあり、どこを基準にmargin,paddingを取ったら良いのかが気になり、質問させていただきました。結論は「分かりません」としか言いようがないです。おそらく内側のガイド線がコンテンツの境界で、外側のガイド線がその余白のつもりだと思われますが、その余白がpaddingなのかmarginのつもりなのかはどこにも説明がないので分かりません。問い合わせフォームもシャットダウンしているので質問もできません。自分で勝手に判断するしかないでしょう（もしくは無視でいいかも）ただ、今回のようなフリー素材の制作ではなく、実際の業務での制作であれば、疑問点は顧客とよく相談して合意と取るようにしてください。何度も繰り返し言っていますが、「合意をとる」プロセスは後からトラブルを防ぐためのとても大事なプロセスです。

free_teku

2021/07/09 07:22

かしこまりました。ご回答ありがとうございます！実案件では合意を取る意識を持ちながら、気をつけます！ご丁寧なご回答ありがとうございます。有意義な時間でした！

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