テーブル用のCSSファイルを作成する－ウェブ制作チュートリアル

トップページ > ウェブ制作チュートリアル > テーブル用のCSSファイルを作成する

第18章　テーブルのスタイリング

★テーブル用のCSSファイルを作成する

テーブル用のCSSファイルを作成する

ここまで、サンプルサイト制作ではCSSソースはすべてbase.cssに記述してきました。これからテーブルに関するスタイルを指定していくにあたって、テーブルスタイル専用のCSSファイルtable.cssを新規作成することにします。

テキストエディタを起動して、新規作成したファイルに以下の一行を記述してください。

CSSソース（table.css）

@charset "utf-8";

上記の一行は、このCSSファイルの文字コードがUTF-8であることを宣言しています。記述できたら、ファイルに名前を付けて保存してください。ファイル名はtable.css、文字コードはUTF-8にして保存します。

いま作成したtable.cssをprofile.htmlから読み込むように関連付けます。 profile.htmlに以下の記述を追加してください。

HTMLソース（profile.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="table.css">
<title>会社概要｜ウェブサンプル株式会社</title>
</head>
<body>
<div id="pagebody">

	<!-- ヘッダ -->
	<div id="header">
	<h1><a href="index.html"><img src="images/logo.png" alt="ウェブサンプル株式会社"></a></h1>
	</div>

	<!-- メインメニュー -->
	<ul id="menu">
	<li><a href="index.html">ホーム</a></li>
	<li><a href="product.html">製品紹介</a></li>
	<li><a href="profile.html">会社概要</a></li>
	<li><a href="contact.html">お問合せ</a></li>
	</ul>

	<!-- ヘッダ画像 -->
	<div id="img_subpage">
	<img src="./images/img_profile.png" alt="会社概要">
	</div>

	<!-- サブメニュー（左カラム） -->
	<div id="submenu">
		<h2>会社概要</h2>
		<ul>
			<li><a href="#info0001">企業情報</a></li>
			<li><a href="#info0002">沿革</a></li>
			<li><a href="#info0003">アクセス</a></li>
		</ul>
	</div>

	<!-- インフォメーション（右カラム） -->
	<div id="info">
		<h3 id="info0001">企業情報</h3>
		<table class="profile">
		<tr>
		<th>社名</th>
		<td>
		ウェブサンプル株式会社
		</td>
		</tr>
		<tr>
		<th>住所</th>
		<td>
		〒000-0000<br>
		東京都○○区○○○○○○<br>
		○○○○ビル<br>
		Tel：00-0000-0000（代表）　Fax：00-0000-0000
		</td>
		</tr>
		<tr>
		<th>代表者</th>
		<td>
		○○○ ○○
		</td>
		</tr>
		<tr>
		<th>資本金</th>
		<td>
		00,000,000円
		</td>
		</tr>
		<tr>
		<th>事業内容</th>
		<td>
		○○事業<br>
		○○事業<br>
		○○事業<br>
		○○事業
		</td>
		</tr>
		</table>
		<hr>
		
		<h3 id="info0002">沿革</h3>
		<table class="profile">
		<tr><th>0000年00月</th><td>会社設立</td></tr>
		<tr><th>0000年00月</th><td>○○事業を開始</td></tr>
		<tr><th>0000年00月</th><td>○○事業を開始</td></tr>
		<tr><th>0000年00月</th><td>○○事業を開始</td></tr>
		<tr><th>0000年00月</th><td>○○事業を開始</td></tr>
		</table>
		<hr>
	
		<h3 id="info0003">アクセス</h3>
		<p>
		<img src="images/profile0001.png" alt="アクセスのイメージ画像" class="infoimg_subpage">
		</p>
		<div class="remarks">
		<h4>交通機関</h4>
		地下鉄○○線<br>
		○○駅○番出口より徒歩○分
		</div>
		<div class="remarks">
		<h4>所在地</h4>
		〒000-0000<br>
		東京都○○区○○○○○○<br>
		○○○○ビル<br>
		Tel：00-0000-0000
		</div>
		<hr>
	</div>

	<!-- フッタ -->
	<div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div>

</div>
</body>
</html>

これでprofile.htmlからtable.cssが読み込まれるようになりました。

尚、 <link rel="stylesheet" href="table.css"> の一文は、index.htmlには追加する必要はありません。 index.htmlではtable要素を使用しておらず、テーブルに関するスタイル指定は必要ないからです。

CSSファイルを分ける理由

これまでは、ウェブページの背景色や文字サイズなどのスタイル指定をbase.cssにまとめて記述してきました。

今回、新たにテーブルスタイル専用のtable.cssというCSSファイルを作成しました。テーブルに関するスタイル指定についてもbase.cssに追加していっても良いのですが、ファイル管理などのメンテナンス性を考慮して別ファイルに分けています。

テーブルに関するスタイル指定table.cssは、table要素を使用しているウェブページだけで利用するものです。いま作成中の会社概要ページ（profile.html）ではtable要素を使用しているのでtable.cssが必要ですが、前に作成したトップページ（index.html）では、table要素を使用していないのでtable.cssは必要ありません。

このような場合、CSSファイルを分けてやると、ウェブページごとに必要なCSSファイルだけを読み込ませることが可能になります。

CSSファイルの振り分けをしてやることで、CSSソースの読み込みの無駄を減らすことができます。また、それぞれのCSSファイルの内容がシンプルになって見やすくなります。

ここまでで、会社概要ページのテーブル（表）にスタイルを指定する準備ができました。次回から、CSSでテーブルのスタイリングをしていきましょう。

まとめ

テーブルスタイル専用のCSSファイルを新規作成する
table要素を使用しているウェブページだけで利用するスタイルなので、別のCSSファイルにしたほうが管理しやすい
HTMLファイルからは、そのHTMLファイルで必要となるCSSファイルだけを読み込ませれば良い

<前へ

目次へ

次へ>