他の新着情報はこちらから
« ホームページ制作便利CSS【背景画像をレスポンシブにする】 | Googleアナリティクスのセッション数とユーザー数の違いを簡単に »
新着情報
ホームページ制作ツール〜CSS【スマホとPCで表示順を変えたい】
ホームページ制作をする時、パソコンでもスマホでもホームページが見やすいようにレスポンシブで作っています。
画面サイズが変わる事でレイアウトが変わる事を「ブレイクポイント」と呼びます。
なんだかサーフィンする時の波が崩れる時のポイントみたいな名前ですねー。
恥ずかしながら、20代まではボディーボードが趣味で海によく通っていた事を思い出します。(下手でしたけど)
あんな大きいボードを担いで小田急線によく一人で乗れてたな、なんて懐かしい思い出話は置いといて。。。
パソコンで左右で並んだ内容をスマートフォンで見た時は前後に並ぶようにレイアウトするのですが、だいたいパソコンで左に配置したものがスマホでは上、パソコンで右に配置した内容がスマホでは下に並びます。
通常はブレイクするとそんなレイアウトになるのですが、パソコンでは右だけどスマホでは上に並べたい場合の方法を調べました。
いろいろ方法がありbootstrapの方法もありますがまだ勉強不足なので、今回は簡単なcssのみで行う方法です。
1 2 3 4 5 6 7 8 |
@media only screen and (max-width: 959px){ .break-box { display: flex; flex-direction: column; /* 縦並び */ } .box_l { order: 2; } /* 下(2番目)に配置 */ .box_r { order: 1; } /* 上(1番目)に配置 */ } |
横幅959pixをブレイクポイントにした場合です。
htmlはそのまま、変更なしです!
今回参考にさせていただいたサイトです!ありがとうございます。
CSS flexの簡単な書き方 BOX表示順を自由に変更しよう
新着情報一覧
ホームページ制作にまつわる便利な情報を長野より発信!
-
SVG保存とアートボードサイズ
-
ホームページアクセス解析レポート(うっかり忘れてしまう被リンクと直帰率の調べ方)
-
グーグル広告(クリック広告)のコンバージョン設定
-
【css】1段目を写真右、2段目を写真左でレイアウトしたい時(wordpress対応)
-
wordpress5.51にしたらMW WPからのメールがエラーになる件
-
wordpressで投稿、カスタム投稿、カテゴリ別に表示件数を変える
-
郵便番号から住所をフォームに自動入力するJS(wpじゃない時)
-
高さを指定しないで中央に