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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

955閲覧

スマホでサイトを表示する際、ボタンを横並びから縦並びに変えたい

tora822

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/01/16 08:13

編集2021/01/16 08:40

JavaScriptで簡単なクイズゲームを作り、GITHUBから公開しました。
PCでは問題なく起動するのですが、スマホのように画面が縦長になると、本来横並びに設定している選択肢ボタンの中の文字がみづらくなるので、@media(max-width:670px)(※Progate上級コースのスマホ版のwidthを参照)の時に縦並びになるよう設定しましたが反映されません。

もともとスタイルシートを外部サイトから引用し、その後に自作のCSSファイルで書き加えたせいなのか、他に理由があるのか分かりません。どのようにすれば、ボタンを縦並びに変えることができるでしょうか。

追記:縦方向に改変することはできました。 あとは、ボタンを中央揃え、もしくは画面いっぱいに横に広げるといったCSSを加えたいです。

HTML

1<!doctype html> 2<html class="no-js" lang=""> 3 4<head> 5 <meta charset="utf-8"> 6 <title>ポケモンクイズ</title> 7 <meta name="description" content=""> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 10 <meta property="og:title" content=""> 11 <meta property="og:type" content=""> 12 <meta property="og:url" content=""> 13 <meta property="og:image" content=""> 14 15 <link rel="apple-touch-icon" href="icon.png"> 16 <!-- Place favicon.ico in the root directory --> 17 18<!-- CSS only --> 19<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"> 20<link rel="stylesheet" href="style.css"> 21 22 <meta name="theme-color" content="#fafafa"> 23</head> 24 25<body> 26 <div class="container"> 27 28 <div class="jumbotron mt-5"> 29 <div class="d-flex justify-content-center"> 30 <div id="js-question" class="alert alert-primary" role="alert"> 31 A simple primary alert—check it out! 32 </div> 33 </div> 34 35 <div id="js-items" class="d-flex justify-content-center"> 36 <div class="m-2"> 37 <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button> 38 </div> 39 <div class="m-2"> 40 <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button> 41 </div> 42 <div class="m-2"> 43 <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button> 44 </div> 45 <div class="m-2"> 46 <button type="button" id="js-btn-4" class="btn btn-primary">Primary</button> 47 </div> 48 </div> 49 </div> 50 </div> 51 52<script src="app.js"></script> 53</body> 54 55</html>

CSS

1@media(max-width:1000px) { 2 #js-items { 3 flex-direction:column; 4 } 5 .m-2 button { 6 width: 100% 7 margin: 0 auto; 8 } 9}

JavaScript

1const quiz = [ 2 { 3 question: "ホウエン地方で最初に手に入れられないポケモンはどれ?", 4 answers: [ 5 "キモリ", 6 "ピカチュウ", 7 "アチャモ", 8 "ミズゴロウ" 9 ], 10 correct: "ピカチュウ" 11 }, { 12 question: "シンオウ地方のポケモン博士は誰?", 13 answers: [ 14 "オダマキ博士", 15 "オーキド博士", 16 "ナナカマド博士", 17 "ウツギ博士" 18 ], 19 correct: "ナナカマド博士" 20 }, { 21 question: "ポケモン全国図鑑のNo.491のポケモンはどれ?", 22 answers: [ 23 "レジギガス", 24 "ダークライ", 25 "シェイミ", 26 "アルセウス" 27 ], 28 correct: "ダークライ" 29 }, { 30 question: "ホウエン地方チャンピオン戦VSダイゴの1匹目のポケモンはどれ?", 31 answers: [ 32 "アーマルド", 33 "メタグロス", 34 "ボスゴドラ", 35 "エアームド" 36 ], 37 correct: "エアームド" 38 },{ 39 question: "シンオウ地方のバトルタワーのタワータイクーンは誰?", 40 answers: [ 41 "ジンダイ", 42 "ダツラ", 43 "クロツグ", 44 "リラ" 45 ], 46 correct: "クロツグ" 47 } 48]; 49 50const quizLength = quiz.length; 51let quizIndex = 0; 52let score = 0; 53 54const $button = document .getElementsByTagName("button") 55const buttonLength = $button.length; 56 57//クイズの問題文、選択肢を定義 58const setupQuiz = () => { 59 document.getElementById("js-question").textContent=quiz[quizIndex].question; 60 let buttonIndex = 0; 61 while(buttonIndex < buttonLength){ 62 $button[buttonIndex].textContent = quiz[quizIndex].answers[buttonIndex]; 63 buttonIndex++; 64 } 65} 66setupQuiz(); 67//クイズの正誤の処理 68const clickHandler = (e) => { 69 if (quiz[quizIndex].correct === e.target.textContent){ 70 window.alert("正解!"); 71 score++; 72 }else{ 73 window.alert(`不正解!正解は、「${quiz[quizIndex].correct}」です!`); 74 } 75 76 quizIndex++; 77 78 if(quizIndex < quizLength){ 79 //問題数がまだあればこちらを実行 80 setupQuiz(); 81 }else if(score === 5){ 82 //全問正解したらこちらを実行 83 window.alert(`終了!Congratulations!全問正解です!`); 84 }else if(score === 0){ 85 //全問不正解したらこちらを実行 86 window.alert(`終了!残念!全問不正解です!`); 87 }else{ 88 //問題数がもうなければこちらを実行 89 window.alert(`終了!あなたの正解数は` + score + `/` + quizLength + `です!`); 90 } 91 92}; 93 94//ボタンをクリックしたら正誤判定 95let handlerIndex = 0; 96while (handlerIndex < buttonLength) { 97 $button[handlerIndex].addEventListener("click",(e)=>{ 98 clickHandler(e); 99 }); 100 handlerIndex++ 101}; 102

リンク内容

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/01/16 08:29

> @media(max-width:670px)の時に縦並びになるよう設定しましたが反映されません。 この「670」という数値は何を根拠に出てきているのでしょうか。
tora822

2021/01/16 08:30

Progate上級コースで使用したスマホ版のwidthをそのまま流用しました。
m.ts10806

2021/01/16 08:32

当該内容追記してください。
退会済みユーザー

退会済みユーザー

2021/01/16 08:39

リンク内容をChromeDevToolのモバイルモードで確認しましたが、おそらくtora822さんの意図通りに動いています。 確認する環境の問題だったりしないでしょうか? width:671以上の時は回答ボタンが横並びになる事 → OK width:670以下の時は回答ボタンが縦並びになる事 → OK
tora822

2021/01/16 08:42

追記した通り、縦方向は確認できました。サイトアップロード後に追加したCSSなので、反映が遅れたのだと思われます。加えて、ボタンの位置をcenter、もしくはwidth: 100%;(画面いっぱい)にしたいのですが、このコードでそれは可能でしょうか。修正、加筆は必要でしょうか。
m.ts10806

2021/01/16 08:47

回答したのに要件が変わってしまった。さて、どうしようか。
m.ts10806

2021/01/16 08:48

自身で回答して自己解決しておいてください。
tora822

2021/01/16 08:49

分かりました。ありがとうございました。
退会済みユーザー

退会済みユーザー

2021/01/16 08:51 編集

何というか、まずは【現状を把握して、修正して、それを確認する】ってのをやってみましょ? それで出来なかったら、コードと現象を書くなどした方が良いと思います。 幸い、どこが分からないのか分からないって状態でもなさそうに思いますので。 ちなみに、リンク内容をDevToolでCSSを操作した所、ボタンを横幅いっぱいにというのは出来たので、『可能』です。
tora822

2021/01/16 08:51

以後そのようにいたします。ありがとうございます。
guest

回答2

0

自己解決

サイトの仕様変更にラグが生じていただけのようでした。縦方向にすることは解決しました。

投稿2021/01/16 08:50

tora822

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/01/16 08:52

>サイトの仕様変更にラグが生じていただけのようでした 「キャッシュが残っていた」というのが正しいです。
tora822

2021/01/16 08:53

なるほど、分かりました。訂正ありがとうございます。
guest

0

@media(max-width:670px)

「リンク内容」のサイト上はブラウザ幅狭めると想定の動きをしているので、単に利用しているスマートフォンのmax-widthが670より広いから、と思われます。

少し古いですが幅については下記のような記事を参考にしてください。
レスポンシブウェブデザインのメディアクエリのオススメの書き方

また、他にも既存のCSSフレームワークの設定を参考にしてみると良いかもしれません。

Bootstrap4/overview
Bootstrap5/Breakpoints

あと、試すなら背景色とか「視覚的に明らかに分かる指定」から。

投稿2021/01/16 08:37

編集2021/01/16 08:39
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問