CSSには予め、左右反対のバージョンを用意しております。
style.css
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
/*-------------------------------- 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; } ---------------------------------*/ |
上記の部分を
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/*-------------------------------- 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に変更になります。
