売上UPの情報サイト

サイドバーを右左反対にする

CSSには予め、左右反対のバージョンを用意しております。

style.css

	/*--------------------------------
	PCのレイアウト(右サイドバー)
	---------------------------------*/

	#contentInner {
		float: left;
		width: 100%;
		margin-right: -300px;
	}

	main {
		margin-right: 320px;
		margin-left: 0px;
		background-color: #fff;
		border-radius: 4px;
		padding: 0px 10px 20px 0px;
	}

	#side aside {
		float: right;
		width: 300px;
		padding: 0px;
	}

	/*--------------------------------
	PCのレイアウト(左サイドバー)
	
	#contentInner {
		float: right;
		width: 100%;
		margin-left: -280px;
	}

	main {
		margin-right: 0px;
		margin-left: 300px;
		background-color: #fff;
		border-radius: 4px;
		padding: 0px 0px 20px 10px;
	}

	#side aside {
		float: left;
		width: 280px;
		padding: 0px;
	}

	---------------------------------*/

上記の部分を

	/*--------------------------------
	PCのレイアウト(左サイドバー)
	---------------------------------*/
	#contentInner {
		float: right;
		width: 100%;
		margin-left: -280px;
	}

	main {
		margin-right: 0px;
		margin-left: 300px;
		background-color: #fff;
		border-radius: 4px;
		padding: 0px 0px 20px 10px;
	}

	#side aside {
		float: left;
		width: 280px;
		padding: 0px;
	}

とするだけでサイドバーが反対になります。

※左サイドバーにした場合、見栄えの調整で幅が300px→280pxに変更になります。

 

人気記事

1

ホームページを今まで沢山作ってきましたが、リニューアル案件以外の方はやはり「予算重視」である場合が多く、こちらの言う「大切」な事とか「重要な事」なんていう意見は「わかっているけど・・・」とはいうものの ...

2

今回はまず、ベースとなる「ホームページのタイトル」の考え方と下層ページコンテンツに何を作るべきかを考えていきます。 「タイトル設定」はまず最初に行うべき事であり、またホームページの命運を分ける最重要項 ...

投稿日:

Copyright© 会社のミカタ , 2018 All Rights Reserved Powered by AFFINGER5.