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

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

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1696閲覧

pタグだけCSSが適用されない

mmmin

総合スコア6

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/12/11 11:41

編集2020/12/11 12:41

前提・実現したいこと

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>&copy; 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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cerfweb

2020/12/11 12:11

display: none;にするとその要素が表示されなくなるというのはご存知でしょうか。
mmmin

2020/12/11 12:21

display: none;記述してもしなくても、Pタグは表示されたままで文字の大きさも色もかわりません、、、。 Googleの検証ソースでdisplay: block;と記述されていたので、打ち消しになるのかなと思い記述してみてました><
cerfweb

2020/12/11 12:24

htmlのヘッダ部分(cssが読み込まれている部分)及び該当するpタグを含んだ部分を追記してもらえますか。
guest

回答1

0

ベストアンサー

cssの#tairuに閉じカッコ } がありません。それが原因かと思われます。

投稿2020/12/11 12:49

cerfweb

総合スコア1907

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mmmin

2020/12/11 13:21

cerfwebさんのおかげで解決いたしました!!! 修正いたしましたところCSS適用されました! 本当にありがとうございます><
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問