佐賀でホームページ制作やスマホアプリ制作、
SEO対策ならアルラボにお任せください

スマホとPCで要素の順番を変更する方法

Web制作をしていると、PCだとこの順番のレイアウトでいいけれど、スマホだとちょっと変えたほうがいいかも・・なんてことがたまにあるかと思います。(少なくとも僕はありました)

そんな時、jQueryで簡単にその順番を変更することが可能ですので、ご紹介します。

jQueryを予めご用意の上、下に進みましょう。

beforeおよびafterメソッドを使う。

beforeメソッド

beforeメソッドはその名のとおり、入れ替えたい要素をその対象要素(引数)の前に持ってくるものです。

$(function(){
  $('#1').before($('#2'));
});

これで#2が#1の前(上)に表示されるようになります。

afterメソッド

逆にafterメソッドは対象要素(引数)を入れ替えたい要素の後ろに持ってくるものです。

$(function(){
  $('#2').after($('#1'));
});

これも#2が#1の前(上)に表示されるようになります。

引数を複数設定する

$(function(){
  $('#2').after($('#1'),$('#3'),$('#5'),$('#4'),$('#6'));
});

引数は複数設定することが可能です。

これで表示される順番は2,1,3,5,4,6となります。

ユーザーエージェントで条件分けする。

アクセスしたデバイスがiPod,iPhone,Androidの場合といった条件分岐を行い、上記を挿入すれば良いです。

if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
//ここに書いた処理はスマホやipadで閲覧時に有効となります。
}else{
//それ以外(PC)で閲覧時に有効となります。
}

これらを組み合わせて書くと、スマホでアクセスした場合とPCでアクセスした場合の表示順を切り替えることが可能になります。

デモページあります。

こちらにデモをご用意しましたので、PCとスマホでそれぞれアクセスしてみてください。

https://ideaideal.jp/demo/order-demo/demo1.html

この記事を書いた人

代表取締役画像

直塚一仁

株式会社アルラボ 代表取締役
FPS(First Person Shooting)ゲームで最近勝てなくなり、加齢を感じている。

今日の一言

筋トレに励んでいます。

記事を参考にしていただくのはありがたいですが、その結果において弊社は責任を負いかねますのであらかじめご了承ください。また、記事の内容や設定方法などのお問い合わせはご遠慮ください。

TOP

TOP