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

Question

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

---

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

改変したい元々の部分の画像イメージはこれです！
【BEFORE】

【AFTER】
上のイメージから画像を左、吹き出しも左からでる形に改変したいです。

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

<script>
    var slideFukidashi = slideFukidashi || {};
    (function(_) {

        _.init = function() {
            window.addEventListener('scroll', function() {
                let target = document.getElementsByClassName('js-slideFukidashi');

                for (let i = 0; i < target.length; i++) {
                    targetAction(target[i], i);
                }

                function targetAction(targetDOM, targetId) {
                    let height = targetDOM.offsetHeight;
                    let classX = targetDOM.className;
                    let offsetY = targetDOM.getBoundingClientRect().top;
                    let screenHeight = window.innerHeight;
                    let position = offsetY - screenHeight;
                    let topPosition = (offsetY - 50) - screenHeight;
                    let btmPosition = offsetY - (screenHeight - 50);

                    if (-screenHeight <= (topPosition + height) && btmPosition < 0) {
                        if (targetDOM.classList.contains('slide-out') == true) {
                            targetDOM.classList.remove('slide-out');
                            targetDOM.classList.add('slide-in');
                        }
                    } else { //画面外
                        if (targetDOM.classList.contains('slide-in') == true) {
                            targetDOM.classList.remove('slide-in');
                            targetDOM.classList.add('slide-out');
                        }
                    }
                }
            });
        }
    })(slideFukidashi);
    window.addEventListener('load', slideFukidashi.init, false);
</script>
<!--
JavaScriptはここまで
以下がHTML
-->
<div class="balloon">
    <div class="chatting js-slideFukidashi slide-out">
        <div class="says">
            <p>ここに文字を入力します。</p>
        </div>
    </div>
    <div class="faceicon">
        <!--画像の入れ替えは下記URL変更で入れ替え可能--><img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/726215/0f58281c-0a19-4fc9-aee3-f56f734f11c7.jpg" draggable="false" class="lazyload">
    </div>
</div>

 .balloon {
  /*周りの余白の指定。上下｜左右*/
  margin: 1.5em 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

 .chatting {
  padding: 0 0 5px 5px;
  /*吹き出しの幅を変更する場合、下記autoを削除して20%から100%の値を指定*/
  width: auto;
}

 .chatting.slide-out {
  opacity: 0;
  transition: all 0.5s;
  transform: translate(100%, 0);
  overflow: hidden;
}

 .chatting.slide-in {
  opacity: 1;
  transition: all .5s;
  transform: translate(0, 0);
  overflow: hidden;
}

 .faceicon {
  display: inline-block;
  width: 55px;
  min-width: 55px;
  height: auto;
  position: relative;
  overflow: hidden;
}

 .faceicon img {
  /*画像周りの線の指定。左から、線の種類、線の太さ、線の色*/
  border: solid 3px #ffb6c1;
  background: #fff;
  width: 55px;
  height: 55px !important;
  object-fit: cover;
  box-sizing: border-box;
  border-radius: 50%;
}

 .says {
  display: block;
  position: relative;
  margin: 0;
  padding: 10px;
  border-radius: 10pt;
  box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.4);
  /*吹き出しの背景色指定。※三角部分の色を除く*/
  background-color: #fff;
  border: 3px solid #ffb6c1;
  margin-right: 20px;
}

 .says:before {
  content: "";
  position: absolute;
  top: 13px;
  right: -15px;
  /*三角部分の色変更は下記より変更*/
  border-left: 13px solid #ffb6c1;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
}

 .says:after {
  content: "";
  position: absolute;
  top: 15px;
  right: -11px;
  /*三角部分の色変更は下記より変更*/
  border-left: 11px solid #fff;
  border-bottom: 11px solid transparent;
  border-top: 11px solid transparent;
}

 p {
  margin: 0;
  padding: 0;
}

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

<!--下記のscriptをタグ設定のbodyにカット＆ペースト-->
<script>
    var slideFukidashi = slideFukidashi || {};
    (function(_) {

        _.init = function() {
            window.addEventListener('scroll', function() {
                let target = document.getElementsByClassName('js-slideFukidashi');

                for (let i = 0; i < target.length; i++) {
                    targetAction(target[i], i);
                }

                function targetAction(targetDOM, targetId) {
                    let height = targetDOM.offsetHeight;
                    let classX = targetDOM.className;
                    let offsetY = targetDOM.getBoundingClientRect().top;
                    let screenHeight = window.innerHeight;
                    let position = offsetY - screenHeight;
                    let topPosition = (offsetY - 50) - screenHeight;
                    let btmPosition = offsetY - (screenHeight - 50);

                    if (-screenHeight <= (topPosition + height) && btmPosition < 0) {
                        if (targetDOM.classList.contains('slide-out') == true) {
                            targetDOM.classList.remove('slide-out');
                            targetDOM.classList.add('slide-in');
                        }
                    } else { //画面外
                        if (targetDOM.classList.contains('slide-in') == true) {
                            targetDOM.classList.remove('slide-in');
                            targetDOM.classList.add('slide-out');
                        }
                    }
                }
            });
        }
    })(slideFukidashi);
    window.addEventListener('load', slideFukidashi.init, false);
</script>
<!--
JavaScriptはここまで
以下がHTML
-->
<div class="faceicon">
    <!--画像の入れ替えは下記URL変更--><img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/726165/c082b6cf-f7f5-4952-a5b5-063eee65aad0.jpg" draggable="false" class="lazyload">
</div>
<div class="balloon">
    <div class="chatting js-slideFukidashi slide-out">
        <div class="says">
            <p>文字入力</p>
        </div>
    </div>

</div>

 .balloon {
  /*周りの余白の指定。上下｜左右*/
  margin: 1.5em 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

 .chatting {
  padding: 0 0 5px 5px;
  /*吹き出しの幅を変更する場合、下記autoを削除して20%から100%の値を指定*/
  width: auto;
}

 .chatting.slide-out {
  opacity: 0;
  transition: all 0.5s;
  transform: translate(100%, 0);
  overflow: hidden;
}

 .chatting.slide-in {
  opacity: 1;
  transition: all .5s;
  transform: translate(0, 0);
  overflow: hidden;
}

 .faceicon {
  display: inline-block;
  width: 55px;
  min-width: 55px;
  height: auto;
  position: relative;
  overflow: hidden;
}

 .faceicon img {
  /*画像周りの線の指定。左から、線の種類、線の太さ、線の色*/
  border: solid 3px #ffb6c1;
  background: #fff;
  width: 55px;
  height: 55px !important;
  object-fit: cover;
  box-sizing: border-box;
  border-radius: 50%;
}

 .says {
  display: block;
  position: relative;
  margin: 0;
  padding: 10px;
  border-radius: 10pt;
  box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.4);
  /*吹き出しの背景色指定。※三角部分の色を除く*/
  background-color: #fff;
  border: 3px solid #ffb6c1;
  margin-left: 15px;
}

 .says:before {
  content: "";
  position: absolute;
  top: 15px;
  left: -11px;
  /*三角部分の色変更は下記より変更*/
  border-right: 13px solid #ffb6c1;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
}

 .says:after {
  content: "";
  position: absolute;
  top: 15px;
  left: -11px;
  /*三角部分の色変更は下記より変更*/
  border-right: 11px solid #fff;
  border-bottom: 11px solid transparent;
  border-top: 11px solid transparent;
}

 p {
  margin: 0;
  padding: 0;
}

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

Comments

[K_3578]

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

[EVA_pika]

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

[runnynose]

BeforeはうまくできていてAfterはうまくいかないということで、きっとクリティカルな問題があるのか？！と動作を期待してみた結果、BeforeとAfterのクウォリティの差に愕然としました????

察するに、Beforeは質問者と別の方が作成されていて、Afterを今回任されたのかなと思います。
せっかくBeforeのようなお手本があるので、もう少し頑張ってみてはどうでしょうか。。。？

辛辣なことを言ってしまいますが、もし、エンジニアとしやっているわけではなく、何かのプロダクトで必要なものなのだとしたら、お金を払って依頼した方が良いと思います。

[EVA_pika]

＞Beforeは別の人が作成
そうです！誤解を招いてしまいすみません????書ける範囲で以降示しておきます、、、

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

Answer 1

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

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

.reverse{
  flex-flow: row-reverse;
}

.reverse .says {
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
  margin-right: auto;
  margin-left: 20px;
}

.reverse .says:before {
  right: auto;
  left: -15px;
  /*三角部分の色変更は下記より変更*/
  border-left: none;
  border-right: 13px solid #ffb6c1;
}

.reverse .says:after {
  right: auto;
  left: -11px;
  /*三角部分の色変更は下記より変更*/
  border-left: none;
  border-right: 11px solid #fff;
}

---

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

（ネタです）

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

<div class="balloon" dir="rtl">

 .says {
  display: block;
  position: relative;
  margin: 0;
  padding: 10px;
  border-radius: 10pt;
  box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.4);
  /*吹き出しの背景色指定。※三角部分の色を除く*/
  background-color: #fff;
  border: 3px solid #ffb6c1;
  margin-inline-end: 20px;
}

 .says:before {
  content: "";
  position: absolute;
  top: 13px;
  inset-inline: auto -15px;
  /*三角部分の色変更は下記より変更*/
  border-inline-start: 13px solid #ffb6c1;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
}

 .says:after {
  content: "";
  position: absolute;
  top: 15px;
  inset-inline: auto -11px;
  /*三角部分の色変更は下記より変更*/
  border-inline-start: 11px solid #fff;
  border-bottom: 11px solid transparent;
  border-top: 11px solid transparent;
}

 p {
  margin: 0;
  padding: 0;
}

[dir=rtl] .says {
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}
.says p{
  direction: ltr;
}

Comments

[runnynose]

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

[Lhankor_Mhy]

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

Answer 2

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<script>
  var slideFukidashi = slideFukidashi || {};
  (function(_) {

      _.init = function() {
          window.addEventListener('scroll', function() {
              let target = document.getElementsByClassName('js-slideFukidashi');

              for (let i = 0; i < target.length; i++) {
                  targetAction(target[i], i);
              }

              function targetAction(targetDOM, targetId) {
                  let height = targetDOM.offsetHeight;
                  let classX = targetDOM.className;
                  let offsetY = targetDOM.getBoundingClientRect().top;
                  let screenHeight = window.innerHeight;
                  let position = offsetY - screenHeight;
                  let topPosition = (offsetY - 50) - screenHeight;
                  let btmPosition = offsetY - (screenHeight - 50);

                  if (-screenHeight <= (topPosition + height) && btmPosition < 0) {
                      if (targetDOM.classList.contains('slide-out') == true) {
                          targetDOM.classList.remove('slide-out');
                          targetDOM.classList.add('slide-in');
                      }
                  } else { //画面外
                      if (targetDOM.classList.contains('slide-in') == true) {
                          targetDOM.classList.remove('slide-in');
                          targetDOM.classList.add('slide-out');
                      }
                  }
              }
          });
      }
  })(slideFukidashi);
  window.addEventListener('load', slideFukidashi.init, false);
</script>
<style>
 .balloon {
  /*周りの余白の指定。上下｜左右*/
  margin: 1.5em 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

 .chatting {
  padding: 0 0 5px 5px;
  /*吹き出しの幅を変更する場合、下記autoを削除して20%から100%の値を指定*/
  width: auto;
}

 .chatting.slide-out {
  opacity: 0;
  transition: all 0.5s;
  transform: translate(100%, 0);
  overflow: hidden;
}

 .chatting.slide-in {
  opacity: 1;
  transition: all .5s;
  transform: translate(0, 0);
  overflow: hidden;
}

 .faceicon {
  display: inline-block;
  width: 55px;
  min-width: 55px;
  height: auto;
  position: relative;
  overflow: hidden;
}

 .faceicon img {
  /*画像周りの線の指定。左から、線の種類、線の太さ、線の色*/
  border: solid 3px #ffb6c1;
  background: #fff;
  width: 55px;
  height: 55px !important;
  object-fit: cover;
  box-sizing: border-box;
  border-radius: 50%;
}

 .says {
  display: block;
  position: relative;
  margin: 0;
  padding: 10px;
  border-radius: 10pt;
  box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.4);
  /*吹き出しの背景色指定。※三角部分の色を除く*/
  background-color: #fff;
  border: 3px solid #ffb6c1;
  margin-right: 20px;
}

 .says:before {
  content: "";
  position: absolute;
  top: 13px;
  right: -15px;
  /*三角部分の色変更は下記より変更*/
  border-left: 13px solid #ffb6c1;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
}

 .says:after {
  content: "";
  position: absolute;
  top: 15px;
  right: -11px;
  /*三角部分の色変更は下記より変更*/
  border-left: 11px solid #fff;
  border-bottom: 11px solid transparent;
  border-top: 11px solid transparent;
}

 p {
  margin: 0;
  padding: 0;
}

/* 反転処理 */
.balloon.reverse {
  transform: rotateY(180deg);
}
.balloon.reverse p {
  transform: rotateY(180deg);
}
</style>
</head>
<body>
  ↓↓↓↓↓下にスクロール↓↓↓↓↓
  <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>
  <div class="balloon reverse">
    <div class="chatting js-slideFukidashi slide-out">
        <div class="says">
            <p>ここに文字を入力します。</p>
        </div>
    </div>
    <div class="faceicon">
        <!--画像の入れ替えは下記URL変更で入れ替え可能--><img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/726215/0f58281c-0a19-4fc9-aee3-f56f734f11c7.jpg" draggable="false" class="lazyload">
    </div>
  </div>
  <div class="balloon">
    <div class="chatting js-slideFukidashi slide-out">
        <div class="says">
            <p>ここに文字を入力します。</p>
        </div>
    </div>
    <div class="faceicon">
        <!--画像の入れ替えは下記URL変更で入れ替え可能--><img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/726215/0f58281c-0a19-4fc9-aee3-f56f734f11c7.jpg" draggable="false" class="lazyload">
    </div>
  </div>
</body>
</html>