Q&A
フォントの箇所ですね。こちらも誤っていました。
ご指摘ありがとうございます。
前提・実現したいこと
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件
0
ベストアンサー
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
総合スコア34075
0
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
総合スコア69606
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/17 14:45