トップページ  > ウェブ制作チュートリアル  > スマホ向けCSSファイル
第24章 スマホサイト向けスタイル

★スマホ向けCSSファイル

スマホ向けCSSファイル

前回までに、パソコンで閲覧した場合とスマートフォンのような小さな画面で閲覧した場合とで、適用するスタイルを振り分けられるようになりました。 今回は、スマートフォン向けのスタイルを指定しましょう。

いまのところ、スマートフォン向けのCSSファイルbase_sp.cssには、h1 {background-color:red;}というスタイルが記述されています。 このh1要素の背景を赤くするスタイルは表示テスト用なので削除します。

base_sp.cssを以下の内容に書き換えてください。

CSSソース(base_sp.css)

@charset "utf-8";

/*============================================
全般的なスタイル
============================================*/
body {
	width:100%;			/*ページ全体の横幅*/
	background-color:#ffffff;	/*ページ全体の背景色*/
	background-image:none;		/*ウェブページ全体の背景画像を無しにする*/
	font-size:100%;			/* フォントサイズを100%にする */
}
div#pagebody {
	width:100%; margin:0 auto;	/*内容全体をセンタリング*/
	background-image:none;		/*コンテンツ全体の背景画像を無しにする*/
	background-repeat:no-repeat;	/*背景画像を繰り返さない*/
}

/*============================================
ヘッダ
============================================*/
div#header {
	height:46px;			/*ヘッダ部分の高さ*/
}
div#header h1 {
	padding:0px;			/*見出しの位置調整*/
}
div#header img {
	width:320px; height:46px;	/*会社ロゴ画像の幅と高さ*/
}

/*============================================
メインメニュー
============================================*/
ul#menu {
	width:100%; 			/*メインメニュー部分の幅*/
	margin:0px; 			/*マージン0px*/
}
#menu li a {
	background-color:#ffffff;	/*背景色*/
	color:blue;			/*文字色*/
	width:90px; height:45px;	/*幅と高さ*/
	padding:15px 0px 0px 60px;	/*パディング*/
	background-image:url(images/icon_menu.png);	/*背景画像を指定*/
	background-repeat:no-repeat; 	/*背景画像を繰り返さない*/
	font-size:120%;			/*文字サイズを120%にする*/
}
#menu li a:hover {
	background-color:#ffffff; 	/*リンクにマウスが乗っても背景色は白のまま*/
	background-image:url(images/icon_menu.png); /*リンクにマウスが乗っても同じ背景画像のまま*/
}

/*============================================
ヘッダ画像
============================================*/
#img_index {
	display:none;			/*トップページのヘッダ画像を非表示にする*/
}
#img_subpage {
	display:none;			/*トップページ以外のヘッダ画像を非表示にする*/
}

/*============================================
サブメニュー
============================================*/
h2 {
	width:100%; height:40px;	/*幅と高さ*/
	padding:15px 0px 0px 10px;	/*パディング*/
	font-size:16px;			/*フォントサイズ*/
	background-image:none;		/*背景画像を無しにする*/
	background-repeat:no-repeat;	/*背景画像を繰り返さない*/
	background-color:#000033;	/*背景色*/
	color:#ffffff;			/*文字色*/
	clear:both;			/*フロートをクリアする*/
}
div#submenu {
	width:100%;			/*幅の指定*/
	margin:0px;			/*マージン*/
	float:none;			/*フロートしない*/
}
div#submenu ul li a {
	display:block;			/*リンク部分をブロック表示にする*/
	width:100%; height:40px;	/*幅と高さ*/
	padding:15px 0px 0px 10px;	/*パディング*/
	text-decoration:none;		/*リンクの下線を無くす*/
	border-bottom:1px dotted gray;	/*リンク領域の下部にボーダーを付ける*/
	background-image:none;		/*リンク領域に背景画像を無しにする*/
	background-repeat:no-repeat;	/*背景画像を繰り返さない*/
	background-color:#cccccc;	/*背景色*/
	color:#000000;			/*文字色*/
}

/*============================================
インフォメーション
============================================*/
div#info {
	width:100%;			/*幅の指定*/
	float:none;			/*フロートしない*/
	padding:0px;			/*パディング*/
}
h3 {
	font-size:14px;			/*文字サイズ*/
	width:100%;			/*幅の指定*/
	margin:10px 0px 0px 0px;	/*マージン*/
	padding:10px 0px 10px 10px;	/*パディング*/
	background-color:#003399;	/*背景色*/
	color:#ffffff;			/*文字色*/
	border-radius:0px;		/*角丸にしない*/
}
p {
	width:95%;			/*幅の指定*/
	margin:10px;			/*マージン*/
	text-indent:1em;		/*インデント幅*/
}
.infoimg_index {
	display:block;			/*ブロック表示にする*/
	width:300px; height:225px;	/*画像の表示サイズを指定*/
	margin:0px 0px 20px 0px;	/*マージン*/
	float:none;			/*フロートしない*/
}
.infoimg_subpage {
	display:block;			/*ブロック表示にする*/
	width:300px; height:225px;	/*画像の表示サイズを指定*/
	margin:0px 0px 20px 0px;	/*マージン*/
	float:none;			/*フロートしない*/
}
.infoimg_tel {
	display:block;			/*ブロック表示にする*/
	width:300px; height:60px;	/*画像の表示サイズを指定*/
	margin:0px 0px 20px 0px;	/*マージン*/
}
hr {
	clear:both;			/*フロート配置をクリアする*/
	width:100%;			/*幅の指定*/
	margin:10px 0px;		/*マージン*/
	border:1px dotted #cccccc;	/*内容の区切りをグレーの点線表示にする*/
}

上記のCSSソースでは、メインメニュー部分に画像ファイルicon_menu.pngを使用しているので、 ダウンロードしたサンプルファイルからicon_menu.png をコピーしてimagesフォルダの中に追加してください。

画像ファイル:icon_menu.png

base_sp.cssの変更を保存したらブラウザで開いて確認してみましょう。 ブラウザのウィンドウをリサイズして、横幅が800ピクセル以下になった場合にスタイルが切り替われば成功です。

横幅801以上の場合
横幅800以下の場合

スマートフォンでは以下のような表示となります。

スマートフォン 縦位置
スマートフォン 横位置

今回追加したCSSソースを確認

上記のCSSソースで使用されているスタイル指定のひとつひとつは、これまでに学んだものばかりです。 なぜ、スマートフォンではこのようなCSSソースが適しているのか、確認していきましょう。

縦方向のスクロールのみで閲覧できるようにする

パソコン向けサイトでは、広い画面を効率的に使えるように、floatプロパティで段組みレイアウトにしていました。 スマートフォン向けサイトでは、この段組みに関するスタイルをリセットして、すべて縦方向にスクロールするだけで閲覧できるようにしています。

横幅を100パーセントにして画面全体を使う

横幅を100パーセントにして、スマートフォンの狭い画面を最大限に利用できるようにしています。 ただし、画像については、スマートフォンを縦や横に回転させたときに表示サイズが変わると閲覧しづらいと考えて、横幅を300ピクセルで固定しています。

あくまで一例に過ぎない

上記のCSSソースは、あくまでもスマートフォン向けスタイリングの可能性のひとつに過ぎません。 今後ウェブサイトを作成する際には、スマートフォンではどんな表示にすれば見やすくなるか検討して、よりよいスタイリングを目指してください。

ここまでで、トップページ(index.html)のスマートフォン対応が完成しました。

まとめ
  1. スマートフォン向けのスタイルでは段組みをやめて、縦方向のスクロールだけで閲覧できるようにする
  2. 横幅を100パーセントにして、スマートフォンの狭い画面を最大限に利用できるようにする
  3. ただし、これらはあくまでもスマートフォン向けのスタイルの可能性のひとつに過ぎない
<前へ 目次へ 次へ>
▲ページ先頭へ
トップページ  > ウェブ制作チュートリアル  > スマホ向けCSSファイル
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ