勉強したことのメモ

webプログラマが勉強したことのメモ。

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

   

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

  関連記事

ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...

firebugでCSSパスをコピー

要素を調査⇒右クリック⇒CSSパスをコピーできる。 jQueryでのセレクタ指定 ...

CSSでプロパティの初期化

CSSでmedia screen and等を指定し、特定の場合のみプロパティの無 ...

スマホ用の有料デザインテンプレが9月内は無料でもらえた

envatomarketでスマホ用の有料デザインテンプレートが2014年9月内に ...

CSSでマウスカーソルの変更

マウスカーソルはCSSで任意に決められるみたい。 リンク時に一律させた方がよいと ...

Flash上にHTMLの文字やリンクを重ねる方法

FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSか ...

ガラケー(特にdocomo)でのCSS

PCサイトだとIEでつまずくことが多いけど、 ガラケーはdocomoが難儀やよ、 ...

CSSで一つの要素に対して複数の背景色を指定する方法

divの要素に対して複数の背景色をつけたかった。background-color ...

CSSでセンターリング

<center></center>でセンターリングが出来 ...

IE11でSB Admin2のログインページの表示がおかしい

ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...