teratail
回答率
85.48%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.48%
トップHTML5に関する質問
HTML5

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

HTML

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

CSS

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

Q&A

解決済

2回答

744閲覧

以下ソースコードのHTML&CSSの画像、吹き出しを逆サイドにしたいです。

EVA_pika
EVA_pika

総合スコア2

HTML5

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2021/06/18 04:56

編集2021/06/18 05:00

0

1

****以下ソースコードのHTML&CSSの画像、吹き出しを逆サイドにしたいです。

現在、動く吹き出しのデザインをしており、デザイン変更方法に苦戦しております。
以下ソースコードのHTML&CSSの画像、吹き出しを逆サイドにしたいです。

改変したい元々の部分の画像イメージはこれです！
【BEFORE】
イメージ説明
【AFTER】
上のイメージから画像を左、吹き出しも左からでる形に改変したいです。
イメージ説明

上の中身（Before部分）となってるソースコードがこちら。

HTML
1
2<script>
3    var slideFukidashi = slideFukidashi || {};
4    (function(_) {
5
6        _.init = function() {
7            window.addEventListener('scroll', function() {
8                let target = document.getElementsByClassName('js-slideFukidashi');
9
10                for (let i = 0; i < target.length; i++) {
11                    targetAction(target[i], i);
12                }
13
14                function targetAction(targetDOM, targetId) {
15                    let height = targetDOM.offsetHeight;
16                    let classX = targetDOM.className;
17                    let offsetY = targetDOM.getBoundingClientRect().top;
18                    let screenHeight = window.innerHeight;
19                    let position = offsetY - screenHeight;
20                    let topPosition = (offsetY - 50) - screenHeight;
21                    let btmPosition = offsetY - (screenHeight - 50);
22
23                    if (-screenHeight <= (topPosition + height) && btmPosition < 0) {
24                        if (targetDOM.classList.contains('slide-out') == true) {
25                            targetDOM.classList.remove('slide-out');
26                            targetDOM.classList.add('slide-in');
27                        }
28                    } else { //画面外
29                        if (targetDOM.classList.contains('slide-in') == true) {
30                            targetDOM.classList.remove('slide-in');
31                            targetDOM.classList.add('slide-out');
32                        }
33                    }
34                }
35            });
36        }
37    })(slideFukidashi);
38    window.addEventListener('load', slideFukidashi.init, false);
39</script>
40<!--
41JavaScriptはここまで
42以下がHTML
43-->
44<div class="balloon">
45    <div class="chatting js-slideFukidashi slide-out">
46        <div class="says">
47            <p>ここに文字を入力します。</p>
48        </div>
49    </div>
50    <div class="faceicon">
51        <!--画像の入れ替えは下記URL変更で入れ替え可能--><img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/726215/0f58281c-0a19-4fc9-aee3-f56f734f11c7.jpg" draggable="false" class="lazyload">
52    </div>
53</div>

CSS
1 .balloon {
2  /*周りの余白の指定。上下｜左右*/
3  margin: 1.5em 0;
4  overflow: hidden;
5  display: flex;
6  justify-content: flex-end;
7}
8
9 .chatting {
10  padding: 0 0 5px 5px;
11  /*吹き出しの幅を変更する場合、下記autoを削除して20%から100%の値を指定*/
12  width: auto;
13}
14
15 .chatting.slide-out {
16  opacity: 0;
17  transition: all 0.5s;
18  transform: translate(100%, 0);
19  overflow: hidden;
20}
21
22 .chatting.slide-in {
23  opacity: 1;
24  transition: all .5s;
25  transform: translate(0, 0);
26  overflow: hidden;
27}
28
29 .faceicon {
30  display: inline-block;
31  width: 55px;
32  min-width: 55px;
33  height: auto;
34  position: relative;
35  overflow: hidden;
36}
37
38 .faceicon img {
39  /*画像周りの線の指定。左から、線の種類、線の太さ、線の色*/
40  border: solid 3px #ffb6c1;
41  background: #fff;
42  width: 55px;
43  height: 55px !important;
44  object-fit: cover;
45  box-sizing: border-box;
46  border-radius: 50%;
47}
48
49 .says {
50  display: block;
51  position: relative;
52  margin: 0;
53  padding: 10px;
54  border-radius: 10pt;
55  box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.4);
56  /*吹き出しの背景色指定。※三角部分の色を除く*/
57  background-color: #fff;
58  border: 3px solid #ffb6c1;
59  margin-right: 20px;
60}
61
62 .says:before {
63  content: "";
64  position: absolute;
65  top: 13px;
66  right: -15px;
67  /*三角部分の色変更は下記より変更*/
68  border-left: 13px solid #ffb6c1;
69  border-bottom: 13px solid transparent;
70  border-top: 13px solid transparent;
71}
72
73 .says:after {
74  content: "";
75  position: absolute;
76  top: 15px;
77  right: -11px;
78  /*三角部分の色変更は下記より変更*/
79  border-left: 11px solid #fff;
80  border-bottom: 11px solid transparent;
81  border-top: 11px solid transparent;
82}
83
84 p {
85  margin: 0;
86  padding: 0;
87}

下記のAfterのために試行したコード（中途半端なもの）がこちら。

HTML
1<!--下記のscriptをタグ設定のbodyにカット＆ペースト-->
2<script>
3    var slideFukidashi = slideFukidashi || {};
4    (function(_) {
5
6        _.init = function() {
7            window.addEventListener('scroll', function() {
8                let target = document.getElementsByClassName('js-slideFukidashi');
9
10                for (let i = 0; i < target.length; i++) {
11                    targetAction(target[i], i);
12                }
13
14                function targetAction(targetDOM, targetId) {
15                    let height = targetDOM.offsetHeight;
16                    let classX = targetDOM.className;
17                    let offsetY = targetDOM.getBoundingClientRect().top;
18                    let screenHeight = window.innerHeight;
19                    let position = offsetY - screenHeight;
20                    let topPosition = (offsetY - 50) - screenHeight;
21                    let btmPosition = offsetY - (screenHeight - 50);
22
23                    if (-screenHeight <= (topPosition + height) && btmPosition < 0) {
24                        if (targetDOM.classList.contains('slide-out') == true) {
25                            targetDOM.classList.remove('slide-out');
26                            targetDOM.classList.add('slide-in');
27                        }
28                    } else { //画面外
29                        if (targetDOM.classList.contains('slide-in') == true) {
30                            targetDOM.classList.remove('slide-in');
31                            targetDOM.classList.add('slide-out');
32                        }
33                    }
34                }
35            });
36        }
37    })(slideFukidashi);
38    window.addEventListener('load', slideFukidashi.init, false);
39</script>
40<!--
41JavaScriptはここまで
42以下がHTML
43-->
44<div class="faceicon">
45    <!--画像の入れ替えは下記URL変更--><img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/726165/c082b6cf-f7f5-4952-a5b5-063eee65aad0.jpg" draggable="false" class="lazyload">
46</div>
47<div class="balloon">
48    <div class="chatting js-slideFukidashi slide-out">
49        <div class="says">
50            <p>文字入力</p>
51        </div>
52    </div>
53
54</div>

CSS
1 .balloon {
2  /*周りの余白の指定。上下｜左右*/
3  margin: 1.5em 0;
4  overflow: hidden;
5  display: flex;
6  justify-content: flex-end;
7}
8
9 .chatting {
10  padding: 0 0 5px 5px;
11  /*吹き出しの幅を変更する場合、下記autoを削除して20%から100%の値を指定*/
12  width: auto;
13}
14
15 .chatting.slide-out {
16  opacity: 0;
17  transition: all 0.5s;
18  transform: translate(100%, 0);
19  overflow: hidden;
20}
21
22 .chatting.slide-in {
23  opacity: 1;
24  transition: all .5s;
25  transform: translate(0, 0);
26  overflow: hidden;
27}
28
29 .faceicon {
30  display: inline-block;
31  width: 55px;
32  min-width: 55px;
33  height: auto;
34  position: relative;
35  overflow: hidden;
36}
37
38 .faceicon img {
39  /*画像周りの線の指定。左から、線の種類、線の太さ、線の色*/
40  border: solid 3px #ffb6c1;
41  background: #fff;
42  width: 55px;
43  height: 55px !important;
44  object-fit: cover;
45  box-sizing: border-box;
46  border-radius: 50%;
47}
48
49 .says {
50  display: block;
51  position: relative;
52  margin: 0;
53  padding: 10px;
54  border-radius: 10pt;
55  box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.4);
56  /*吹き出しの背景色指定。※三角部分の色を除く*/
57  background-color: #fff;
58  border: 3px solid #ffb6c1;
59  margin-left: 15px;
60}
61
62 .says:before {
63  content: "";
64  position: absolute;
65  top: 15px;
66  left: -11px;
67  /*三角部分の色変更は下記より変更*/
68  border-right: 13px solid #ffb6c1;
69  border-bottom: 13px solid transparent;
70  border-top: 13px solid transparent;
71}
72
73 .says:after {
74  content: "";
75  position: absolute;
76  top: 15px;
77  left: -11px;
78  /*三角部分の色変更は下記より変更*/
79  border-right: 11px solid #fff;
80  border-bottom: 11px solid transparent;
81  border-top: 11px solid transparent;
82}
83
84 p {
85  margin: 0;
86  padding: 0;
87}

です！ご教授のほど、お願い致します！！

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

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

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

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

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

K_3578
K_3578

2021/06/18 04:58

>プログラミング超初心者です。謙遜でなく本当の意味です。 teratailの質問には初心者マーク(質問編集画面の左上のマーク)を付けれるので、初心者であることの表明 等はマークを付けるだけに留めてください。
EVA_pika
EVA_pika

2021/06/18 05:00

失礼しました！修正致しました！
runnynose
runnynose

2021/06/18 20:48

BeforeはうまくできていてAfterはうまくいかないということで、きっとクリティカルな問題があるのか？！と動作を期待してみた結果、BeforeとAfterのクウォリティの差に愕然としました???? 察するに、Beforeは質問者と別の方が作成されていて、Afterを今回任されたのかなと思います。 せっかくBeforeのようなお手本があるので、もう少し頑張ってみてはどうでしょうか。。。？ 辛辣なことを言ってしまいますが、もし、エンジニアとしやっているわけではなく、何かのプロダクトで必要なものなのだとしたら、お金を払って依頼した方が良いと思います。
EVA_pika
EVA_pika

2021/06/21 01:22

＞Beforeは別の人が作成 そうです！誤解を招いてしまいすみません????書ける範囲で以降示しておきます、、、 ＞辛辣な～ なんかひどいのはわかってたので辛辣なことに関しては大丈夫です！ 心情的側面から説明しかねますが、（大学の課題を代わりにとかそんなせこいことや危ないことはしていませんのでご安心ください）私個人のする必要のある作業であります プロダクトとして他人にお金で依頼するのは選択肢としては今回はできないです お察しの通り、全く理解できておりませんが、曲がりなりにも自力で対処法を覚えたりソースコードを読み慣れたいという状況です
guest

回答2件

0

ベストアンサー

基本的には、右のものを左に、左のものを右に、で解決します。

https://jsfiddle.net/Lhankor_Mhy/nxp85mag/

css
1.reverse{
2  flex-flow: row-reverse;
3}
4
5.reverse .says {
6  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
7  margin-right: auto;
8  margin-left: 20px;
9}
10
11.reverse .says:before {
12  right: auto;
13  left: -15px;
14  /*三角部分の色変更は下記より変更*/
15  border-left: none;
16  border-right: 13px solid #ffb6c1;
17}
18
19.reverse .says:after {
20  right: auto;
21  left: -11px;
22  /*三角部分の色変更は下記より変更*/
23  border-left: none;
24  border-right: 11px solid #fff;
25}

論理プロパティに差し替えて、dir で入れ替える、というアイディアが浮かんだので追記

（ネタです）

https://jsfiddle.net/Lhankor_Mhy/nxp85mag/2/

html
1<div class="balloon" dir="rtl">
css
1 .says {
2  display: block;
3  position: relative;
4  margin: 0;
5  padding: 10px;
6  border-radius: 10pt;
7  box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.4);
8  /*吹き出しの背景色指定。※三角部分の色を除く*/
9  background-color: #fff;
10  border: 3px solid #ffb6c1;
11  margin-inline-end: 20px;
12}
13
14 .says:before {
15  content: "";
16  position: absolute;
17  top: 13px;
18  inset-inline: auto -15px;
19  /*三角部分の色変更は下記より変更*/
20  border-inline-start: 13px solid #ffb6c1;
21  border-bottom: 13px solid transparent;
22  border-top: 13px solid transparent;
23}
24
25 .says:after {
26  content: "";
27  position: absolute;
28  top: 15px;
29  inset-inline: auto -11px;
30  /*三角部分の色変更は下記より変更*/
31  border-inline-start: 11px solid #fff;
32  border-bottom: 11px solid transparent;
33  border-top: 11px solid transparent;
34}
35
36 p {
37  margin: 0;
38  padding: 0;
39}
40
41[dir=rtl] .says {
42  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
43}
44.says p{
45  direction: ltr;
46}
47

投稿2021/06/19 00:58

編集2021/06/19 02:13
Lhankor_Mhy
Lhankor_Mhy

総合スコア36087

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

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

runnynose
runnynose

2021/06/20 00:19

全然カラクリが分かってないんですけど、すごーい????
Lhankor_Mhy
Lhankor_Mhy

2021/06/21 01:40

こちらこそ、rotate は思い浮かびませんでした。box-shadow が論理方向を考慮しない問題もこれで解決ですね✨
guest

0

Lhankor_Mhyさんに触発されたので私も案出します。
cssのrotateを使って要素を反転させると簡単だと思いました????
(反転する要素の画像はあらかじめ反転した状態で用意してください)

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document</title>
8<script>
9  var slideFukidashi = slideFukidashi || {};
10  (function(_) {
11
12      _.init = function() {
13          window.addEventListener('scroll', function() {
14              let target = document.getElementsByClassName('js-slideFukidashi');
15
16              for (let i = 0; i < target.length; i++) {
17                  targetAction(target[i], i);
18              }
19
20              function targetAction(targetDOM, targetId) {
21                  let height = targetDOM.offsetHeight;
22                  let classX = targetDOM.className;
23                  let offsetY = targetDOM.getBoundingClientRect().top;
24                  let screenHeight = window.innerHeight;
25                  let position = offsetY - screenHeight;
26                  let topPosition = (offsetY - 50) - screenHeight;
27                  let btmPosition = offsetY - (screenHeight - 50);
28
29                  if (-screenHeight <= (topPosition + height) && btmPosition < 0) {
30                      if (targetDOM.classList.contains('slide-out') == true) {
31                          targetDOM.classList.remove('slide-out');
32                          targetDOM.classList.add('slide-in');
33                      }
34                  } else { //画面外
35                      if (targetDOM.classList.contains('slide-in') == true) {
36                          targetDOM.classList.remove('slide-in');
37                          targetDOM.classList.add('slide-out');
38                      }
39                  }
40              }
41          });
42      }
43  })(slideFukidashi);
44  window.addEventListener('load', slideFukidashi.init, false);
45</script>
46<style>
47 .balloon {
48  /*周りの余白の指定。上下｜左右*/
49  margin: 1.5em 0;
50  overflow: hidden;
51  display: flex;
52  justify-content: flex-end;
53}
54
55 .chatting {
56  padding: 0 0 5px 5px;
57  /*吹き出しの幅を変更する場合、下記autoを削除して20%から100%の値を指定*/
58  width: auto;
59}
60
61 .chatting.slide-out {
62  opacity: 0;
63  transition: all 0.5s;
64  transform: translate(100%, 0);
65  overflow: hidden;
66}
67
68 .chatting.slide-in {
69  opacity: 1;
70  transition: all .5s;
71  transform: translate(0, 0);
72  overflow: hidden;
73}
74
75 .faceicon {
76  display: inline-block;
77  width: 55px;
78  min-width: 55px;
79  height: auto;
80  position: relative;
81  overflow: hidden;
82}
83
84 .faceicon img {
85  /*画像周りの線の指定。左から、線の種類、線の太さ、線の色*/
86  border: solid 3px #ffb6c1;
87  background: #fff;
88  width: 55px;
89  height: 55px !important;
90  object-fit: cover;
91  box-sizing: border-box;
92  border-radius: 50%;
93}
94
95 .says {
96  display: block;
97  position: relative;
98  margin: 0;
99  padding: 10px;
100  border-radius: 10pt;
101  box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.4);
102  /*吹き出しの背景色指定。※三角部分の色を除く*/
103  background-color: #fff;
104  border: 3px solid #ffb6c1;
105  margin-right: 20px;
106}
107
108 .says:before {
109  content: "";
110  position: absolute;
111  top: 13px;
112  right: -15px;
113  /*三角部分の色変更は下記より変更*/
114  border-left: 13px solid #ffb6c1;
115  border-bottom: 13px solid transparent;
116  border-top: 13px solid transparent;
117}
118
119 .says:after {
120  content: "";
121  position: absolute;
122  top: 15px;
123  right: -11px;
124  /*三角部分の色変更は下記より変更*/
125  border-left: 11px solid #fff;
126  border-bottom: 11px solid transparent;
127  border-top: 11px solid transparent;
128}
129
130 p {
131  margin: 0;
132  padding: 0;
133}
134
135/* 反転処理 */
136.balloon.reverse {
137  transform: rotateY(180deg);
138}
139.balloon.reverse p {
140  transform: rotateY(180deg);
141}
142</style>
143</head>
144<body>
145  ↓↓↓↓↓下にスクロール↓↓↓↓↓
146  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
147  <div class="balloon reverse">
148    <div class="chatting js-slideFukidashi slide-out">
149        <div class="says">
150            <p>ここに文字を入力します。</p>
151        </div>
152    </div>
153    <div class="faceicon">
154        <!--画像の入れ替えは下記URL変更で入れ替え可能--><img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/726215/0f58281c-0a19-4fc9-aee3-f56f734f11c7.jpg" draggable="false" class="lazyload">
155    </div>
156  </div>
157  <div class="balloon">
158    <div class="chatting js-slideFukidashi slide-out">
159        <div class="says">
160            <p>ここに文字を入力します。</p>
161        </div>
162    </div>
163    <div class="faceicon">
164        <!--画像の入れ替えは下記URL変更で入れ替え可能--><img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/726215/0f58281c-0a19-4fc9-aee3-f56f734f11c7.jpg" draggable="false" class="lazyload">
165    </div>
166  </div>
167</body>
168</html>

投稿2021/06/20 00:50

runnynose
runnynose

総合スコア497

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問

トップHTML5に関する質問

以下ソースコードのHTML&CSSの画像、吹き出しを逆サイドにしたいです。