スマートフォン向けテーブルのスタイリング

「会社概要」ページ（profile ）で使用しているテーブルについても、スマートフォン向けに横幅などのスタイルを変えてやる必要がありそうです。
スマートフォン向けのテーブルのスタイリングを、新しいCSSファイルにまとめて指定することにします。

テキストエディタを起動して、ファイルを新規作成してください。
文字コードをUTF-8、拡張子を.cssにして、名前を付けて保存します。ファイル名はtable_sp.cssとしてください。

作成したCSSファイルtable_sp.cssを以下の内容にしてください。

CSSソース（table_sp.css）

@charset "utf-8";

/*============================================
テーブル
============================================*/
table.profile {
	width:100%;			/*テーブル全体の幅*/
	border-collapse:collapse;		/*セル同士の間に隙間を空けない*/
}
table.profile th {
	width:100px;			/*見出しセルの幅*/
	padding:5px;			/*パディング*/
	text-align:center;			/*センター揃えにする*/
	background-color:#ccccee;		/*セルの背景色*/
	border-bottom:dotted #666666 1px;	/*セルのボーダー*/
}
table.profile td {
	padding:5px;			/*パディング*/
	background-color:#eeeeff;		/*セルの背景色*/
	border-bottom:dotted #666666 1px;	/*セルのボーダー*/
}

記述できたらtable_sp.cssを保存してください。
まだ、profile からスマートフォン向けCSSファイルの読み込みを指定していないので、
この時点で「会社概要」ページ（profile ）をブラウザで開いても特に変化はありません。

上記のCSSソースで使用されているスタイル指定のひとつひとつは、これまでに学んだものばかりです。簡単に確認しておきましょう。

テーブルの横幅を100パーセントにする

テーブルの横幅を100パーセントにして、スマートフォンの狭い画面を最大限に利用できるようにしています。あとはpaddingで余白を調整しています。

まとめ

テーブルについても、スマートフォン向けに横幅などのスタイルを指定する
テーブルの横幅を100パーセントにして、スマートフォンの狭い画面を最大限に利用できるようにする
テーブルセルのpaddingプロパティの値をパソコン向けよりも少なめにして、バランスを調整する

<前へ

目次へ

次へ>

★スマートフォン向けテーブルのスタイリング