編集履歴

質問編集履歴

大幅修正

2021/12/14 10:23

投稿

nitori-kun

スコア62

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -4,29 +4,17 @@
-以下の画像のようなイメージです。
-![イメージ説明](c8ce852e22913410b21ea1c2a1087733.png)
+![PC版](ca7dece8f89841d75263ff860f46888a.png)
+![![スマホ版](a085b95dc5964a72cab258fa1779caf7.png)](b88f0def9cda45f74eaa2c73e9a8acbe.png)
-しかし、wordpressのresponsive editingがHTMLモジュールに対応していないのかわかりませんが、PC版では綺麗にできていません。
+しかし、wordpressのresponsive editingがHTMLモジュールに対応していないのかわかりませんが、PC版では綺麗にできていません。スマホ版を基準にして作成しました。pC版の方を１枚目の画像の点線のようにもう少し大きくしたいです。
-吹き出しの高さをもう少し長くしたいです。現在のコードでは、吹き出しの高さをpxで指定しているので、これを％で指定しmax_heightまたはmin_haightと組み合わせれば、スマホでもPCでも見やすい大きさに変えられるのではと思いました。
-具体的には、.balloon .chattingのCSS内でheightを％で指定し、その親要素の高さを指定するために.baloon内にheightを指定しました。しかし、何も変わりませんでした。
+具体的には、スマホ版の見た目はなるべく変えずに、１枚目の画像のようにPC版の吹き出しを大きくし、それに合わせて文字の大きさも大きくしたいです。
-以下のサイトを参照していますが、どこを変更すればいいでしょうか？(おそらく親要素の指定の仕方が問題？)
-https://saruwakakun.com/html-css/basic/width-height
-https://saruwakakun.com/html-css/basic/max-min-width
@@ -34,14 +22,10 @@
 ```
 <!DOCTYPE html>
@@ -62,12 +46,16 @@
-.balloon {/*親要素の高さの指定をいれる。*/
+.balloon {
-  max-width: 1000px;
+  min-width: 80%;
   width: 100%;
+  /*height: 500px;*//*.baloonのheightが指定されていないと、.chattingのheightは指定できない*/
+  /*margin-left: 100px;PC版では中心よせしたいが、スマホ版ではこのままでいい。どうする？*/
   margin: 1.5em auto;
   overflow: hidden;
@@ -90,7 +78,11 @@
   margin: 0 10px 0 10px;
+  /*以下２つでFaceiconの大きさをResponsive editingする*/
+  width: 25%;
-  width: 150px;
+  max-width: 150px;
   flex-shrink: 0;
@@ -104,7 +96,7 @@
   height: auto;
-  border: solid 3px #d7ebfe;
+  border: solid 3px #F0F0F0;
   border-radius: 50%;
@@ -112,11 +104,15 @@
-.balloon .chatting {/*この部分に高さ指定を%で追加*/
+.balloon .chatting {
   display: inline-block;
-  max-width: 800px;
+  max-width: 400px;
+  width: 72%;
+  /*height: 100%;*/
 }
@@ -128,12 +124,16 @@
   margin: 5px 20px 0 20px;
-  padding: 60px 50px;
+  /*margin: 3em auto;*/
+  padding: 1em 13px;/*縦方向のpaddingを、文字の大きさ依存にしてみた*/
   border-radius: 12px;
   background: #d7ebfe;
+  /*height: 135px;*//*paddingをデバイスによって変更したいのか？・*/
 }
@@ -158,7 +158,7 @@
   left: -24px;
-  border-right: 12px solid #d7ebfe;
+  border-right: 12px solid #F0F0F0;
 }
@@ -166,7 +166,7 @@
   right: -24px;
-  border-left: 12px solid #d7ebfe;
+  border-left: 12px solid #F0F0F0;
 }
@@ -176,19 +176,19 @@
   padding: 0;
+  font-size: 1vw;/*vwを用いれば、デバイスごとの大きさに変わるらしい*/
 }
 .says span {
-  color: blue;
+  color:#73683b;
-  font-size: 5px;
+  font-size: 10px;/*ここもvwで指定？*/
-}
+}
 </style>
@@ -202,11 +202,39 @@
 <!--吹き出しはじまり-->
+<div class="balloon left">
+  <div class="faceicon">
+     <img src="ここは写真のURL">
+  </div>
+  <div class="chatting">
+    <div class="says">
+      <p><span>ああああああああああああああああ</span></p>
+      <p>あああああああああああああああ</p>
+      <p>あああああああああああ</p>
+       <p>あああああああああああああああ</p>
+       <p>ああああああああああ</p>
+    </div>
+  </div>
+</div>
 <div class="balloon right">
   <div class="faceicon">
-     <img src="http://placehold.jp/90x90.png">
+     <img src="ここは写真のURL">
   </div>
@@ -214,11 +242,9 @@
     <div class="says">
-      <p><span>ここだけ色と大きさを変えたい</span></p><!--20211125 変更箇所-->
+        <p><span>ああああああああ</span></p>
-      <p>★文章を入れる★★文章を入れる★★文章を入れる★★文章を入れる★</p>
+      <p>ああああああああああああああああああああ</p>
-       <p>★文章を入れる★★文章を入れる★★文章を入れる★★文章を入れる★</p>
     </div>
@@ -230,7 +256,7 @@
   <div class="faceicon">
-     <img src="http://placehold.jp/80x80.png">
+     <img src="ここは写真のURL">
   </div>
@@ -238,7 +264,11 @@
     <div class="says">
+     <p>ああああああああああああああ</p>
-      <p>★文章を入れる★★文章を入れる★★文章を入れる★★文章を入れる★</p>
+     <p>あああああああああああああああああああああああああ</p>
+    <p>ああああああああああああああああああああああああああああああああああああ</p>
     </div>
@@ -246,7 +276,27 @@
 </div>
+<div class="balloon right">
+  <div class="faceicon">
+     <img src="ここは写真のURL">
+  </div>
+  <div class="chatting">
+    <div class="says">
+      <p>あああああああああああああああああああああああああああああああああああああああああああああああ</p>
+      <p>ああああああああああああああああああああああああ</p>
+    </div>
+  </div>
+</div>