Q&A
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
おせわになっております。
助けてください。。
HTML5で現在、レスポンシブ対応のサイトを作っています。
ウインドウを縦、横に動かしてもサイトがその幅に合わせて伸縮するといいますか、
あんまり文章が思いつかず申し訳ないですが、
そのようなことをしたいのです。
その際、CSSで幅と高さを%表示にて
レスポンシブさせようとしているのですが、
どうしても「高さ」がレスポンシブ対応になりません。。
どうかご教示いただけましたら幸いです。
宜しくお願いいたします。。
HTMLを載せます。
HTML5
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="css/style.css"> 6 </head> 7 <body> 8 <div id="wrapper"> 9 <section> 10 <form action="#" method="post"> 11 <button type="submit" id="section_submit">ログアウト</button> 12 </form> 13 <h2 id="h2_section">eee</h2> 14 <div class="chatroom_section"> 15 <div class="chatroom_say_left"> 16 <p> 17 TO<br> 18 <img src="images/flower2.jpeg" alt="花" id="chatroom_left_img"><br> 19 </p> 20 </div> 21 <div class="chatroom_say_front"> 22 <p class="balloon-1-left"> 23 行間は「1.5em(20pxくらい)」<br> 24 </p> 25 </div> 26 <div class="chatroom_say_front_right"> 27 <p class="balloon-2-right"> 28 左と同じ 29 </p> 30 </div> 31 <div class="chatroom_say_right"> 32 <p> 33 TO：<br> 34 <img src="images/flower.png" alt="花" class="chatroom_right_img"><br> 35 </p> 36 </div> 37 <div class="day"> 38 <p>2016/11/21(月)<br><hr></p> 39 </div> 40 </div> 41 <div id="chatroom_config"> 42 <div id="chatroom_top"> 43 仮ボックス 44 </div> 45 <div id="chatroom_bottom"> 46 <div id="chatroom_bottom_left"> 47 <p><img src="images/flower4.png" alt="花" id="chatroom_img"></p> 48 <p> 49 佐藤、鈴木<br> 50 <span id="square_color">■</span> なんか入れる 51 </p> 52 </div> 53 <div id="chatroom_bottom_right"> 54 <form action="#" method="post" id="chatroom_sendform"> 55 <label> 56 <textarea name="chatroom_send_info" placeholder="" 57 id="chatroom_info" form="chatroom_sendform" maxlength="1001" required></textarea> 58 </label> 59 <button type="submit" id="sendsubmit">example</button> 60 </form> 61 </div> 62 </div> 63 </div> 64 </section> 65 <aside> 66 <h2 id="aside_h2">イメージ一覧</h2> 67 <div id="over"> 68 <div class="front_aside"> 69 <div class="left_aside"> 70 <p><img src="images/flower.png" alt="花" class="img_aside"></p> 71 </div> 72 <div class="right_aside"> 73 <p> 74 花子 75 </p> 76 </div> 77 </div> 78 </div> 79 </aside> 80 </div> 81 <footer> 82 <hr> 83 Copyright © 84 </footer> 85 </body> 86</html>
CSSを載せます。
CSS
1@charset "utf-8"; 2 3/* all reset */ 4html { 5 height: 100%; 6} 7 8body { 9 width: 100%; 10 height: 100%; 11 margin: 0; 12 padding: 0; 13 font-family: "ＭＳ ゴシック",sans-serif,"Hiragino Kaku Gothic Pro",Meiryo, Osaka,"MS PGothic", sans-serif; 14 clear: both; 15} 16 17img { 18 margin: 0; 19 padding: 0; 20} 21 22/* wrapper */ 23/* 1366(横) * 768(縦) */ 24#wrapper { 25 background-color: skyblue; 26 width: 100%; 27 margin: auto; 28 margin-top: 30px; 29 padding: auto; 30 border-top: solid 1px black; 31 border-left: solid 1px black; 32 border-bottom: solid 1px black; 33} 34 35/* section */ 36section { 37 float: right; 38 clear: both; 39 width: 75%; 40 height: 100%; 41 margin-bottom: 20px; 42 line-height: 2em; 43 border-right: solid 1px black; 44} 45 46section .chatroom_section { 47 margin: auto; 48 padding: auto; 49 text-align: center; 50 line-height: 1.5em; 51 width: 95%; 52 height: 515px; 53 overflow-y: scroll; 54 border: solid 1px black; 55 background-color: #fafafa; 56 clear: both; 57} 58 59 60section .chatroom_section .chatroom_say_left { 61 float: left; 62 margin: 0; 63 padding: 0; 64 width: 20%; 65 height: 15%; 66 clear: both; 67} 68 69section .chatroom_section .chatroom_say_left p { 70 color: #5a5a5a; 71 margin: 0; 72 padding: 0; 73 padding-top: 40px; 74 font-size: 10px; 75 clear: both; 76} 77 78section .chatroom_section .chatroom_say_left #chatroom_left_img { 79 margin: 0; 80 padding: 0; 81 padding-top: 5px; 82 width: 35%; 83 height: 50%; 84 clear: both; 85} 86 87section .chatroom_section .chatroom_say_front { 88 float: left; 89 width: 80%; 90 padding-top: 40px; 91} 92 93section .chatroom_section .chatroom_say_front_right { 94 float: left; 95 width: 80%; 96} 97 98.chatroom_say_right { 99 float: right; 100 margin: 0; 101 width: 20%; 102 height: 15%; 103} 104 105.chatroom_say_right p { 106 color: #5a5a5a; 107 margin: 0; 108 padding: 0; 109 padding-top: 10px; 110 font-size: 10px; 111} 112 113.chatroom_right_img { 114 margin: 0; 115 padding: 0; 116 padding-top: 5px; 117 width: 35%; 118 clear: both; 119} 120 121.day { 122 clear: both; 123} 124 125.day p { 126 color: #808080; 127 font-size: 12px; 128} 129 130.day hr { 131 width: 95%; 132} 133 134section h2#h2_section { 135 margin-top: 40px; 136 margin-left: 25px; 137} 138 139section #chatroom_config { 140 margin: auto; 141 margin-top: 10px; 142 padding: auto; 143 width: 95%; 144 clear: both; 145} 146 147section #chatroom_config #chatroom_top { 148 margin: auto; 149 padding: auto; 150 width: 100%; 151 height: 45%; 152 border: solid 1px black; 153 text-align: center; 154} 155 156/* section chatroom_bottom */ 157section #chatroom_config #chatroom_bottom { 158 margin: auto; 159 margin-top: 10px; 160 padding: auto; 161 width: 100%; 162 height: 85px; 163 text-align: center; 164 border: solid 1px black; 165 clear: both; 166} 167 168section #chatroom_config #chatroom_bottom #chatroom_bottom_left { 169 float: left; 170 width: 30%; 171 height: 100%; 172 margin: auto; 173 padding: auto; 174 clear: both; 175} 176 177section #chatroom_config #chatroom_bottom #chatroom_bottom_left #chatroom_img { 178 margin-left: 20px; 179 width: 22%; 180 float: left; 181} 182 183#square_color { 184 color: cyan; 185} 186 187section #chatroom_config #chatroom_bottom #chatroom_bottom_right { 188 float: right; 189 width: 70%; 190 height: 76px; 191 margin: auto; 192 margin-top: 5px; 193 padding: auto; 194} 195 196section #chatroom_config #chatroom_bottom #chatroom_bottom_right textarea { 197 width: 80%; 198 height: 70px; 199 margin: auto; 200 padding: auto; 201} 202 203/* section submit */ 204section button#section_submit { 205 float: right; 206 margin-top: 20px; 207 margin-right: 20px; 208 padding: 5px; 209 background-color: #ffff7f; 210 clear: both; 211} 212 213/* form */ 214 215textarea#chatroom_info { 216 float: left; 217 font-size: 15px; 218} 219 220textarea#chatroom_info:focus { 221 background-color: pink; 222} 223 224button#sendsubmit { 225 width: 15%; 226 height: 70px; 227 margin-top: 3px; 228 background-color: #84c1ff ; 229 font-size: 20px; 230} 231 232button#sendsubmit:hover { 233 color: white; 234 font-size: 25px; 235 font-style: italic; 236 text-shadow: 3px 3px 5px deeppink; 237 background-color: firebrick; 238} 239 240/* aside */ 241aside { 242 float: left; 243 width: 23%; 244 height: 758px; 245 padding-top: 1px; 246 line-height: 1.5em; 247 text-align: center; 248 border-right: solid 1px black; 249 border-bottom: solid 1px black; 250} 251 252aside #over { 253 background-color: green; 254 height: 700px; 255 overflow-y: scroll; 256 width: 98%; 257 margin-left: 1%; 258} 259 260aside .front_aside { 261 width: 90%; 262 margin: auto; 263 padding: auto; 264 padding-top: 1px; 265 clear: both; 266 border-bottom: solid 1px black; 267 background-color: yellow; 268} 269 270aside .front_aside .left_aside { 271 float: left; 272 margin: auto; 273 margin-top: 4px; 274 padding: auto; 275 width: 40%; 276 clear: both; 277} 278 279aside .front_aside .left_aside .img_aside { 280 margin: 0; 281 padding: 0; 282 width: 60%; 283 height: 100%; 284} 285 286aside .front_aside .right_aside { 287 float: right; 288 margin: auto; 289 margin-top: 20px; 290 padding: auto; 291 width: 60%; 292} 293 294aside .front_aside .right_aside .rightaside_states { 295 color: cyan; 296} 297 298/* footer */ 299footer { 300 width: 90%; 301 height: 90%; 302 margin: auto; 303 margin-bottom: 35px; 304 padding: auto; 305 padding-top: 20px; 306 clear: both; 307} 308 309footer hr { 310 margin-top: 20px; 311 margin-bottom: 35px; 312 clear: both; 313} 314 315/* link */ 316a:link { 317 318} 319 320a:visited { 321 322} 323 324a:focus { 325 326} 327 328a:hover { 329 330} 331 332a:active { 333 334} 335 336/* 吹き出し 左 */ 337section .chatroom_section .chatroom_say_front .balloon-1-left { 338 display: inline-block; /* コメントの文字数に合わせて可変 */ 339 padding: 15px 20px; 340 margin-top: 8px; 341 margin-right: 80px; 342 border-radius: 30px; 343 position: relative; 344 background-color: #D9F0FF; 345 text-align: left; 346 width: 80%; 347} 348 349section .chatroom_section .chatroom_say_front .balloon-1-left:after { 350 content: ""; 351 position: absolute; 352 top: 20px; left: -30px; 353 margin-top: -10px; 354 display: block; 355 width: 0px; 356 height: 0px; 357 border-style: solid; 358 border-width: 40px 40px 40px 0px; 359 border-color: transparent #D9F0FF transparent transparent; 360} 361 362/* 吹き出し 右 */ 363section .chatroom_section .chatroom_say_front_right .balloon-2-right { 364 display: inline-block; /* コメントの文字数に合わせて可変する処理 */ 365 padding: 15px 0px 15px 15px ; 366 margin-left: 50px; 367 border-radius: 30px; 368 position: relative; 369 text-align: left; 370 background: #ffa3d1; 371 width: 80%; 372} 373 374.balloon-2-right:before { 375 content: ""; 376 position: absolute; 377 top: 10%; right: -70px; /* 三角の吹き出し部分の位置を決める */ 378 display: block; 379 border-style: solid; 380 border-width: 40px 40px 40px 40px; 381 border-color: transparent transparent transparent #ffa3d1; 382}
回答3件
0
ソースコードが断片的で正しい回答か分かりませんが、height: 100%; としたい場合、親要素に height: 100%; を指定する必要があります。
html
1<html> 2<body> 3 4<div class="example"></div> 5 6</body> 7</html>
このようなHTMLだった場合、
css
1html, body 2{ 3 height: 100%; 4} 5.example 6{ 7 height: 100%; 8}
IE10+対応なら
html
1<!DOCTYPE html> 2<html lang="ja"> 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"> 7<title></title> 8</head> 9<style> 10* 11{ 12 margin: 0; 13 padding: 0; 14} 15html, 16body 17{ 18 height: 100%; 19} 20.container 21{ 22 display: -webkit-box; /* Android */ 23 display: -webkit-flex; /* Safari */ 24 display: -ms-flexbox; /* IE10 */ 25 display: flex; 26 -webkit-box-direction: column; /* Android */ 27 -webkit-flex-direction: column; /* Safari */ 28 -ms-flex-direction: column; /* IE10 */ 29 flex-direction: column; 30 height: 100%; 31} 32.wrapper 33{ 34 display: -webkit-box; /* Android */ 35 display: -webkit-flex; /* Safari */ 36 display: -ms-flexbox; /* IE10 */ 37 display: flex; 38 -webkit-box-flex: 1; /* Safari */ 39 -ms-flex: 1; /* IE10 */ 40 flex: 1; 41 position: relative; 42} 43.inner 44{ 45 display: -webkit-box; /* Android */ 46 display: -webkit-flex; /* Safari */ 47 display: -ms-flexbox; /* IE10 */ 48 display: flex; 49 position: absolute; 50 top: 0; 51 left: 0; 52 right: 0; 53 bottom: 0; 54} 55.inner.column 56{ 57 -webkit-box-direction: column; /* Android */ 58 -webkit-flex-direction: column; /* Safari */ 59 -ms-flex-direction: column; /* IE10 */ 60 flex-direction: column; 61} 62.inner.scroll 63{ 64 overflow-y: auto; 65} 66.side 67{ 68 width: 25%; 69 height: 100%; 70 background: green; 71 overflow-y: auto; 72} 73.main 74{ 75 position: relative; 76 width: 75%; 77 height: 100%; 78} 79.content 80{ 81 position: relative; 82 -webkit-box-flex: 1; /* Safari */ 83 -ms-flex: 1; /* IE10 */ 84 flex: 1; 85} 86</style> 87<body> 88 89<div class="container"> 90 <div class="wrapper"> 91 <div class="inner"> 92 <aside class="side"> 93 side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br> 94 side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br> 95 side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br> 96 side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br> 97 side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br> 98 side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br> 99 </aside> 100 <section class="main"> 101 <div class="inner column"> 102 <div class="content"> 103 <div class="inner scroll"> 104 content<br>content<br>content<br>content<br>content<br>content<br>content<br> 105 content<br>content<br>content<br>content<br>content<br>content<br>content<br> 106 content<br>content<br>content<br>content<br>content<br>content<br>content<br> 107 content<br>content<br>content<br>content<br>content<br>content<br>content<br> 108 content<br>content<br>content<br>content<br>content<br>content<br>content<br> 109 content<br>content<br>content<br>content<br>content<br>content<br>content<br> 110 content<br>content<br>content<br>content<br>content<br>content<br>content<br> 111 </div> 112 </div> 113 <div class="box">仮ボックス</div> 114 <div class="chat">chat</div> 115 </div> 116 </section> 117 </div> 118 </div> 119 <footer class="footer"> 120 Copyright... 121 </footer> 122</div> 123 124</body> 125</html>
こんな感じですかね。
投稿2016/11/30 22:17
編集2016/12/02 10:32
総合スコア248
早速のご回答をありがとうございます！
ソースコードが断片的で
申し訳ございません。
<body>
<div id=”wrappr”>
と書いていて、
body.wrappr共に
heightを100%にしています。。
displayがblockだから行けないんでしょうか？？
最上位HTMLタグには？
コメントありがとうございます！
最上位HTMLタグには
body {
width: 100%;
height: 100%;
background-image:url();
}
このような設定をしています！
html {
height: 100%;
}
としていますか？
全ソース載せてもらえるとありがたいですね。
コメントありがとうございます！
htmlというプロパティは
cssファイルに存在してませんでした。。
試して見ます！
ダメだったら、全ソースを
アップします！
お手数おかけいたします、
宜しくお願い致します！
お世話になっております。
解決が厳しそうでしたので、全ソースを載せたいと思います。
どうかご教示をお願い致します＞＜
ざっくりでよいのでHTMLの方も欲しいですね。
たぶん他の回答者さんも質問の意図が分かりづらく感じていると思うので、できれば図なんかあると助かります。
ここではなく、質問の方に追記で構いません。
コメントありがとうございます！
承知いたしました。
HTMLを載せます！
今からやってみますね。少し時間がかかるかもしれないのでお待ちください。
もう１つ確認したいことが。対応ブラウザはIE10+かそうでないかどちらでしょう。
あと、#wrapperのmargin-top:30pxって必要なのでしょうか？
コメント、いつもありがとうございます。
対応ブラウザですが、一応IE11、chrome、firefoxだったと記憶してます。。
IE10＋というブラウザってあるんですね！
色々初めて知ることが多くてうれしいです＞＜
#wrapper {
margin-top: 30px;
}
は、確かヘッダーとの距離を少し空けたくて取った幅だったと
思いますが、いらなそうであればご指摘いただけましたら幸いです。
宜しくお願いいたします。
IE 10以降のいみぞw プラスとよんではいけない
コメントありがとうございます。
えっ、そういう意味なんですね。。恥ずかしい…。。
ご指摘ありがとうございます＞＜；
0
ベストアンサー
heightをレスポンシブっぽく動かしたいならこんなものではないでしょうか(質問が完全に理解できていないかも)
質問者さんのやりたいことはflexプロパティで実現できると思いましたので、一応回答をします。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 body, html { 13 height: 100%; 14 } 15 16 header { 17 height: 114px; 18 background: black; 19 color: white; 20 } 21 22 section { 23 flex: 1; 24 background: white; 25 } 26 27 footer { 28 height: 514px; 29 background: black; 30 color: white; 31 } 32 33 .wrapper { 34 display: flex; 35 height: 100%; 36 flex-direction: column; 37 } 38 </style> 39</head> 40<body> 41<div class="wrapper"> 42 <header> 43 ヘッダ 44 </header> 45 <section> 46 <h1>それぞれレスポンシブっぽい</h1> 47 </section> 48 <footer> 49 フッタ 50 </footer> 51</div> 52</body> 53</html>
補足
反転しているという状況がわかりませんが、cssを見る限りこのようなデザインを目指しているのでは？と思ったので追記します。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 body, html { 13 height: 100%; 14 } 15 16 header { 17 height: 150px; 18 background: green; 19 color: white; 20 } 21 22 section { 23 flex: 1; 24 background: white; 25 } 26 27 footer { 28 height: 150px; 29 background: green; 30 color: white; 31 } 32 33 .wrapper { 34 display: flex; 35 height: 100%; 36 flex-direction: column; 37 } 38 39 .nav { 40 background: red; 41 height: 100%; 42 width: 20%; 43 float: left; 44 } 45 46 .main { 47 background: blue; 48 height: 100%; 49 width: 80%; 50 float: right; 51 color: white; 52 } 53 54 </style> 55</head> 56<body> 57<div class="wrapper"> 58 <header> 59 ヘッダ 60 </header> 61 62 <section> 63 <div class="nav"> 64 <h1>サイド</h1> 65 </div> 66 <div class="main"> 67 メイン 68 </div> 69 </section> 70 71 <footer> 72 フッタ 73 </footer> 74</div> 75</body> 76</html>
これはヘッダとフッタの高さが固定で、section内の要素が高さに応じて変化します(実行するとどんな感じかはこちら)。
もしsectionの子孫要素に高さが指定してあるものがあるときは、その要素に高さをあわせようとするので、高さは変化しなくなります(高さが変化しなくなるときのサンプルはこちら)。
投稿2016/12/01 11:18
編集2016/12/02 05:15退会済みユーザー
総合スコア0
コメントありがとうございます！
flexプロパティというものがあるんですね。ありがとうございます、勉強になります。
回答者さまのやり方を真似してみたら、画面が反転してしまいました＾＾；
途方にくれております。。
ご教示ありがとうございます＞＜；はい、こんな感じのものをしたいです！
実際のコードであてはめてみたいと思います；；
左サイドと右サイドの両方をflexにしているんですね。
ヘッダーとフッターは動かなくていいのですが、もし動かしたい場合は
headerとfooterにflexを入れればいいのでしょうか？
ヘッダーとフッターが動く状態とはどのような状態ですか？
もう少し詳しくよろしくお願いします。
コメントありがとうございます。失礼いたしました。
sectionと同じように、ヘッダーもフッターもレスポンシブ対応で
ウインドウを上下左右に動かしてもウインドウ幅に合わせてサイズが
変わるようにしたい、ということです。。
伝わりますでしょうか…。
headerとfooterのheightを%指定にすると高さもウィンドウ高さに合わせて動くようになります。
コメントありがとうございます！
やってみて、確かにそうなりました。
もうすぐ出来そうです！
ならよかったです。
ぜひがんばってください
すみません。もう一つ質問が浮かびましたので、ご教示いただけましたら嬉しいです。。
flex-direction: column; で、各ボックスをフレックスにできたのですが、
縮む倍率といいますか、速さといいますか、ウィンドウを狭めたときに
縮む率は決めることができるのでしょうか？
.navと.mainのwidthの％を変化させることで縮む率を変更することができると思います。
縮む倍率についていまいち理解できていないところがあるので、的外れなことを言っているかもしれませんが。
0
「高さ」がレスポンシブ対応になりません。
背景画像のことでしょうか。background-size: cover; で画面いっぱいになります。
【CSS の background-size での cover、contain、auto の違い - Web/DB プログラミング徹底解説】
http://keicode.com/script/css-background-size.php
投稿2016/12/01 02:08
総合スコア69400
コメント、ご教示ありがとうございます！
背景画像の、そのような設定方法があったんですね。
知りませんでした。
勉強になります、ありがとうございます！
お伺いしたく思っているのは
今回は背景画像ではなく、
背景画面そのものといいますか…
ウィンドウを小さくすると
幅、高さが画面に合わせて変わるようにしたいのです。
お知恵をお貸しくださいませ。。
> 幅、高さが画面に合わせて変わるようにしたいのです。
「何の」という部分が抜けています。で、現在どうなっているのかもわかりません。もう少し具体的にお願いします。
コメントありがとうございます！
ウインドウの幅と、高さが変わると、それに合わせて作っている画面が伸縮するといいますか、
つたない説明で申し訳御座いませんが、そのようにしたいです。
現在は、「幅」のみレスポンシブ対応になっているようです。
「高さ」は100%で指定していますが、レスポンシブにはなっていないようなのです。
どうかご教示をお願い致します。
コードは質問文に「追記」してください。（決して元のコードを消さないでください）
コメントは編集できるので、コード部分は削除して置いてください。
失礼いたしました。
CSSの文章を消しました。コメントは編集出来るんですね。。
teratailも慣れていないもので、申し訳ございません。
宜しくお願いいたします。
「画面」とはなんでしょう。PCのディスプレイも画面です。これが歪むことがあるのでしょうか。
縦横比が上手く変わらないということであれば、具体的に何処の部分について比率を守る必要があるのか、また、現在の状態と自分の理想を図示されたほうが良いと思います。
コメントありがとうございます。失礼いたしました。
画面というのは、ブラウザのことです。
ブラウザを縮小、拡大した際に、それに合わせてサイトのほうが
縮小・拡大したいということです。
現在の状態は、
レスポンシブ（幅）は出来ているけど縦が出来てない
理想は、
縦、横のレスポンシブが出来る
というところです。
うまく説明出来ずに申し訳御座いません。
よろしくお願い致します。
具体的に何処の部分について比率を守る必要があるのか、また、現在の状態と自分の理想を図示されたほうが良いと思います。
いつもご指摘ありがとうございます！
図示とは、どのようなことを行えばよいでしょうか？
質問のところを編集して、何か図を入れるということでしょうか？
「図示」の意味がわかりにくかったでしょうか･･･。
他の方の回答＆コメントで解決しそうなので、がんばってください！
いつもご指摘ありがとうございます！
はい、もうすぐで何とかなりそうですが、もう一歩です＞＜
頑張ります！
ごめんなさい、図示がよくわかりませんでした。。
あなたの回答
tips
プレビュー
