起業・法人に役立つ強い味方

法人のミカタ

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

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に変更になります。

 

Copyright© 法人のミカタ , 2019 All Rights Reserved.