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

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

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

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

CSS

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

Q&A

解決済

1回答

1806閲覧

CSSを用いた吹き出しの表示について

asuk

総合スコア1

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/07/04 02:53

CSSを用いた吹き出しを使用していますが、同一ページ内で
左側の吹き出しがスタート、右側の吹き出しがスタートなど、
場所によっての変更はできるのでしょうか?

CSS

1.oneArea { 2 display: flex; 3 flex-wrap: wrap; 4 justify-content: flex-start; 5 max-width: 1024px; 6 margin: 50px auto; 7 padding: 0 10px; 8} 9.oneArea .onebox { 10 width: 100%; 11 display: flex; 12 flex-wrap: wrap; 13 justify-content: flex-start; 14} 15.oneArea .onebox:nth-child(even) { 16 flex-direction: row-reverse; 17 margin-top: 20px; 18} 19.oneArea .onebox .imgArea { 20 width: 16%; 21 position: relative; 22} 23.oneArea .onebox .imgArea img { 24 width: 100%; 25 max-width: 130px; 26 position: absolute; 27 top: 0; 28} 29.oneArea .onebox:nth-child(odd) .imgArea img { 30 left: 0; 31 padding-right: 30px; 32} 33.oneArea .onebox:nth-child(even) .imgArea img { 34 right: 0; 35 padding-left: 30px; 36} 37.oneArea .onebox .fukiArea { 38 width: 63%; 39} 40.oneArea .onebox .fukidasi { 41 width: 100%; 42 position: relative; 43 padding: 25px; 44 background-color: #f2f3f7; 45 font-size: 18px; 46 color: #231815; 47 border-radius: 12px; 48 box-sizing: border-box; 49} 50.oneArea .onebox .fukidasi::before { 51 content: ''; 52 position: absolute; 53 display: block; 54 top: 22px; 55 width: 0; 56 height: 0; 57 border-style: solid; 58 border-width: 15px 30px 15px 0; 59 border-color: transparent #f2f3f7 transparent transparent; 60} 61.oneArea .onebox:nth-child(odd) .fukidasi::before { 62 left: -20px; 63} 64.oneArea .onebox:nth-child(even) .fukidasi { 65 background-color: #fde5e5; 66} 67.oneArea .onebox:nth-child(even) .fukidasi::before { 68 right: -20px; 69 border-color: transparent #fde5e5 transparent transparent; 70 transform: rotate(180deg); 71} 72@media screen and (max-width: 1024px) { 73 .oneArea .onebox .imgArea img { 74 max-width: 70%; 75 } 76 .oneArea .onebox .fukidasi { 77 padding: 15px; 78 font-size: 14px; 79 } 80 .oneArea .onebox .fukidasi::before { 81 top: 8px; 82 } 83} 84@media screen and (max-width: 420px) { 85 .oneArea { 86 margin: 30px auto; 87 } 88 .oneArea .onebox:nth-child(even) { 89 margin-top: 15px; 90 } 91 .oneArea .onebox .imgArea { 92 width: 20%; 93 } 94 .oneArea .onebox .fukidasi { 95 padding: 10px 15px; 96 font-size: 12px; 97 } 98}

html

1<div class="section"> 2 3 <div class="oneArea"> 4 <div class="onebox"> 5 <div class="imgArea"><img src="#" alt="#"></div> 6 <div class="fukiArea"><div class="fukidasi">会話文</div></div> 7 </div> 8 9 <div class="onebox"> 10 <div class="imgArea"><img src="#" alt="#"></div> 11 <div class="fukiArea"><div class="fukidasi">会話文</div></div> 12 </div> 13 14 </div>

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

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

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

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

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

m.ts10806

2020/07/04 02:57

HTML、CSSだけで、でしょうか? どちらがスタートかはどのような法則があるのでしょうか
asuk

2020/07/04 03:03

HTMLとCSSで作成できればと考えています。 3セット(往復が3回)吹き出しを入れようと思っているのですが、 1回目は左始まり、2,3回目は右始まりにしたいです。
m.ts10806

2020/07/04 03:05

ええ。ですから、その「1回目」「2,3回目」はどういう法則があるのかというのを問うています。なぜその「切り替え」みたいなのが存在するのか、どういう前提があるのか 具体的に質問本文に記載してください。 要件次第ですが、今勝手に想像した要件だと、HTML、CSSだけでは無理です。
guest

回答1

0

ベストアンサー

.onebox:nth-child(odd)oddとは奇数という意味です。
なので、ご提示のコードは奇数番目は左からふきだしを出すように書いてあります。
そして、偶数はevenで同様に右からです。

逆にしたいなら、even oddを入れ替えればよく、:nth-child()の制限の範囲で、たとえば「3で割り切れる数のときは右から」などという、もう少し複雑なこともできます。

もし、完全に自由に左右を使い分けたいなら、新たにクラスをつけるのが手っ取り早いでしょう。

サンプル

投稿2020/07/04 03:22

Lhankor_Mhy

総合スコア36960

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

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

asuk

2020/07/04 04:32

ご丁寧に解説していただきありがとうございます。 ご用意していただいたサンプルを使用し、無事に理想通りのレイアウトが完成しました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問