HTML5に書き換えてみた
8.スマホ対応画面デザイン


ここまでの段階では、パソコン画面がスマホに映し出されるだけでページの横幅はスマホ画面に収っておらず、ページを隅々まで見るには画面を左右にスクロールしなくてはなりません。

この後は、スマホ対応、すなわちスマホで見やすいページにする第一ステップとしてスマホの横幅にページが全て収まる様に書き換えて行きます。

 

div.container、header、navとheader用画像の横幅の設定

現在のスマホ画面は下の様になっています。

パソコン画面

まず、HTML文書中のheader用画像の横幅widthを設定していますが、この画像width設定を削除します。

次にcss文書中でdiv.container、header、navの横幅widthを設定していますがこれらを全て100%と書き換えます。

さらに、header内imgを要素として追加し、横幅widthを100%に設定します。この要素追加はスマホ用cssのみでは無く、PC用cssでも行います。

ここまでのcss文書の書き換えは下の通りです。

    PC用css

書き換え前のCSS文書

    スマホ用css

書き換え後のCSS文書

この書き換えの結果、スマホ画面は下の様に変わりました。

パソコン画面

 

asideの取扱い

現在のHTML文書では、aside→mainの順で記述しています。この場合、ページをスマホで表示させるとmainより先にasideが表示されますので、「本題後回し」のページになってしまいます。

スマホで表示する場合にはaside部はページの後半に表示させたいので、HTML文書中の順番をmain→asideに入れ替えます。

ここまでHTML文書の準備をした後に、PC用のcss文書を書き換えます。スマホ用cssは今回は書き換えません。

下にPC用css文書とスマホ用css文書を並べます。 clear:bothをPC用ではmainで効かせ、スマホ用ではasideで利かせています。 又、PC用ではmain、asideともにfloat:rightとし、スマホ用ではmain、asideともにfloat:leftとしています。

    PC用css

書き換え前のCSS文書

    スマホ用css

書き換え後のCSS文書

この書き換えの結果、PC画面では今まで通りの表示、スマホ画面ではmainの下にasideが来る様になりました。

 

各ブロック(セクション)の横幅設定

HTML文書を見ると、使用している画像は、otasuke1、otasuke2、otasuke3の3種類のclass属性を持つもの、width属性でpx単位の幅設定しているもの、幅指定していないものと、いろいろ有ります。

これらの画像の内otasuke1、otasuke2、otasuke3のclass属性を持つものは、スマホ用css文書内で幅指定100%にし、PC用css文書内では、それぞれ幅指定640px、300px、なし、指定します。 尚、HTML文書内での幅設定は削除します。

    PC用css

書き換え前のCSS文書

    スマホ用css

書き換え後のCSS文書

画像の幅指定書き換えと平行して、header、nav以外のブロックaside、aside div、main、main section、の幅もスマホ用css文書内で100%に書きかえます。

ここまでで、ページの幅方向はスマホ画面に収まり、ドラッグしなくても記事が読める様になりました。

ページトップ

前ページ←

→次ページ

コーナー