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

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

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

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

HTML5

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Q&A

解決済

2回答

696閲覧

吹き出しの三角部分を消して普通のボックスとして使いたい

AmiI

総合スコア24

CSS3

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

HTML5

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

0グッド

0クリップ

投稿2020/03/03 04:51

吹き出しの三角部分を消して、普通のボックスとして運用したいのですが、できません。
明らかに三角部分であると思われる箇所は消したのですが、それでも残ってしまいます。

css

1<style> 2.flex{ 3 padding: 2.5% 0; 4 display: flex; 5 flex-direction: row; 6 position: relative; 7} 8.flex > div{ 9 width: 50%; 10 font-size: 20px; 11 margin: 0; 12 text-align: center; 13 padding: 10px; 14 border: 1px solid #0454a4; 15} 16.left-box { 17 color: #ffffff; 18 background-color: #0454a4; 19 line-height: 0.5 20} 21</style>

html

1<div class="flex"> 2 <div class="left-box"> 3左のボックスの文字 4 </div> 5 <div c1ass="right-box"> 6 <p style="padding: 10px; margin: 10px;"> 7 <font color="#696969"> 8右のボックスの文字 9</font> 10 </div> 11</div>

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

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

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

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

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

guest

回答2

0

キャッシュを消してみてください。あと、font要素は廃止されています。

【【みんなの知識 ちょっと便利帳】Webページを最新の状態で見る - ブラウザーのフルリロード、スーパーリロード方法】
http://www.benricho.org/Tips/page_reload/

【Chromeブラウザでスーパーリロードする方法 #Pistatium】
http://kimihiro-n.appspot.com/show/86002

【Webブラウザのキャッシュ削除と、スーパーリロード方法一覧 | uzurea.net】
http://uzurea.net/cacheclear-and-superreload-2018/

投稿2020/03/03 05:01

kei344

総合スコア69364

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

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

AmiI

2020/03/03 05:09

すみません、今Bracketsのコードプレビュー機能を使っているので、キャッシュを消そうにもあまり意味がないのですが…。
kei344

2020/03/03 05:14

そういう情報は質問本文に入れましょう。とりあえずブラウザで試してください。
AmiI

2020/03/03 05:15

ブラウザで試すといいますと?
kei344

2020/03/03 05:18

HTMLをブラウザで表示をして同じように表示されるか確認してみては、と言っています。
AmiI

2020/03/03 05:19

コードプレビューでブラウザ(グーグルクローム)で表示されるのですが…。
kei344

2020/03/03 05:25

試したくないならしなくて良いです。 反映されないパターンとして、保存していない、別のファイルを編集している、キャッシュが考えられますが、Bracketsがキャッシュについて試せないならブラウザで試してみればよいだけです。
AmiI

2020/03/03 05:34

どうすればHTMLをブラウザで表示できるんですか? 自作のサイトで表示、となるとものすごい手間がかかるので、それだけはやめてくださいね。
kei344

2020/03/03 05:39

ブラウザにHTMLファイルをドラッグ&ドロップすればよいですが、その部分からわからないならネット上で断片的な情報で勉強するより入門書などを買って勉強するのが良いです。
AmiI

2020/03/03 05:41

それをする手間はないので、もっと効率的に検証したいのですが。 というか、どうしてBracketsが上手く動かないんですか? そこが嫌なのですが。
kei344

2020/03/03 05:49

それが手間と言うのならサイトの公開後の管理はもっと手間になりますよ。Bracketsが問題なのか、コードが問題なのか、それを切り分けるためにブラウザで確認すればどうでしょう、と提案しました。それが無理なら他の回答が付くのを待ってください。
dit.

2020/03/03 05:51 編集

WindowsならHTMLファイルを右クリック→プログラムから開く→好きなブラウザを選択することでもブラウザで開けるはずですが、そこまで手間のかかることでしょうか。(先に提示してあるドラッグ&ドロップでももちろん可) 質問に提示してあるコードだけであれば三角の描画はありませんので、kei344さんの指摘通りキャッシュか編集しているところが違うか保存ができていないかあたりが疑う箇所だと思います。 私はBracketsを使ったことがないので有効かはわかりませんが、以下のアドレスの「その他のライブプレビューの問題」-「ライブ・プレビューのプロファイルとキャッシュを消去する」(本文の下の方です)を参考にBrackets側のキャッシュをクリアしてみてください。 https://webdesign.vdlz.xyz/Editor/Brackets/Setting/LivePreview/LivePreviewIsn'tWorking.html kei344さん横から失礼しました。
guest

0

自己解決

せっかく回答していただいたのですが、自己解決しましたので書いておきます。
最初の「.flex」や「.left-box」を別部分で使っていたため、それが適用されていたみたいです。

ですので、htmlの<div class=〜の部分を別の名前に変え、さらに「.flex」や「.left-box」も別の名前に変えることで、解決しました。ありがとうございます。

イメージ説明

投稿2020/03/03 05:56

AmiI

総合スコア24

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問