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

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

ただいまの
回答率

88.58%

HTML Javascript web用とスマホ用の画面切り替えについて

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 764

fantastic

score 14

 前提・実現したいこと

HTML Javascript web用とスマホ用の画面切り替えについてです。
専門学校の課題で学校祭についてのホームページ作成がだされました。
こんな感じで作りたいのですが
WEB
イメージ説明
スマホ
イメージ説明
汚くてすみません、、
まだ習いたてでjavascriptを使いこなせなくて悩んでおります。
現在使用してるのが、クリックしたらクラス名を変えるスクリプトを使っていますが、
WEB版に切り替わるとき(pxが798px超えたら)@media screen での中身の処理で
どのようにすれば画像通りに左右に振り分けられますか?

スマホ版をもとに作りたいので、
B
A
B
A
B
A

B  |A
B  |A(見えない)
B  |A(見えない)

こんな感じにfloat させたいです。
もとから直したほうがいいならその書き方もぜひ教えてください!

 発生している問題・エラーメッセージ

特になし

 該当のソースコード

<!DOCTYPE html>
<html lang="jp">

<head>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/ren.js"></script>
    <meta charset="UTF-8">
<body>
    <div class="container">
        <div class = "main-wrapper">

            <div id="a" >いべんと1</div>
            <div id="divA" >contentA A A A A A A A</div>

            <div id="b" >いべんと2</div>
            <div id="divB" >contentB B B B B B B B</div>

            <div id="c" >iイベント3</div>
            <div id="divC">contentC C C C C C C C</div>

            <div id="d" >イベント4</div>
            <div id="divD">contentA A A A A A A A</div>
        </div>


    </div>


</body>
</head>

</html>
function clickSwitch() {
    'use strict';
    var isA = 0; // 現在地判定
    var btnA = document.getElementById('a');
    var btnB = document.getElementById('b');
    var btnC = document.getElementById('c');
    var btnD = document.getElementById('d');


    var divA = document.getElementById('divA');
    var divB = document.getElementById('divB');
    var divC = document.getElementById('divC');
    var divD = document.getElementById('divD');


    function setState(isA) {
      btnA.className = (isA == 0) ? 'btn inactive' : 'btn'; // Aのとき非表示
      divA.className = (isA == 0) ? 'boxDisplay' : 'boxNone'; // Aのとき表示
      btnB.className = (isA == 1) ? 'btn inactive' : 'btn'; // Bのとき非表示
      divB.className = (isA == 1) ? 'boxDisplay' : 'boxNone'; // Bのとき表示
      btnC.className = (isA == 2) ? 'btn inactive' : 'btn'; // Cのとき非表示
      divC.className = (isA == 2) ? 'boxDisplay' : 'boxNone'; // Cのとき表示
      btnD.className = (isA == 3) ? 'btn inactive' : 'btn'; // Dのとき非表示
      divD.className = (isA == 3) ? 'boxDisplay' : 'boxNone'; // Dのとき表示


    }
    setState(0);

    btnA.addEventListener('click', function(){
      if (isA == 0) return;
      isA = 0;
      setState(0);
    });
    btnB.addEventListener('click', function(){
      if (isA == 1) return;
      isA = 1;
      setState(1);
    });
    btnC.addEventListener('click', function(){
        if (isA == 2) return;
        isA = 2;
        setState(2);
    });

    btnD.addEventListener('click', function(){
        if (isA == 3) return;
        isA = 3;
        setState(3);
    });


  };
  document.addEventListener("DOMContentLoaded", clickSwitch, false);
.btn:hover {
    opacity: .8;
}


.inactive {
     opacity: .5; 
}

.inactive:hover {
    opacity: .5;
    cursor: default;

}

/*ここで消してる*/
.boxDisplay {
     display: block; 

}
.boxNone { display: none; }

 試したこと

float を使ってみたのですが、
クリックされるごとにクラス名が変更されてむりでした

 補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

若干見当違いかもしれませんが、いわゆるレスポンシブレイアウトなどにしたいのであればフレームワークを使うのが早いかもしれません。
Angular Vue.js React Next.jsなど
学習コストと時間を考えていけそうなら使ってみて下さい。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る