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

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

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

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

Q&A

解決済

2回答

2363閲覧

吹き出し見出しの下部にある点線を消したい

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

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

0グッド

0クリップ

投稿2018/08/05 12:13

編集2018/08/05 13:52

前提・実現したいこと

HTMLおよびCSSの初心者です。
見出しの下部にある点線を消したいのですが、
CSSのどこをどのようにいじれは良いのかわからないので教えてほしいです。
なお、特定の2つの見出しにだけ点線が表示されてしまい、
他の見出しについては表示されない状態です。

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

イメージ説明

イメージ説明

↑枠の下部にある点線を消したいです。

該当のソースコード

現状のCSSは下記です。(吹き出し見出しのCSS)

/*↓吹き出しの見出し*/ h2 { position: relative; padding: 0.6em; background: #e0edff; } h2:after { position: absolute; content: ''; top: 100%; left: 30px; border: 15px solid transparent; border-top: 15px solid #e0edff; border-bottom: 15px solid transparent; width: 0; height: 0; }

試したこと

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

当該サイトURL
【解決したため、削除しました】

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

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

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

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

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

kei344

2018/08/05 13:08

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
退会済みユーザー

退会済みユーザー

2018/08/05 13:40

回答いただきありがとうございます! 申し訳ございません、最初に回答してくださった方の方法で無事解決しました!
kei344

2018/08/05 13:49

ここは「質問への追記・修正の依頼」ですので、「回答」ではありません。質問本文は編集することが可能なので、その依頼をしています。
退会済みユーザー

退会済みユーザー

2018/08/05 13:53

不慣れなもので、大変失礼しました。理解しました。質問のソースコードをコードブロックで囲みました。ご指摘ありがとうございます!
guest

回答2

0

当該のコードには点線になる原因が含まれていません
原因はどこか別の部分にあると思われます

  1. エディタでCSSのソースコードを開き,「Ctrl+F」等のコマンドで検索ウィンドウを表示してください

(Windowsの場合)

  1. 「dotted」を,ソースコードの中から検索してください
  2. ヒットした結果が,当該要素に影響するプロパティであった場合,原因はそれかもしれません.

逆にヒットしなかった場合,点線は画像か,他の要素との干渉の結果かもしれません

投稿2018/08/05 12:25

liveasnotes

総合スコア1284

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

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

退会済みユーザー

退会済みユーザー

2018/08/05 12:32

回答ありがとうございます! ちなみに初心者ゆえ「はてなブログ」を使用しており、 カスタマイズできるCSSを見た限りでは、「dotted」という記述はありませんでした。 よって他に原因があるのかもしれないですが、見当が付かないです汗
liveasnotes

2018/08/05 12:38

既にサイトを持っている場合は,サイトのURLを晒すのが手っ取り早いです Teratailの文化的に,個人サイトを晒しても,大きな問題にはなりにくいので. もしちょっと躊躇するなら,質問を解決済みにする前に,URL部分を「■質問終了につき削除■」などに置き換えるというのはどうでしょうか
退会済みユーザー

退会済みユーザー

2018/08/05 12:46

実際のサイトを見るとわかるもんなんですか?知らなかったです! 質問欄にURLを追記しました。 後ほど削除します。
liveasnotes

2018/08/05 12:54

解決済みにすると,確か質問の再編集ができなかったような気がするので,一応,注意してください
退会済みユーザー

退会済みユーザー

2018/08/05 13:12

ブラウザー開発者ツールを開き、 下記が問題であることは調べられました。 /* border-bottom: 1px dotted #999; */ しかし、これをどうやってブログに反映させれば良いのでしょうか。 はてなブログの機能でCSSがカスタマイズできるシートには、そもそもこのような記述はないのです。 ブラウザー開発者ツール上はあくまで確認用で、反映はできないですよね? 初歩的な質問で大変申し訳ございません。
guest

0

ベストアンサー

ブラウザの開発者ツールを開くと,一発で原因が分かります
イメージ説明
調べたい要素の上で右クリックすると「要素を検証(Q)」(って書いてあったと思う.こちら英語表記環境につき,日本語表記はあやふや)があるので,それですぐ分かります.


これをどうやってブログに反映させれば良いのでしょうか。
はてなブログの機能でCSSがカスタマイズできるシートには、そもそもこのような記述はないのです。
ブラウザー開発者ツール上はあくまで確認用で、反映はできないですよね?

プロパティ名は既に分かっているので,こちらをカスタマイズできるシートに追記してみたらどうでしょう

css

1.entry-content h1, 2.entry-content h2, 3.entry-content h3{ 4 border: 0; 5}

ただし,HTMLは上から順番に読み込むので,CSSを読み込む<style>要素の前後関係によっては,これでは効きません.こうしましょう

css

1.entry-content h1, 2.entry-content h2, 3.entry-content h3{ 4 border: 0; !important 5}

cf. CSSで!importantを使った優先順位の変更【初心者向け】

投稿2018/08/05 12:50

編集2018/08/05 13:24
liveasnotes

総合スコア1284

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

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

退会済みユーザー

退会済みユーザー

2018/08/05 13:31

とっても丁寧に教えていただき、ありがとうございます! シートにコピペしてみたら、吹き出し見出しの点線が消えました! また、大見出しの下部にある点線も消えました! ただ、大見出しの左側にある縦の青いラインも一緒に消えてしまいました汗
liveasnotes

2018/08/05 13:35

ああ,それはborder: 0;で枠線の太さを0にしたからですね 個別にやりたい場合は, ```css .entry-content h3{ border: 0; } ``` とするか, ```css .entry-content h3{ border-bottom: 0; } ``` というように 指定個所を限定的にすると良いです
liveasnotes

2018/08/05 13:37

```css ``` は,マークダウンという表記方法で,ソースコードを表すものです (回答の際は,これが自動的に枠で囲まれ,シンタックスハイライトが付きますが,返信の際はプレーンなまま出力されるようです)
退会済みユーザー

退会済みユーザー

2018/08/05 13:39

あ、根本的に理解不足ですみません。 個別に設定したら、理想の形に出来ました!!!! 本当にありがとうございます><
退会済みユーザー

退会済みユーザー

2018/08/05 13:41

個人サイトのURLは削除しますね!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問