9.スマホ画面の部品デザイン


個々の部品の変更の前に背景の書き換えをします。

PC用の画面では、画面全体bodyの背景を桜模様で、幅940pxのcontainerの背景を緑色、mainの背景を白色、mainの中の各sectionを桃色にしています。 スマホ対応にあたっても、緑色をbodyの背景色にし、その中のブロックの背景色は無し(透明)に、記事の部分(section)の背景色を白色にします。 又、sectionの縁取りをしていましたが、これは無しにします。

次に、画像の余白(marginとpadding)を統一します。css文書中で上下10px、左右autoに設定します。 ただし、img.otasuke2の画像は2枚横並びを前提にしているので幅を49%とし、marginを上3px左2px下12px右1pxとします。

パソコン画面

ここで、sectionの幅はすでに100%に設定してあったのですが画面左右にアクセントが欲しいので幅99%にします。又、section上下のmarginは5pxづつに狭めました。

ここまでの書き直しで画面は下の様になっています。

パソコン画面

 

main内文字列の書式設定と「戻る」ボタン新設

スマホ用css文書内で、p.planの左右のmarginを40pxから10pxへ書きかえます。

同じくスマホ用文書内で、見出しh2に背景色を付けるなどの書き換えを行います。

    PC用css                  スマホ用css

書き換え前のCSS文書 書き換え後のCSS文書

さて、ページ上には使い勝手を上げる為に、各sectionの末尾に「ページトップへ」のリンク表示を設けています。PCで見ると下の通りです。

パソコン画面

これをスマホで見ると、画面は下の様になっています。

スマホ画面

PCの場合はさておき、スマホの場合、切れてしまった下の余白を回復し、もう少しスマホ的なデザインのボタンにします。

まずHTML文書を書き換えます。下の赤線部が追加した2行です。上の赤線がスマホ用「戻る」ボタンの記述p.modoruで、下の赤線がボタンの下の余白用です。

HTML文書

次にPC用css文書内でp.modoruを非表示に、スマホ用css文書内でp.mekuriを非表示に設定します。非表示設定にはdisplay:noneを使います。

    PC用css                  スマホ用css

書き換え前のCSS文書 書き換え後のCSS文書

この後、スマホ用css文書を書き換え、リンク表示を文字列で、ボタン表示に変えます。 p.modoruでは文字列の幅と位置を指定し、新たにa.modoruでブロックとして扱う事を宣言したのちに色や形に関しての 指定を行います。

書き換え前のCSS文書

a.modoruの7行目padding設定では、ボタンの高さを設定している事になります。 8行目で背景色を指定した後、9~12行で境界線の書式を指定しています。 12行目のborder-radiusがHTML5から加わった角を丸める設定です。

css文書でこの様に設定したスマホ画面は、下の様になります。

書き換え後のCSS文書

 

nav部の書き換え

9つのグローバルナビゲーションボタンは、下の様に横に2つ並べ、これを縦5列の構成にしています。 しかしスマホでは横にボタンを並べると操作性が落ちる恐れがあるので、9つのボタンを縦に画面一杯に並べます。

書き換え前のスマホ画面

書きかえのポイントは、PC用css文書で180px指定であったボタンの幅を98%指定にする点、 40px指定だったボタンの高さを48pxと大きくする点です。

    PC用css                  スマホ用css

PC用のCSS文書 スマホ用のCSS文書

ここまででスマホ画面は下の様になります。

書き換え後のスマホ画面

ナビゲーションボタンの大きさ、配置、色合いは狙いのものになりました。

さて、9つのボタンが出来た訳ですが、スマホではマウスオーバーの表示が出来ないため「タップするボタンですよ」と言う表示が必要になります。

一般的にはタップをしてもらうための「マーク」を付けます。そのマークは矢印です。と言う事で、ボタンのデザインに手を加えて矢印マークを付けます。

作図の流れは、背景となる角が丸い四角形と、「>」形の矢印を作り、これらをブロック扱いしてボタン内での絶対位置で位置を決めます。

四角形はbefore疑似要素で表示、矢印はafter疑似要素で作ります。

下がcss文書に追加した部分です。まずは、絶対位置(0,0)で表示して見ました。

スマホ用CSS文書の追加部

結果は、下の通りです。

追加後のスマホ画面

角丸の四角形と矢印を構成する四角形の位置と色、大きさを調整して、下の様にcssを書き換えます。

スマホ用CSS文書の追加部

結果は、下の通りです。

追加後のスマホ画面

なお、バランスが悪かったヘッダーの画像も、スマホ用に別画像を作りclass属性で識別して、 PC用cssとスマホ用cssでdisplay:noneを使い表示、非表示を切り替えています。

 

ページ内リンク用リストの書き換え

現状は、下の通りです。

書き換え前のスマホ画面

現状のHTML文書を下に示します。これはまだ書き換えません。

書き換え前のHTML文書

現状のCSS文書は下の通りです。

書き換え前のCSS文書

書き換え後のCSS文書です。グローバルナビゲーションnav ulとほとんど同じ記述ですが、色合い、ボタンの幅と角を変えています。

書き換え後のCSS文書

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

書き換え後のスマホ画面

 

ページヘッダー(ページタイトル)からページ先端への「戻り」ボタン新設

HTML文書を以下の様に書き換えます。

・header要素にid属性で名前を付ける。(ttlとした)

・main内のh1要素とul要素の間にp要素p.modoruh1を新たに下の様に挿入する。

HTML文書への追加

PC用css文書に下の3行を追加します。

PC用CSS文書への追加

これでPC用画面の表示は何も影響を受けない事になります。

次にスマホ用CSS文書内で、mainのプロパティに下の赤線部を追加します。これによって、これから定義する「戻る」ボタン位置の基準がmainになります。 又、h1も色あいや高さ、文字揃えを変更する為に赤線部の様に書き換え、追加をします。

スマホ用CSS文書への追加

さらにスマホ用CSS文書内では、p.modoruh1とa.modoruh1を下の様に追加します。 既に作ってあるページ内リンクの「戻る」ボタンと同様の記述内容ですが、ボタンの大きさ、色合いを変えています。

スマホ用CSS文書への追加

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

書き換え後のスマホ画面

 

aside部の書き換え

現在のaside部のスマホ画面は下の通りです。

書き換え前のスマホ画面

該当のcss文書中の該当部は下の様になっています。(疑似要素:hoverの記述はスマホでは不要なので既に削除してあります。

書き換え前のスマホ用CSS文書

HTML文書中のasideの部分は下の様になっています。

書き換え前のHTML文書

これを下の様に書き換えます。絵入りのボタンを作る為にimgタグで画像を追加しまし、 class属性で名前をotasuke4と付けました。メール用のボタンも追加します。

書き換え後のHTML文書

該当のcss文書中の該当部は下の様になっています。(疑似要素:hoverの記述はスマホでは不要なので既に削除してあります。

書き換え前のスマホ用CSS文書

まず、PC用の画面ではこれらのotasuke4の画像は表示させないので、PC用CSS文書中にimg.otasuke4を追加し、 プロパティをdisplay:noneとしました。(文書の画像は割愛)

次に、スマホ用CSS文書中では、aside、aside div、aside div a を全面的に書き換えるとともに、 ボタン表示矢印を表示させる為にnavで作った疑似要素::before、::afterと同様の物を追加し、 img.otasuke4も追加しました。

書き換え後のスマホ用CSS文書

できあがったスマホ画面は下の通りです。まだ問題が有り、グローバルナビでページを移動させる時にPCでもスマホでもページの先頭に飛んで行ってしまいます。 PCの場合はこれで良いのですが、スマホでは困ります。

書き換え後スマホ画面

ページトップへ

←前ページへ               目次へ戻る               →次ページへ

コーナー