質問編集履歴
2
670pxの規定理由と、CSSのwidth、marginの改変 縦方向の反映の確認と新たな質問を追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
JavaScriptで簡単なクイズゲームを作り、GITHUBから公開しました。
|
|
2
2
|
|
|
3
|
-
PCでは問題なく起動するのですが、スマホのように画面が縦長になると、本来横並びに設定している選択肢ボタンの中の文字がみづらくなるので、＠media(max-width:670px)の時に縦並びになるよう設定しましたが反映されません。
|
|
3
|
+
PCでは問題なく起動するのですが、スマホのように画面が縦長になると、本来横並びに設定している選択肢ボタンの中の文字がみづらくなるので、＠media(max-width:670px)(※Progate上級コースのスマホ版のwidthを参照)の時に縦並びになるよう設定しましたが反映されません。
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
もともとスタイルシートを外部サイトから引用し、その後に自作のCSSファイルで書き加えたせいなのか、他に理由があるのか分かりません。どのようにすれば、ボタンを縦並びに変えることができるでしょうか。
|
|
8
8
|
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
追記：縦方向に改変することはできました。 あとは、ボタンを中央揃え、もしくは画面いっぱいに横に広げるといったCSSを加えたいです。
|
|
12
|
+
|
|
9
13
|
```HTML
|
|
10
14
|
|
|
11
15
|
<!doctype html>
|
|
@@ -126,15 +130,15 @@
|
|
|
126
130
|
|
|
127
131
|
#js-items {
|
|
128
132
|
|
|
133
|
+
flex-direction:column;
|
|
134
|
+
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.m-2 button {
|
|
138
|
+
|
|
129
139
|
width: 100%
|
|
130
140
|
|
|
131
|
-
flex-direction:column;
|
|
132
|
-
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.m-2 button {
|
|
136
|
-
|
|
137
|
-
margin
|
|
141
|
+
margin: 0 auto;
|
|
138
142
|
|
|
139
143
|
}
|
|
140
144
|
|
1
link relの閉じタグを追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
|
|
47
47
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
|
48
48
|
|
|
49
|
-
<link rel="stylesheet" href="style.css"
|
|
49
|
+
<link rel="stylesheet" href="style.css">
|
|
50
50
|
|
|
51
51
|
|
|
52
52
|
|