メインコンテンツの指定
続いて、メインコンテンツ部分（#contents）のCSSを記述します。コンテンツを画面幅いっぱいに表示すると、文字が画面ギリギリにまで配置されて見づらく、iPhoneなどのスマートフォンではスクロールバーが文字の上に重なってしまいます。
画面幅100％では、モバイル端末の場合、コンテンツの上にスクロールバーが表示される
折り返し部分にリンク文字が重なると誤操作にもつながりますので、コンテンツの横幅を90％（width:90％）に指定して画面の左右に余白を作りましょう。
#contents {
width : 90%;
margin : 0 auto}
左右に余白ができてスクロールバーが重ならなくなった
本文と見出し、画像の間に適切な余白を持たせるため、#contentsのp要素とimg要素に対してmargin-bottom：24pxを指定します。見出しなどの要素をセンター揃えにするため#contentsにはtext-align:centerを、p要素にはtext-aligh:left を指定します。仕上げに、img要素にCSS3のbox-shadowプロパティで影を付けて見栄えを整えたのがサンプル3です。
■サンプル3[CSS:style.css]
#contents {
width : 90%;
margin : 0 auto;
text-align : center}
#contents p {
margin-bottom : 24px;
text-align : left}
#contents img {
margin-bottom : 24px;
box-shadow : 0 0 12px #000}
見やすく読みやすいコンテンツ領域ができ、320px用のCSSはだいぶ完成に近づいてきました。
コンテンツ領域のスタイリングが完成したところ
