私は多数のサイトを運営しているのですが、その９割以上を右サイドバーのレイアウトで作成しています。一番の収益源となっているサイトについては何故か左サイドバーなのですが、それ以外はほとんどが右サイドバーです。
ここ数年の動向としてスマホからのアクセス数が多くなってきており、全ての既存サイトをレスポンシブウェブデザインでスマホ化しているのですが、やっかいなことに、左サイドバーの場合がどうにもうまくいきません。
左サイドバーにも２種類があり、HTMLソース上、「コンテンツ部分が上（最初）にくる形のもの」と「下にくる形」の２種類があります。これはCSSの方でfloatを調整すれば、どちらが上であっても左サイドバー化することができますが、コンテンツ部分が上の場合には、このfloatを解除するだけで難なくスマホに最適化できます。
けれども、問題はhtmlのソース上、左サイドバーの箇所が最初に出てきて、コンテンツ部分よりも上に来てしまっているケースがかなりの難問です。このままの状態でfloatを解除すると、当然、左サイドバー部分が先に表示されてしまいます。コンテンツ部分はずっとスクロールしてやっと出てくるという形になりますので、これではだめです。
つまり、スタイルシートのfloatを使って、左右を逆にすることはできますが、上下にひっくり返すことは不可能だということにやっと気づいたわけです。positionなども考えましたが、こちらも無理でした。左サイドバー非表示などという邪道な方法ももってのほかです。
■ボクの出した結論
- 左サイドバー（html上、コンテンツが上）→ CSSのみでスマホ対応可能
- 左サイドバー（html上、サイドバーが上）→ スマホ対応は不可能
なので、必ずhtmlソースの最初の部分にメインコンテンツを記述し、そのあとにサイドバー部分を記述する形にしないとスマホには最適化できないです。
結局、メインコンテンツが下に来ているサイトについては、htmlソースごと書き換える作業が必要になってしまい、うんざりしています。これがCMSの場合だと比較的簡単に修正できますが、手打ちホームページの場合はけっこうな手間が生じてしまいます。
つまり、ボクがいいたいことは、左サイドバーのテンプレート（htmlソース上も左サイドが上のテンプレート）をスマホに最適化するのは無理だから、とっととあきらめた方がよいということです。この方法を探し続けて６ヶ月ぐらいの時間を無駄にしましたが、なかったです。あったら、ぜひ教えて欲しいのですが、たぶん、ないはずです。
また、詳細には検証していませんが、右サイドバーであったとしても、htmlソース上、メインコンテンツの部分が下に来ているとレスポンシブウェブデザインでの対応は無理だと思われます。たぶん、右サイドバーの場合、わざわざサイドバーを上に持ってくる人はいないと思いますが、いずれにしても、コンテンツ部分はhtmlソース上、最初に出現するようなホームページの作り方を心がけるのが最良と思われます。