Warning: Invalid argument supplied for foreach() in /home/csj1189/xia-inc.com/public_html/wps/wp-content/themes/xia/single.php on line 13
スタッフブログ 2020-06-26
スマホ閲覧時に要素を並び替える方法
こんにちは、村山です。
ホームページを制作するときに、スマホの時は要素の並び替えをしたい時ありますよね・・・。
そんなお悩みはjQueryで一発解決できますよ！
制作イメージはこちら。
・PC表示時は、左に紹介文、右に画像。
・スマホ表示時は、上に画像、下に紹介文。
コードはこちら。
※ここではpタグとfigureタグにクラス属性を付与しています
|
1 2 3 4 5 6 7 8 |
<div> <div> <p class="js-append">テキストが入りますテキストが入りますテキストが入ります</p> <figure class="js-append-move"> <img src="画像のパスが入ります" alt=""> </figure> </div> </div> |
上記のままだと、pタグが先に読み込まれ、画像はその次に読み込まれる為、スマホ表示時に実現したい”文字の上に画像”を配置することができません。
ここで、jQueryの出番です。
※あらかじめjQueryを読み込ませる必要がありますので、ご注意ください。
bodyの閉じタグの前に下記コードを記述します。
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> //スマホ表示時要素を並び替える $(function() { var width = $(window).width(); if (width < 767) { $(".js-append-move").insertBefore(".js-append"); } }); </script> |
上記コードを書くことで、画面幅が767幅以下になったときに、クラス属性”js-append-move”を”js-append”の前に移動させることができます。
ちなみに、画面幅はご自身のお好きな幅に設定することが可能です。
これでスマホ表示時は”上に画像、画像の下に紹介文”を実装することができました。
上記以外にも様々な方法があると思いますが、ご参考にしていただけると幸いです。