サイト模写を行う時、全体の構造（横幅についての指定）を見分けるコツ

現在コーポレートサイトの模写をしています。
リンク内容
ヘッダー部分がどのようなcssになっているのかが中々把握できませんでした。

具体的に理解に苦しんだ部分について説明します。

全幅の時は中央よりも少し左寄りにclass名「inner wrapper」(以後wrapperと記載します）部分が配置されており、画面を狭くしていくと（レスポンシブデザインに切り替わる手前までです）このwrapper部分が左端に寄っていき（marginが狭くなっていき）左に寄り切ると今度は右側の余白部分が狭くなってきたので、先ほどの左に寄り切った時の幅が、このwrapperのmax-widthなんだな？という事は分かりました。
そして、サイト内の別のコンテンツもすべて中央揃えで、このwrapperも中央から左に寄ってきた事もあり、margin: 0 auto;を指定するのかなと考えました。

しかしこの二つを指定すると、wrapper部分は中央に寄ってしまい、デモ画面と見比べても明らかに配置が違いました。
色々調べた末にソースを確認してみると、wrapperにwidth: 100%;も指定されており、これを追加すると同じようになりました。
wrapper部分はフレックスアイテムでもあり、widthがコンテンツ幅になっていたため、marginでの中央揃えがこのような形で反映されたんだなという事が分かりました。
これを解消するためにwidth:100％;を指定したという事なのでしょうか・・？

また、今回のようなヘッダーの動きを見たとき、どのような動きがあればwidthやmax-widthが指定されているという事を把握することができるのでしょうか？何か見極めるコツなどありますか？

ひたすらコーディングして経験を積むことが重要なのは承知しておりますが、初心者でもわかりやすいコツなどがあれば教えていただけると助かります。
よろしくお願いいたします。

html
1<body>
2    <header id="header">
3      <div class="inner wrapper">
4        <h1 class="logo">
5          <a href="index.html"><img src="img/logo.svg" alt="Web Entertainment Design"></a>
6        </h1>
7        <nav>
8          <ul>
9            <li><a href="#news">NEWS</a></li>
10            <li><a href="#about">ABOUT</a></li>
11            <li><a href="#business">BUSINESS</a></li>
12            <li><a href="#company">COMPANY</a></li>
13          </ul>
14        </nav>
15      </div>
16      <a class="contact" href="#">お問い合わせ</a>
17    </header>

css
1img {
2  max-width: 100%;
3  vertical-align: bottom;
4}
5li {
6  list-style: none;
7}
8
9.logo {
10  width: 100px;
11  line-height: 1px;
12  margin-right: 60px;
13}
14.logo a {
15  display: block;
16}
17.wrapper {
18  width: 100%;
19  max-width: 1032px;
20  padding: 0 16px;
21  margin: 0 auto;
22}
23#header {
24  height: 80px;
25  display: flex;
26  justify-content: space-between;
27  align-items: center;
28}
29#header .inner {
30  display: flex;
31  align-items: center;
32}
33#header .inner ul {
34  display: flex;
35  align-items: center;
36}
37#header .inner li {
38  margin-right: 30px;
39}
40#header .inner li:last-child {
41  margin-right: 0;
42}
43#header .contact {
44  width: 200px;
45  height: 80px;
46  line-height: 80px;
47  background-color: #000;
48  color: #fff;
49  font-size: 0.75rem;
50  display: inline-block;
51  text-align: center;
52}
53#header .contact:hover {
54  background-color: #333;
55}
56

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

回答2件

ざっとしか読んでないですが、どんな熟練者であっても画面見ただけで構造が把握できるわけではないです。
同じような見た目でも必ず同じようなコードとは限らないからです。これはHTML,CSSに限りません。同じ要件でも人によってコードは変わります。

特にCSSはざっくり組む→細かいところを組み込む→全体のバランスを見て調整
を繰り返す微調整上等な対応になることが多いです。

ある程度経験を重ねると自分のスタイルが出来てくるのは出来てくるでしょうけど、人にはよりますが効率化・生産性上げるためにCSSフレームワークを採用してその上に乗せることが増えてくるのではないでしょうか

投稿2021/11/10 22:00

編集2021/11/11 05:32

m.ts10806

総合スコア80875

pckuma

2021/11/11 02:43

ご回答ありがとうございます！ >特にCSSはざっくり組む→細かいところを組み込む→全体のバランスを見て調整を繰り返す微調整上等な対応になることが多いです。そうなんですね、一発で再現できるものだと勘違いしていました。色々と試行錯誤しながら進めていく感じなんですね。ありがとうございました。

m.ts10806

2021/11/11 02:50 編集

>一発で再現できるものだと勘違いしていました。よほど平面で単調でない限りは無理です。特に余白や文章とのバランスは時にピクセル単位で調整が必要となり、苦心するものです。

退会済みユーザー

2021/11/11 04:49 編集

高評価しました。高評価を返して。 yukkuri_reimuを復活にしたい。

m.ts10806

2021/11/11 05:31

kouhyouka_kaese もともと高評価されてない低評価妥当な投稿ばかりされている人が何の冗談を。そのような人からの高評価は嫌がらせとしか捉えられませんし、その程度であなたが評価されるようなことはあり得ません。

退会済みユーザー

2021/11/11 05:35 編集

覚えてくれて、ありがとう。友達になります？連絡先教えて。 Zenn投稿しました https://zenn.dev/yukkuri_reimu/articles/e4b77c29f7a4ac

m.ts10806

2021/11/11 05:53 編集

単純に気持ち悪がってるのが分かりませんか。単純な凍結と退会させるだけではぬるい。本件と無関係な投稿しかないので通報してます。

退会済みユーザー

2021/11/11 05:56

さようなら。あなたが未来で苦しむことを祈る。

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

ベストアンサー

これを解消するためにwidth:100％;を指定したという事なのでしょうか・・？

そうですね。

何か見極めるコツなどありますか？

見極めようとせずに、Devtools で確認します。
ですので、コツはありません。
Devtools を使わない理由はないと思いますが、学習のためになにか制限をしてるのでしょうか？
そのあたりの背景を書いていただけると、何か他に言えることがあるかもしれないです。

投稿2021/11/11 01:07

Lhankor_Mhy

総合スコア36908

pckuma

2021/11/11 03:24

ご回答ありがとうございます！現在模写を行う際、まずはデモサイトを見ながらコーディングをし、つまづいた時、調べてもどうしてもわからない時はデベロッパーツールを使って内容を見てみる、といった流れで勉強をしております。実務では、実サイトをデベロッパーツールを確認しながらコーディングするという事はないと思いますので、実務で通用するスキルを身に付けるためにも、なるべく検索してみたり、こちらで質問させていただいたりしながら解決していく事を目標にしています。 (結局解決できず確認してしまう事が多いので実力、知識不足だと思いますが…)

Lhankor_Mhy

2021/11/11 03:43

デモサイトをカンプ代わりにしているということですね。実際のカンプは、ご質問の例で言う max-width のサイズなどが、図に指定してあるかあるいはPhotoshopやXDなどで開けばサイズを読み取れますが、デモサイトの場合それを目視だけで読み取るのは難しいと思います。もし、それでも縛りプレイをするならば「Computed タブだけを見る」などに緩めた方が現実的かもしれません。いずれにせよ、「デモサイトと全く同じルールになるように目指す」のではなくて、「デモサイトと同じルック＆フィールになるように目指す」のが正しいと思います。ご質問の例でも width: 100% 以外の解決法があります。

pckuma

2021/11/11 14:00

とても分かりやすく教えていただき、ありがとうございます！ >実際のカンプは、ご質問の例で言う max-width のサイズなどが、図に指定してあるかあるいはPhotoshopやXDなどで開けばサイズを読み取れますが実務についての知識が何もなく、上記についても初めて知りました！てっきり何もわからないまま、目視だけで読み取って作業をするものだと思っていました。ありがとうございます。 >「Computed タブだけを見る」などに緩めた方が現実的かもしれません。こちらのやり方で進めてみようと思います。おっしゃる通り、デモサイトと全く同じルールを目指して進めていましたが、少し考え方を変えて進めていこうと思います！ありがとうございました！

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

あなたの回答