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

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

ただいまの
回答率

90.52%

  • JavaScript

    16348questions

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

  • CSS

    5759questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

要素の順番を入れ替える方法

受付中

回答 4

投稿 編集

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

kawakami_kk

score 6

タブレットやスマホではユーザーエージェントを判定して下記を読み込ませないページにしたいです。 
cssのメディアクエリに合わせるために、width:960px以下までを無効にしたいのですが適応されてしまっています。
どうすればいいでしょうか?

追加
文書をはしょりすぎました。
意図を汲んでくれた方ありがとうございます。一応補足でこんな感じにwebサイト作りたいです。
イメージ説明
イメージ説明
上記のようにPC版だけにナビと画像を入れ替えたいです。
cssのOrderも試したのですが、うまくいかなかったので下記で試したのですが
タブレットにも適応されてしまい困ってました。

ご提案頂いた、下記でやってみたのですが、960以下でも入れ替わりができてしまいます。
どうすればいいでしょうか?

<script>
if (window.matchMedia("(min-width: 960px)").matches){
    var a=document.getElementsByClassName('a')[0],
        b=document.getElementsByClassName('b')[0],
        c=b.nextSibling;
        a.parentNode.insertBefore(b,a);
        c.parentNode.insertBefore(a,c);

  } 

</script>


追加02
HTMLはこんな感じです。
テンプレ作成でデザインのみ違うバージョンを複数作らないといけないので
HTMLの方はいじれません。
cssやjsで対応し、レスポンシブで作成です。

    <header>
        <div id="header_innerBox">
            <div class="logoBox">
                <p>テキスト|テキスト</p>
                <h1 class="logo">
                        <a href="index.html"><img src="images/rogo.png" alt="ロゴ" class="shape"></a>
                </h1>
            </div>


            <div class="telnoBox">
                <p class="booking">
                    <a href="テキスト.html">予約制</a>
                </p>
                <a href="tel:0000000">
                    <i class="fas fa-phone fa-2x"></i>
                </a>

                <p class="telno pc">
                    <span class="none">00-000-0000</span>
                    <span class="time">00:00~00:00 / 00:00~00:00</span>
                    <span class="time color">休診[・・]</span>
                </p>
            </div>
            <!--telnoBox-->
        </div>
        <!--header_innerBox-->


        <div class="telno sp">
            <span class="none">123-456-8912</span>
            <span class="time">00:00~00:00 / 00:00~00:00</span>
        </div>

        <div class="gnav_bg a">
        <nav id="global-nav">

            <ul>
                <li>
                    <a title="ABOUT" href="テキスト.html">テキスト</a>
                </li>
                <li>
                    <a title="DOCTOR&STAFF" href="テキスト.html">テキスト</a>
                </li>

                <li>
                    <a title="CLINIC" href="テキスト.html">テキスト</a>
                </li>

                <li>
                    <a title="MEDICAL" href="テキスト.html">テキスト</a>
                </li>

                <li class="spbr">
                    <a title="ABOUT" href="テキスト.html">テキスト</a>
                </li>
                <li class="spbr basis">
                    <a title="CONTACT" href="テキスト.html">テキスト</a>
                </li>
            </ul>
        </nav>
    </div>
    </header>





    <div id="mainVisual" class="Visual_width b">


        <div class="slide">

            <!-- Slider main container -->
            <div class="swiper-container">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->

                    <div class="swiper-slide">
                        <figure>
                            <img src="images/main.jpg" alt="メイン画像">
                        </figure>
                    </div>
                    <div class="swiper-slide">
                        <figure>
                            <img src="images/main.jpg" alt="メイン画像">
                        </figure>
                    </div>
                    <div class="swiper-slide">
                        <figure>
                            <img src="images/main.jpg" alt="メイン画像">
                        </figure>
                    </div>

                </div>
            </div>
        </div>

        <p>テキスト
        </p>

        <p class="textSub">テキスト</p>

    </div>

    <section class="Catchcopy">
テキスト
    </section>

PCのみ#mainVisualと#global-nav部分の入れ替えしたいのですが、cssでできますでしょうか?

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • mather

    2018/07/05 15:27

    JSが動くことで何が問題で、どうなっていて欲しいのかを具体的に記載してください。メディアクエリで仮に非表示になっていても要素はあるのでJSが動くことは特に問題ないと思うのですが。

    キャンセル

  • mather

    2018/07/05 15:33

    というのと、質問のタイトルと内容がぜんぜん一致していないように見えます。

    キャンセル

  • yoshinavi

    2018/07/06 10:48

    質問を理解していないかもですが、CSSの設定次第では?当初考えていたCSSも提示されると、より良い回答を得れると思います。

    キャンセル

回答 4

+2

matchMedia()で判定できます。

if (window.matchMedia("(min-width: 960px)").matches) {
  // 処理。
}

window.matchMedia()
https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia

-- 16:56 960pxを含んでいたので訂正。

if (!window.matchMedia("(max-width: 960px)").matches) {
  // 処理。
}

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/05 17:21

    ありがとうございます。一応やりたいことは再現できたのですが、リアルタイムでブレイクポイントのブラウザの幅に合わせて、表示を確認するとPC版のがそのまま表示されます。(F5押せば解消されますが)メディアクエリみたいにブラウザでSPやタブレットのブレイクポイントまで狭めてf5押さずにスムーズには切り替えるのは難しいでしょうか?

    キャンセル

  • 2018/07/05 17:28

    resizeイベントがあるので、そのたびに処理すればいいです。
    https://api.jquery.com/resize/
    ただ、入れ替える方法では前回がどうだったのか判定しなければなりません。

    キャンセル

  • 2018/07/05 18:10 編集

    ありがとうございます。下記で試してみたのですが、ブラウザを狭めるたびに入れ替えた要素が交互に表示・非表示を繰り返しててなんだか微妙です。下記だけでは不十分でしょうか

    window.addEventListener('resize', function (event) {

    if(window.matchMedia('(min-width: 960px)').matches) {
    var a=document.getElementsByClassName('a')[0],
    b=document.getElementsByClassName('b')[0],
    c=b.nextSibling;
    a.parentNode.insertBefore(b,a);
    c.parentNode.insertBefore(a,c);
    }
    });

    キャンセル

  • 2018/07/05 18:18

    なので、入れ替え済みかどうかをフラグで持たなければならないでしょう。
    入れ替えたあと小さくしたら戻さなければなりませんし

    キャンセル

  • 2018/07/05 18:24

    var isPc = false;
    window.addEventListener('resize', function (event) {
    var match = !window.matchMedia("(max-width: 960px)").matches;
    if (match !== isPc) {
    // Swap処理.
    }

    isPc = match;
    });

    キャンセル

  • 2018/07/05 18:27

    今回HTMLが提示されなかったので挙げませんでしたが、場合によってはCSSだけで解決するかもしれません

    キャンセル

  • 2018/07/05 18:47

    度々すみません。HTML部分も追加してみたので、お時間あればよろしくお願いします

    キャンセル

0

screen.widthなどで判断されては?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

navigator.platform でOSの種類が取れるそうな。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

CSSだとこんな感じでしょうか?理解を間違っていたらスミマセン。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>example</title>
<style>
* {
  margin: 0;
  padding: 0;

}

.box_flex {
  margin-top: 50vh;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(0,-50%);
  background-color: lightgrey;

}

.box_img {
  width: 40vw;
  height: 20vw;
  background-color: skyblue;
  order: 1;  

}

.box_img2 {
  width: 40vw;
  height: 20vw;
  background-color: skyblue;
  background-color: lightcoral;
  order: 1;  

}

.box_nav {
  width: 60vw;
  height: 5vw;
  background-color: lightgreen;
  order: 1;

}

@media screen and (min-width: 961px) {
  .box_img2 {
    display: none;
  }

}

@media screen and (max-width: 960px) {
  .box_img {
    display: none;
  }

  .box_nav {
    order: -1;  
  }

}
</style>
</head>
<body>

<div class="box_flex">
  <div class="box_img">PC画像</div>
  <div class="box_img2">SP画像</div>
  <div class="box_nav">ナビゲーション</div>
</div>

</body>
</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/06 13:23

    >HTMLの方はいじれません。 

    これは全く触れないのでしょうか?
    であれば、例として回答はしましたが、的外れでした。スミマセン。
    (^^;)

    キャンセル

  • 2018/07/06 14:15

    ご提案ありがとうございます。cssに記述してみたのですが、やはりうまくいかなくて・・
    デザインの方を少し変更してもらえないかどうか掛け合っています。色々ありがとうございます

    キャンセル

  • 2018/07/06 14:26

    記述されたCSSを提示されると、より良い回答を得れると思います。

    キャンセル

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

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

関連した質問

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

  • JavaScript

    16348questions

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

  • CSS

    5759questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。