スタッフブログ

スマホ閲覧時に要素を並び替える方法

こんにちは、村山です。

ホームページを制作するときに、スマホの時は要素の並び替えをしたい時ありますよね・・・。

そんなお悩みはjQueryで一発解決できますよ!

制作イメージはこちら。

・PC表示時は、左に紹介文、右に画像。

・スマホ表示時は、上に画像、下に紹介文。

コードはこちら。
※ここではpタグとfigureタグにクラス属性を付与しています

 

上記のままだと、pタグが先に読み込まれ、画像はその次に読み込まれる為、スマホ表示時に実現したい”文字の上に画像”を配置することができません。

ここで、jQueryの出番です。

※あらかじめjQueryを読み込ませる必要がありますので、ご注意ください。

bodyの閉じタグの前に下記コードを記述します。

上記コードを書くことで、画面幅が767幅以下になったときに、クラス属性”js-append-move”を”js-append”の前に移動させることができます。

ちなみに、画面幅はご自身のお好きな幅に設定することが可能です。

これでスマホ表示時は”上に画像、画像の下に紹介文”を実装することができました。

上記以外にも様々な方法があると思いますが、ご参考にしていただけると幸いです。