HTML headerに設定したh1要素をline-blockに

前提・実現したいこと

headerのコンテンツを横並びにしたく、
HTMLでheaderに設定したh1要素をline-blockにしようとしています。

発生している問題・エラーメッセージ

user agent stylesheetの
h1 {display: block;}が適用され、反映されません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Forest town</title>
6    <link rel="stylesheet" type="text/css" href="style.css">
7    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
8</head>
9<body>
10    <header>
11        <h1>Forest town</h1>
12         <nav>
13             <ul>
14                 <li>会社概要</li>
15                 <li>サービス</li>
16                 <li>採用</li>
17                 <li>お問い合せ</li>
18             </ul>
19         </nav>
20    </header>
21
22    <main>
23        <section id="main-visual">
24            <h1>Clean in the city</h1>
25            <h2>クリーンな空気で快適な生活を</h2>
26            <img src="eha0037-003.jpg">
27        </section>
28    
29        <section id="service">
30            <h1>サービス</h1>
31            <p>ハウスクリーニング</p>
32            <ul>
33                <li>エアコン</li>
34                <li>浴室</li>
35                <li>洗面所</li>
36                <li>キッチン</li>
37            </ul>
38            <p>etc</p>
39            <p>テナント</p>
40            <ul>
41                <li>オフィスの床面清掃</li>
42                <li>飲食店の店内清掃</li>
43            </ul>
44            <p>etc</p>
45        </section>
46        
47    </main>
48    
49</body>
50</html>

CSS
1html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
2    margin: 0;
3    padding: 0;
4    border: 0;
5    font-weight: normal;
6    font-size: 100%;
7    vertical-align:baseline;
8    -webkit-box-sizing: border-box;
9    -moz-box-sizing: border-box;
10    box-sizing: border-box;
11  }
12  article, header, footer, aside, figure, figcaption, nav, section { 
13    display:block;
14  }
15  body {
16    line-height: 1;
17    -ms-text-size-adjust: 100%;
18    -webkit-text-size-adjust: 100%;
19  }
20  ol, ul {
21    list-style: none;
22    list-style-type: none;
23  }
24
25/*ALL*/
26font-family: 'Noto Serif JP', serif;
27
28/*ヘッダー*/
29header h1 {
30  display: inline-block !important;
31}
32
33header ul {
34    display: flex;
35    justify-content: flex-end;  
36}
37

試したこと

!importantを追記しましたが、変化ありませんでした。

補足情報（FW/ツールのバージョンなど）

リセットCSSはネットから適当に拾ったものです。

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

回答2件

ベストアンサー

h1 はちゃんと inline-block になってます。
header の子要素である h1 と nav を inline-block で横並びにしたいのなら nav の方も inline-block にする必要があります。

ただ、headerのコンテンツを横並びにしたいなら、Flexboxを使うのが簡単だしレイアウトの自由度が高いです。

例えば、下記のCSSで横並び、水平位置両端揃え、上下位置中央揃えになります。

css
1header {
2  display: flex;
3  justify-content: space-between;
4  align-items: center;
5}

投稿2020/10/15 15:20

hatena19

総合スコア33715

karin0523

2020/10/17 14:45

ありがとうございます。解決しました。

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

CSS
1/*ALL*/
2font-family: 'Noto Serif JP', serif;
3```ここがおかしいです。
4```CSS
5/*ALL*/
6* {
7    font-family: 'Noto Serif JP', serif;
8} /* 少なくともこうでは？ */

投稿2020/10/15 15:05

kei344

総合スコア69407

karin0523

2020/10/16 15:09

フォントの箇所ですね。こちらも誤っていました。ご指摘ありがとうございます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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