模写サイト　フォントと要素の位置がずれてしまう

こちらのサイトの模写しています。

ヘッダーのタイトル「Shiro」と「-White Flower shop-」の位置が元サイトと合いません。
またフォントも違います。

そして、.main-ttlと.sub-ttlの要素内にテキストが収まりません。
XDで制作されたデザインの寸法を見て、同じ数字を記入したのですが、うまくできません。
どこが間違っているのか教えて頂けると嬉しく思います。

どうぞ、よろしくお願い致します。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Shiro</title>
7    <link rel="stylesheet" href="css/rss.css">
8    <link rel="stylesheet" href="css/style.css">
9</head>
10<body>
11    <header class="header">
12            <nav class="nav">
13                <div class="nav-ttl-wrapper">
14                    <p class="nav-ttl c-white fz-36">Shiro</p>
15                </div>
16                <div class="nav-hamburger-wrapper">
17                    <span class="bar bar-top"></span>
18                    <span class="bar bar-middle"></span>
19                    <span class="bar bar-bottom"></span>
20                </div>
21            </nav>
22            <div class="main-ttl-wrapper c-white">
23                <h1 class="main-ttl">Shiro</h1>
24                <span class="sub-ttl">White flower shop</span>
25            </div>    
26    </header>
27    <main class="main">
28        <section class="concept-wrapper">
29
30        </section>
31        <section class="work">
32
33        </section>
34        <section class="florist">
35
36        </section>
37        <section class="shop-information">
38
39        </section>
40        <section class="contact">
41
42        </section>
43        <footer class="footer">
44
45        </footer>
46    </main>
47    
48</body>
49</html>

CSS
1@charset "UTF-8";
2
3* {
4    box-sizing: border-box;
5}
6
7body {
8    font-size: 16px;
9    color:#2B2B2B;
10    max-width: 1280px;
11    width: 100%;
12    margin: 0 auto;
13}
14
15.fz-24 {
16    font-size: 24px;
17    font-weight: bold;
18    color: #333333;
19}
20
21.fz-36 {
22    font-size: 36px;
23    font-weight: bold;
24    color: #333333;
25}
26
27.c-white {
28    color: #fff;
29    /* font-weight: bold; */
30} 
31
32.header {
33    width: 100%;
34    height: 620px;
35    margin: 0 auto;
36    background-image: url(../img/header.png);
37    background-position: center;
38    background-size: cover;
39    position: relative;
40}
41
42.nav {
43    width: 960px;
44    height: 64px;
45    margin: 0 auto;
46    position: absolute;
47    top: 40px;
48    left: 160px;
49    display: flex;
50    justify-content: space-between;
51    align-items: center;
52    z-index: 1;
53}
54
55.nav-ttl {
56    width: 100%;
57    height: 100%;
58    line-height: 1.4;
59    font-family: Myriad Pro,Regular;
60}
61
62.bar {
63    width: 32px;
64}
65
66.bar-top,
67.bar-middle,
68.bar-bottom {
69    display: block;
70    content: '';
71    border: 1px solid #fff; 
72    margin-bottom: 8px;
73}
74
75.bar-bottom {
76    margin: 0;
77}
78
79.main-ttl {
80    font-size: 120px;
81    font-family: Myriad Pro,Regular;
82    line-height: 1.4;
83    position: absolute;
84    top: 216px;
85    left: 511px;
86    width: 258px;
87}
88
89.sub-ttl {
90    font-family: ヒラギノ角ゴ Pro,w3;
91    height: 16px;
92    font-size: 16px;
93    display: block;
94    margin: 0 auto;
95    word-spacing: 4px;
96    line-height: 1.68;
97    position: absolute;
98    top: 360px;
99    left: 569px;
100
101}
102
103.sub-ttl::before,
104.sub-ttl::after {
105    display: inline-block;
106    width: 12px;
107    height: 2px;
108    content: "";
109    border: 1px solid #fff;
110    vertical-align: middle;
111    margin: 0 8px;
112}
113
114.main {
115    width: 960px;
116    margin: 0 auto;
117}

m.ts10806

2020/08/18 23:12

＞模写サイトで詰まっていますタイトルは要件を記載してください。現状の問題点や実現したいことの詳細 https://teratail.com/help/question-tips#questionTips3-1 >元サイトで測った寸法と同じ数字になっているのですがどう測ったのでしょうか。「モニターに定規をあてて」なら不正確すぎます。

Soleil.Web

2020/08/18 23:56

説明不足で申し訳ありません。 XDからの模写ですので、XDで寸法が出ているために、そちらを記入しています。

m.ts10806

2020/08/19 00:13

質問は編集できますので。

Soleil.Web

2020/08/19 00:20

ありがとうございます。

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

回答3件

ベストアンサー

またフォントも違います。

フォントについては、Web Fontsを使わない限り、ブラウザ側にあるフォントを使いますので、閲覧者によって違うフォントとなることは、むしろ前提として受け止める必要があります。

投稿2020/08/19 00:24

maisumakun

総合スコア145184

Soleil.Web

2020/08/19 00:36

分かりました。ありがとうございます。

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

XDの行間や文字間の計算方法は以下のようです。

参考サイト:
https://isi-log.com/web-design/484/

line-heightとmarginの関係で、縦方向の余白が広がってしまう事象があるので、以下の参考サイトを見てみるといいかもしれません。
(1行の要素の場合、line-height: 1;を指定するとズレがなくなる場合もあります。)

参考サイト:
https://coliss.com/articles/build-websites/operation/css/simple-css-remove-top-space.html

投稿2020/08/19 04:15

new1ro

総合スコア4528

こんにちは。

h1要素に定義されているデフォルトスタイルのマージンが影響しているのではないでしょうか。
リセットCSSを使ってみてはいかがですか？　たとえば：

html
1<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

投稿2020/08/19 03:18

Lhankor_Mhy

総合スコア36115

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

模写サイト　フォントと要素の位置がずれてしまう

関連した質問