当サイトはHTML5とCSS3を前提に作っていますので、古い基本的に古いブラウザーは切り捨てていますが、代わりに避けて通れないのがスマートフォン対応ですよね。
今やスマートフォン利用率がフィーチャーフォン（ガラケー）が上回っており、またちょっとした調べものくらいなら、わざわざPCを立ち上げずにスマホでという方も多いのではないでしょうか。

2015年度 携帯電話の利用実態調査（情報通信ネットワーク産業協会）

別の情報では、スマホの出荷数が減少してガラケーの出荷数が微増しているという話もありますが、スマホ自体がすでに十分に普及した事と、性能的にも不満の無いレベルで買い替え需要も少なかったという背景もあるのでしょうし、スマホの基本料金が高い事から、私自身少し前まではデータ通信はスマホに安いデータSIMとWiFiで利用し、電話だけガラケーでという使い方をしていましたので、そういうガラケー需要もあっての事ではないかと思います。

2014年度通期国内携帯電話端末出荷概況（MM総研）

しかも、Googleがスマホでの検索結果には、サイトがスマホ対応しているかどうかも加味するようになっているので、「ちょっとした調べものくらいならスマホで」という行動はますます無視できなくなっています。

検索結果をもっとモバイル フレンドリーに（Google ウェブマスター向け公式ブログ）

さて、一言にスマートフォン対応といっても方法はいくつかあります。
大きく分けると

1. PCページとスマートフォンページを完全に（URLごと）分けてしまう方法
2. 1で分けたページを、同じURLでアクセス元情報から振り分けて表示する方法
3. ページは1つで、相手の表示環境で表示方法（レイアウト）を変える方法

の3つになるでしょうか。
2の場合、例えばAndroidスマホでもブラウザーを標準ブラウザー（chrome）以外に変えている場合、PCページが表示されてしまったりする場合もあります。
（実際、Android版Firefoxで見るとPCページしか表示されないページがあるため、ユーザーエージェントを偽装してスマホページを表示させるプラグインがあったりします。）

さて…
実はここからが本題なのですが（前置きが長いよ）、当サイトでは3の方法、いわゆるレスポンシブデザインを使用しています。
PCでご覧の方は、試しにブラウザーの横幅を狭めてみていただくと、途中で表示が変わります。

このレスポンシブデザインも、Javascript（jQueryなど）を使用して変更するものや、上の例の2と3の間のような、ユーザーの環境を判定して適用するCSSそのものを差し替える方法もあるでしょう。
当サイトは、CSS3のMedia Queriesを使用して、画面サイズごとに表示を切り替えています。
スマホでもJavaScriptはOFFにできますが、スマホでCSS3に未対応というのは考えなくて良いでしょうし、これが一番安全な気がします。

Media Queriesって？

Media Queriesとは、

@media (max-width: 640px){
	.left_col ,
	.right_col {
		clear: both;
		width: 100%;
	}
}

などとCSSに記述する事で、上の例では画面横サイズが640px以下の場合は、left_col と right_col の float を解除して、横幅を画面幅に合わせて表示されます。
つまり、右に float していたボックスは、左ボックスの下に表示される訳です。
実際は、float をかけている場合は外側に wrapper とか親要素になるボックスを作って横幅を指定していたりすると思いますので、そちらにも width:100% を適用してやらないといけませんが。

既存のサイトに、これを加えるだけでも「なんちゃってスマホ対応」になりますが、出来るだけ最初からスマホ幅を意識したデザインのほうが、見た目の違和感が無くて済むでしょう。
このままだと、画像が画面幅を超えるサイズの場合、はみ出してしまいますよね。
なので、imgタグに max-width: 100% なんてのを入れても良いかと思います。（少し隙間が欲しい場合は96%とかでも）。
そうすれば、画面よりはみ出す画像は自動的に縮小表示されます。ああ、height: auto も忘れずに。

スマホを意識したサイズ設定って？

さて、一言にスマホの画面サイズを意識して設計しましょうと言っても、スマホによって画面サイズがバラバラで、一体どれに合わせれば良いか判らないという方も多いでしょう。
簡単に言ってしまえば「iPhoneに合わせれば良い」となります。
「なんで？　それに、iPhone6+とかデカいサイズものあるじゃないか！」とお思いかもしれません。
そうなんですが、「小さいほうに合わせれば良い」のです。
じゃあ、そのサイズはというと…

SCREEN SIZ.ES

上記サイトを開いてみてください。主要なスマホの画面サイズが一覧で表示されていますね。
そして、画面サイズは見事にバラバラです。
が、WIDTHをクリックして小さい順に並べると、iPhone (Original – 3GS)の320pxが一番小さい事がわかります。
ついでに、DEVICE-WIDTHの項目を見てみましょう。画面サイズはバラバラなのに、DEVICE-WIDTHは320pxな機種が多い事がわかります。そして、Media Queriesで適用されるサイズは、本当の画面サイズではなく、このDEVICE-WIDTHによって判定されているようです。

なので、320pxを意識したデザインをしていれば、隙間は空いてもはみ出す事は無いのがお解りいただけると思います。

さて、先ほどの例でなぜmax-widthが640pxなのかというと、この320pxが2つ並ぶかどうかなのです。
当サイトのPC版トップページや各コーナーのトップには、各コーナーの最新投稿が表示される正方形の枠が並んでいます。
これが、border や margin 、padding を含めて320pxで設計しています。
inline-block で並べているため、画面が小さくなると下へ落ちます。
そして、同じくPC版では右側にメニューが表示されています。これも320pxです。
つまり、トップページに並んでいる正方形（勝手にパネルコンテンツと呼んでいます）の1つと、右側のメニューが並ぶサイズ（＝ 640px）より小さい画面で見たときに、右側メニューを折りたたんで非表示にして、メニューを表示させるためのボタンを表示、左側のパネルコンテンツを画面いっぱいに広げて、縦に並ぶようにすれば良いのです。

@media (max-width: 640px){
	
	.side_menu {
		display: none;
	}
	
	.menu_botton {
		display: block;
	}
	
	.pannel {
		display: block;
		width: 100%;
	}
}

実際は、折り畳みや展開の要素を入れているので、もう少し複雑ですし、スマートフォンとPCの間の画面サイズ（タブレットやネットブックなど）も考慮して、320pxが3つ並ぶサイズ（960px）以下だとパネルのサイズを解除して縦並びにして、320pxが2つ並ぶサイズ（640px）以下だと、メニューを折りたたむという2段階の設定にしていますが、大まかにはこんな感じです。
トップページや各コーナートップ以外の、コンテンツ部分がパネルではなくシングル要素のページは、元々 width: auto で作っているので、切り替える必要はありませんし。
後は、img や input タグなど、場合によっては画面からはみ出る可能性があるものに、max-widthを入れてやるとか、細かい調整をしてやれば、スマホ対応ページの出来上がり。

作るまでは、いろいろ調べたり試行錯誤したりして大変ですが、解ってしまえばそう難しいものでもありません。
そうそう、説明は省略しますが、スマホ対応ページのHTMLには、headの中に

<meta name=”viewport” content=”width=device-width”>

の一行を追加するのを忘れずに。まあ、おまじないのようなもんです。（違うけど）

サイドメニューの折り畳み・展開の方法なんかは次の機会に…。