前提・実現したいこと
pタグだけCSSが適用されません。
Googleの検証ツールで確認したところ、
pタグのところにだけuser agent stylesheetと記述されていました。
記述した覚えはありません。h2など他のタグは、記述したCSSは適用されます。
HTMLではリセットCSS(Eric Meyer’s “Reset CSS” 2.0)を設定しています。
できる限り調べましたが、どうしても解決できないためお力を貸してください。
プログラミングを始めたばかりの未熟者ですが、よろしくお願いいたします。
発生している問題・エラーメッセージ
Googleの検証ツールに記述されていた書き覚えのないCSS↓
p { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px;
該当のソースコード
こちらがHTML全文となります↓
<html lang="ja"> <head> <meta charset="utf-8"> <title>News</title> <meta name="description" content="ブレンドコーヒーとおいしい食材を提供するカフェ"> <!-- CSS--> <link rel="stylesheet" href="https://unpkg.com/ress@3.0.0/dist/ress.min.css"><!-- ress.css--> <link rel="stylesheet" href="css/styletairu.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap" rel="stylesheet"> <link rel="icon" type="image/png" href="images/hanabi.png"><!-- ファビコン--> <!-- CSS--> </head> <body> <div id="tairu" class="big-bg"> <header class="page-header wrapper"> <h1><a href="#"><img class="logo" src="images/siro-hanabi.png" alt="花"</a></h1> <nav> <ul> <li><a class="botan" href="#">Top</a></li> <li><a class="botan" href="#">About</a></li> <li><a class="botan" href="#">Menu</a></li> <li><a class="botan" href="#">Mail</a></li> <li><a class="botan" href="#">Content</a></li> <li><a class="button" href="#">exit...</a></li> </ul> </nav> </header> <div class="wrpper tairu-content"> <h2 class="page-title">Photo</h2> <p>あああああああ</p> </div> </div><!-- ここまでがヘッダー --> <footer> <div class="wrapper"> <p><small>© 2019 Kinmokusei.</small></p> </div> </footer> </body> </html>
こちらがCSS全文となります↓
/* 共通部分 ------------------------------- */ html { font-size: 100%; } body{ font-family: sans-serif; line-height: 1.7; color: rgb(59, 59, 59); } a { text-decoration: none; } img { max-width: 100%; } /* ヘッダー------------------------------- */ .logo{ width: 60px; margin-left: 5px; margin-top: 20px; } nav ul{ display: flex; list-style: none; margin-top: 30px; } nav ul li{ margin-left: 36px; } .button{ margin-left: 5px; background: rgb(79, 106, 129); border: 1px solid #fff; color: White; padding: 8px 30px; margin-bottom: 10px; border-radius: 100px; transition: all 180ms linear; } .button:hover{ margin-left: 5px; background:#fff; border: 1px solid rgb(79, 106, 129); color: rgb(79, 106, 129); padding: 8px 30px; margin-bottom: 10px; border-radius: 100px; transition: all 180ms linear; } .botan{ font-size: 1rem; color: White; display: flex; position: relative; display: inline-block; transition: .3s; } .botan::after { position: absolute; bottom: 0; left: 50%; content: ''; width: 0; height: 2px; background-color: rgb(79, 106, 129); transition: .3s; transform: translateX(-50%); } .botan:hover::after{ width: 100%; } .page-header{ display: flex; justify-content: space-between; } .wrapper{ max-width: 1050px; margin: 0 auto; padding: 0 4%; } /* 大きな背景画像---------------------------------- */ .big-bg{ background-size: cover; background-position: center top; background-repeat: no-repeat; } #news{ background-image: url(../images/rain.jpg); height: 270px; margin-bottom: 40px; } #news .page-title{ text-align: center; } /* 本文の装飾---------------------------------- */ .home-content{ text-align: center; margin-top: 5%; font-family: sans-serif; } .home-content p{ margin-bottom: 60px; } .page-title{ color: White; font-size: 5rem; text-align: center; font-family: sans-serif; letter-spacing: 0.3rem; letter-spacing: 0.5rem } .bbb{ font-size: 1em; background: #fff; color: rgb(231, 181, 54); border: 1px solid; padding: 15px 32px; border-radius: 80px; transition: 500ms ease; } .bbb:hover{ font-size: 1em; background: rgb(231, 181, 54); color: #fff; border: 1px solid; padding: 15px 32px; border-radius: 80px; transition: 500ms ease; } /* フッター---------------------------------- */ footer{ background: rgb(56, 56, 56); text-align: center; padding: 12px 0; color: White; font-size: 0.875rem; } /* 記事の部分---------------------------------- */ .article{ width: 70%; } .aside{ width: 22%; } .news-content{ display: flex; justify-content: space-between; margin-bottom: 50px; } .post-info{ position: relative; padding-top: 4px; margin-top: 40px; } .post-date{ background: rgb(38, 38, 38); color: #fff; border-radius: 50%; width: 100px; height: 100px; font-size: 1.625rem; text-align: center; position: absolute; top: 0; padding-top: 10px; } .post-date span{ font-size: 1rem; border-top: 1px rgba(255, 255, 255, .5) solid; display: block; width: 60%; margin: 0 auto; } .post-title, .post-cat{ margin-left: 120px; } .page-title{ font-family: YuGothic、"游ゴシック体"; font-size: 6rem; } /* tairuの装飾 */ #tairu{ background-image: url(../images/rain.jpg); height: 250px; margin-bottom: 10px; .tairu-content .page-title { text-align: center; } p{ font-size: 9rem; text-align: center; color: #fff; } コード
試したこと
リセットCSSの再設定、display:none;などの打ち消しできそうなもの
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー