レスポンシブ対応で右カラムのコンテンツを上に表示させる方法
2024/01/16
レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTMLを上から書いていくと最初に左カラム部分の作成し、次に右カラム部分を書くことになる。ただ、スマホで閲覧した際に右カラム部分を上部に、左カラム部分を下部に表示させたかった。以下に方法をメモ。
HTML部分
<div class="container"> <div class="right"> right </div> <div class="left"> left </div> </div>
CSS
.container{ display: flex; max-width: 100%; } .left{ width: 50%; height: 500px; background-color: #555; order: 1; } .right{ width: 50%; height: 500px; background-color: #f00; order: 2; } @media screen and (max-width: 700px) { .container{ display: inline-block; width: 100%; max-width: 100%; } .left{ width: 100%; max-width: 100%; } .right{ width: 100%; max-width: 100%; } }
HTMLのソースコードを見る限りだと.rightが左にきそうだが、CSSのorderプロパティを指定することで順序を決められる。ディスプレイ横幅が700px以下になるとそれが解除され、HTMLのソースコード通り.rightが上に来る。
関連記事
-
-
セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法
セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...
-
-
Bootstrapよりも簡単でClassを付与する必要のないCSSフレームワーク「Simple.css」の利用方法
何らかのテストページを提出する際、見た目を整えるためBootstrapを使用した ...
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...
-
-
Flash上にHTMLのテキストやリンク(aタグ)を重ねる方法
FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSか ...
-
-
jQuery無しで要素にアニメーション効果を設定する方法(animate.css)
あるサイトをWappalyzerで調査していた際に「animate.css」とい ...