css サイドバー左右を簡単に切り替える

ブログなどの2ペインレイアウトで、サイドバーを左右どちらに配置するかをcssで簡単に切り替える。

事例:実際の要素は [サイドバー] → [コンテンツ] の順に読み込まれる。また、サイドバーは [300px] コンテンツ部分は可変、サイドバーとコンテンツ部分の間には [40px] の余白を設定する。

<div id="side">
   .
   .
   .
</div>

<div id="content">
   .
   .
   .
</div>

左サイドバーの場合

left.gif

#side {
	float: left;
	margin-left: 0; /* 左サイドバー */
	width: 300px;
}
#content {
	float: left;
	margin-left: 40px; /* 左サイドバー */
	width: calc(100% - 340px);
}

右サイドバーの場合

right.gif

#side {
	float: left;
	margin-left: calc(100% - 300px); /* 右サイドバー */
	width: 300px;
}
#content {
	float: left;
	margin-left: -100%; /* 右サイドバー */
	width: calc(100% - 340px);
}

もし、実際の要素が [コンテンツ] → [サイドバー] の順に読み込まれる場合は、上記のcssを逆に考えればよい。

なお、要素の読み込み順番は、待ち合わせ処理 (例えばSNSなどの外部サイトへのアクセス) が長い方が後になるようにしたほうがよいだろう。

admin
カテゴリ:資料
タグ:CSS
2017/09/09 19:37 | コメント (0)
◎この記事へのコメントは 0 件です。コメント欄を表示しますか?
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
プロフィール
カテゴリ
ブログ内検索
Powered by さくらのブログ