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

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

新規登録して質問してみよう
ただいま回答率
85.37%
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

解決済

2回答

1286閲覧

半分だけ色が違うボックスに吹き出しをつけたい

AmiI

総合スコア24

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/02/17 03:41

編集2020/02/17 03:43

半分だけ色が違うボックスに吹き出しをつけたいと思っております。
出来上がり完成図はこんな感じです。
イメージ説明

こういうコードを書きました。

css

1.box { 2 width: 600px; 3 height: 200px; 4 border: 1px solid; 5 background: linear-gradient(to right, #09529f 50%, #FFF 50%); 6} 7.box:after{ 8 border: solid transparent; 9 content:''; 10 height:0; 11 width:0; 12 pointer-events:none; 13 position:absolute; 14 border-color: #09529f; 15 border-top-width:24px; 16 border-bottom-width:24px; 17 border-left-width:23px; 18 border-right-width:23px; 19 margin-left: -23px; 20 border-top-color:#09529f; 21 top:100%; 22 left:16%; 23} 24</style>

html

1<div class='arrow_box'>ここに文字</div>

「box:after」の部分が、吹き出し部分にあたることはわかっております。
なので、吹き出しジェネレーターで作ったものを色だけ変えて運用しようとしたのですが、ダメでした。

このコードのどこが誤りなのでしょうか。
教えていただけると助かります。

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

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

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

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

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

x_x

2020/02/17 06:47

吹き出しのない状態でさえ再現しないので、まず先にそちらを完成されたらどうでしょうか?
guest

回答2

0

ベストアンサー

HTML - 半分だけ色が違うボックスをCSSかHTMLで作りたい|teratail
の続きですね。

最終目的がそれなら、「 半分だけ色が違うボックス」ではなく「2つのボックスを横に並べる」というキーワードで調べたほうが楽に解決に行きつけると思いますよ。

あと、.box.arrow_box が正しいですね。

吹き出しの矢印は下記のように修正してください。

css

1.arrow_box::after { 2 border: solid transparent; 3 content:''; 4 height:0; 5 width:0; 6 pointer-events:none; 7 position:absolute; 8 border-color: #09529f; 9 border-top-width:24px; 10 border-bottom-width:24px; 11 border-left-width:23px; 12 border-right-width:23px; 13 margin-left: -23px; 14 border-top-color:#09529f; 15 border-left-color:transparent; /*追加*/ 16 border-right-color:transparent; /*追加*/ 17 border-bottom-color:transparent; /*追加*/ 18 top:100%; 19 left:16%; 20}

投稿2020/02/17 04:10

編集2020/02/17 04:24
hatena19

総合スコア34053

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

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

AmiI

2020/02/17 06:18 編集

ありがとうございます! 「追加」の部分には、どのような意味があるのでしょうか。 実際に挿入するときは消しちゃって大丈夫なのでしょうか。
hatena19

2020/02/17 06:35

/* */ で囲まれた部分はコメントといって、コードの意味などの説明を記述するところです。 /*追加*/ のある行のコードが質問の元のコードに追加する部分という意味でつけました。 コードを追加後は削除して問題ないです。
AmiI

2020/02/17 07:04

ありがとうございます!
guest

0

  • 2箇所に文字を入れるなら箱をわけてください
  • cssが「.box」を指定しているのにhtmlが「.arrow_box」では反応しません

投稿2020/02/17 04:05

yambejp

総合スコア116443

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問