勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

レスポンシブ対応で右カラムのコンテンツを上に表示させる方法

   2024/01/16  CSS

レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずに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が上に来る。

 - CSS

  関連記事

セレクトメニュー(プルダウン)を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」とい ...