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

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

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

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

HTML

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

CSS

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

解決済

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

EVA_pika
EVA_pika

総合スコア2

HTML5

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

HTML

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

CSS

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

2回答

0グッド

1クリップ

379閲覧

投稿2021/06/18 04:56

編集2021/06/18 05:00

****以下ソースコードの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}

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

K_3578

2021/06/18 04:58

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

2021/06/18 05:00

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

2021/06/18 20:48

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

2021/06/21 01:22

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

回答2

2

ベストアンサー

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

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

総合スコア33631

runnynose, EVA_pika👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

runnynose

2021/06/20 00:19

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

2021/06/21 01:40

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

1

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

総合スコア497

Lhankor_Mhy👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

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

HTML

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

CSS

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