CSSを用いた吹き出しの表示について
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 322
CSSを用いた吹き出しを使用していますが、同一ページ内で
左側の吹き出しがスタート、右側の吹き出しがスタートなど、
場所によっての変更はできるのでしょうか?
.oneArea {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
max-width: 1024px;
margin: 50px auto;
padding: 0 10px;
}
.oneArea .onebox {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.oneArea .onebox:nth-child(even) {
flex-direction: row-reverse;
margin-top: 20px;
}
.oneArea .onebox .imgArea {
width: 16%;
position: relative;
}
.oneArea .onebox .imgArea img {
width: 100%;
max-width: 130px;
position: absolute;
top: 0;
}
.oneArea .onebox:nth-child(odd) .imgArea img {
left: 0;
padding-right: 30px;
}
.oneArea .onebox:nth-child(even) .imgArea img {
right: 0;
padding-left: 30px;
}
.oneArea .onebox .fukiArea {
width: 63%;
}
.oneArea .onebox .fukidasi {
width: 100%;
position: relative;
padding: 25px;
background-color: #f2f3f7;
font-size: 18px;
color: #231815;
border-radius: 12px;
box-sizing: border-box;
}
.oneArea .onebox .fukidasi::before {
content: '';
position: absolute;
display: block;
top: 22px;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 30px 15px 0;
border-color: transparent #f2f3f7 transparent transparent;
}
.oneArea .onebox:nth-child(odd) .fukidasi::before {
left: -20px;
}
.oneArea .onebox:nth-child(even) .fukidasi {
background-color: #fde5e5;
}
.oneArea .onebox:nth-child(even) .fukidasi::before {
right: -20px;
border-color: transparent #fde5e5 transparent transparent;
transform: rotate(180deg);
}
@media screen and (max-width: 1024px) {
.oneArea .onebox .imgArea img {
max-width: 70%;
}
.oneArea .onebox .fukidasi {
padding: 15px;
font-size: 14px;
}
.oneArea .onebox .fukidasi::before {
top: 8px;
}
}
@media screen and (max-width: 420px) {
.oneArea {
margin: 30px auto;
}
.oneArea .onebox:nth-child(even) {
margin-top: 15px;
}
.oneArea .onebox .imgArea {
width: 20%;
}
.oneArea .onebox .fukidasi {
padding: 10px 15px;
font-size: 12px;
}
}
<div class="section">
<div class="oneArea">
<div class="onebox">
<div class="imgArea"><img src="#" alt="#"></div>
<div class="fukiArea"><div class="fukidasi">会話文</div></div>
</div>
<div class="onebox">
<div class="imgArea"><img src="#" alt="#"></div>
<div class="fukiArea"><div class="fukidasi">会話文</div></div>
</div>
</div>
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
.onebox:nth-child(odd)
のodd
とは奇数という意味です。
なので、ご提示のコードは奇数番目は左からふきだしを出すように書いてあります。
そして、偶数はeven
で同様に右からです。
逆にしたいなら、even
odd
を入れ替えればよく、:nth-child()の制限の範囲で、たとえば「3で割り切れる数のときは右から」などという、もう少し複雑なこともできます。
もし、完全に自由に左右を使い分けたいなら、新たにクラスをつけるのが手っ取り早いでしょう。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.10%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
m.ts10806
2020/07/04 11:57
HTML、CSSだけで、でしょうか?
どちらがスタートかはどのような法則があるのでしょうか
asuk
2020/07/04 12:03
HTMLとCSSで作成できればと考えています。
3セット(往復が3回)吹き出しを入れようと思っているのですが、
1回目は左始まり、2,3回目は右始まりにしたいです。
m.ts10806
2020/07/04 12:05
ええ。ですから、その「1回目」「2,3回目」はどういう法則があるのかというのを問うています。なぜその「切り替え」みたいなのが存在するのか、どういう前提があるのか 具体的に質問本文に記載してください。
要件次第ですが、今勝手に想像した要件だと、HTML、CSSだけでは無理です。