イベント掲示板をPHPの練習として作っています。
https://gms.gdl.jp/~rikuta/Life.Note/black/index.html#
http://gms.gdl.jp/~rikuta/Life.Note/Life_insert.phpのページで、『Thank you!!』のもじを下のコードで出力しています。
html
1<div class="container"> 2 <canvas id="myCanvas" width="640" height="480"></canvas> 3 </div> 4 <script type="text/javascript" src="https://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script> 5 <script type="text/javascript" src="main.js"></script> 6 7<div class="position-absolute h-100 w-100 m-0 d-flex align-items-center justify-content-center"> 8 <a href="http://gms.gdl.jp/~rikuta/Life.Note/Life_list.php"><button type="button" class="btn btn-sm btn-primary btn-lg mr-1">イベント一覧に戻る</button></a> 9 <a href="http://gms.gdl.jp/~rikuta/Life.Note/Life_insert.html"><button type="button" class="btn btn-sm btn-secondary btn-lg">イベントを追加する</button></a> 10</div> 11
javascript
1 <script type="text/javascript"> 2 3 var myName = "Thank you!!"; 4 5 var red = [0, 100, 63]; 6 var orange = [40, 100, 60]; 7 var green = [75, 100, 40]; 8 var blue = [196, 77, 55]; 9 var purple = [280, 50, 60]; 10 var letterColors = [red, orange, green, blue, purple]; 11 12 drawName(myName, letterColors); 13 14 if(10 < 3) 15 { 16 bubbleShape = 'square'; 17 } 18 else 19 { 20 bubbleShape = 'circle'; 21 } 22 23 bounceBubbles(); 24 25 </script>
こちらの文字をレスポンシブ化させたいのですが、なかなか上手くいきません。
試したのは、https://nuconeco.net/responsive-ui-breakpoints/の記事を参考にして、CSSでブレイクポイントを設定することなどです。
1時間ほど悩んだのですが、どうしても解決しないので、わかる方がいらっしゃればよろしくお願いいたします。
あなたの回答
tips
プレビュー