模写コーディングでのバグ

##質問内容

以下のサイトの模写コーディングに挑戦しているのですが、
<p>バンコクのノマドエンジニア育成講座</p>部分のポジションが見本に比べ下方に配置してしまっているのと、font-sizeが打ち消されている原因がわかりません。
Googleのデペロッパツールと見比べながら修正をしてみたのですが、原因がわからず自分一人では解決できなかったので質問してみました。

模写サイト
https://isara.life/
リセットCSS
http://html5doctor.com/html-5-reset-stylesheet/

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>Isara head</title>
7    <meta name="Author" content="" />
8    <link rel="stylesheet" href="doctor_css_reset.css">
9    <link rel="stylesheet" href="isara_head.css">
10</head>
11
12<body>
13    <section class="head">
14        <div class="head_in">
15            <header class="bar">
16                <div class="logo">
17                    <img src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" alt="">
18                </div>
19                <div class="subtitle txtxs">
20                    <p>バンコクのノマドエンジニア育成講座</p>
21                </div>
22                <div class="headcontact">
23                    <div class="contactsp">
24                        <p class="txtxs">お問い合わせ / 資料請求はこちら</p>
25                    </div>
26                    <div class="contactpc"></div>
27                </div>
28            </header>
29        </div>
30    </section>
31    <div class="box">
32    </div>
33</body>
34</html>

CSS
1* {
2    box-sizing: border-box;
3}
4
5.head {
6    position: fixed;
7    z-index: 10;
8    width: 100%;
9    background: #fff;
10}
11
12.bar {
13    padding: 20px 0;
14    height: 75px;
15    width: 1170px;
16    max-width: calc(100% - 20px);
17    margin: 0 auto;
18    position: relative;
19}
20
21.logo img {
22    width: 128px;
23}
24
25.bar .logo,
26.subtitle {
27    display: inline-block;
28}
29
30.logo {
31    margin-top: -6px;
32}
33
34img {
35    width: auto;
36    height: auto;
37    max-width: 100%;
38    max-height: 100%;
39}
40
41.subtitle {
42    position: relative;
43    bottom: -10px;
44    font-weight: 600;
45}
46
47.txtxs {
48    font-size: :14px;
49}
50
51.bar .contactsp {
52    cursor: pointer;
53    position: absolute;
54    background: rgb(216, 73, 64);
55    color: #ffffff;
56    border-radius: 25px;
57    right: 0px;
58    top: 16px;
59    padding: 11px 40px;
60}
61
62.box {
63    background-color: blueviolet;
64    height: 3000px;
65}
66

m.ts10806

2020/01/29 09:37

みてお分かりかとおもいますがコードブロック内は他のマークダウン無効になりますので、出してください。ただ、リンクもそれでは「URL」というURLで開いてしまいます。プレビュー見ながら調整してください。

sheepshonn

2020/01/29 09:44 編集

ご指摘ありがとうございます。

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

回答1件

ベストアンサー

元サイトはbootstrapを使用しているようで、そちらの記述に

css
1img {
2    vertical-align: middle;
3}

上記がありましたのでこれを追記してください。

フォントサイズにつきましては

css
1.txtxs {
2    font-size: :14px;
3}

上記のfont-size: :14px;をfont-size: 14px;に修正してみてください。

デモサイト

投稿2020/01/30 02:03

okne

総合スコア217

sheepshonn

2020/01/30 11:04 編集

ありがとうございます、模写サイトのようにコーディングすることができました。 pタグのdiv要素に原因があると思っていたので、盲点でした。私は親要素にpaddingを指定しているので、そこにpタグが配置されている原因がわからないのですが、imgタグを垂直方向中央に指定したことで、横につくpタグが上に上がったということでしょうか？また、vertical-align: middle;を指定しなくても、imgタグが中央に配置されている原因もわからないのですが、よろしければ教えていただけないでしょうか？

okne

2020/01/31 09:16

pタグはテキストへの意味付けの理由があるのだと思います。参考サイトを見てみると、ほとんどのテキストがpタグで囲ってあるのが分かります。 pタグの意味などは、こういったサイトを参考に頭に入れておいてください。 http://www.htmq.com/html/p.shtml 今回のレイアウトについてですが、親要素である.barの高さと画像の高さ+paddingを合わせて中央に表示させているようです。テキストの配置にはベースラインというものがあり、画像の配置とは初期位置が違います。それを指定するのが今回のvertical-alignの役割です。 vertical-align: middle;を消し、.barのheightを変更してみると、分かりやすいかと思います。画像とベースラインについての参考サイトです。 https://www.tagindex.com/stylesheet/img/vertical_align.html

sheepshonn

2020/02/01 08:00

非常にわかりやすかったです。参考サイトまで載せていただき、ありがとうございます。

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