ウェブデザイナー募集 ホームページ作成HOME

ホームページ作成講座HAC Design

CSS テーブル

CSS テーブルのレイアウト

テーブルというのは元々表を書くときに使われていたHTMLタグです。

テーブルは本来ホームページ全体のレイアウトに使うものではありませんが、よくホームページのレイアウトに使用されています。ブログなどでは、全くテーブルはレイアウトに使われません。

更にブログの場合テーブルタグを挿入するとレイアウトが崩れることがよくあります。
ブログは<p>というタグで書かれた文章を囲ってくれるのが標準です。そのため、ブログの文章を書く場所に<p>タグを使うと、タグの間に<p>タグが挿入されてしまい表示がおかしくなるのです。

また少しでも凝ったテーブルを作ろうと思うとタグに多くの装飾を書いてしまうため、HTMLがスッキリ見えません。そのため、テーブルタグもCSSでレイアウトしてしまいます。

まずは今まで通りのHTMLでのテーブルの装飾を見てみましょう。

日にち 商品 値段
10/21 CSSのレイアウトのすべて ¥2500
10/22 CSSとデザインの効率化をアップする本 ¥1750

このテーブルをHTMLのソースで書くと下記のようになります。

見てお分かりのように、いちいち bordercolor="#9900FF" 等という装飾のためのタグが入っていますよね。そういうタグはCSSに組み込んでおいて、スッキリさせましょう!

下記はCSSでレイアウトしたテーブルです。

日にち 商品 値段
10/21 CSSのレイアウトのすべて ¥2500
10/22 CSSとデザインの効率化をアップする本 ¥1750

見た目は全く一緒ですよね?でもタグを見てみるとこんなにスッキリしています。
装飾タグを全部CSSで指定することによってHTMLソースはとてもシンプルになりました。

<table>
<tr>
<th width="17%">日にち</th>
<th width="54%">商品</th>
<th width="29%">値段</th>
</tr>
<tr>
<td>10/21</td>
<td>CSSのレイアウトのすべて</td>
<td>¥2500</td>
</tr>
<tr>
<td>10/22</td>
<td>CSSとデザインの効率化をアップする本</td>
<td>¥1750</td>
</tr>
</table>

このテーブルタグにはHTMLで記載したときのタグをCSSに組み込んだだけです。
要は<table> <tr> <th> <td> タグにCSSでそれぞれ装飾の指定を入れたのです。

その装飾

CSSでフォントを指定する

フォントは、いくつもの書体があります。見出しにはゴシック体、本文には明朝体など、フォントの種類をかえることによって、文字による印象を変えることが可能です。

それは font-family としてCSSで指定できます。


タイトル名や見出しタグなど、使い分けてみるのもいいですね。

CSSでフォントの指定を変更するのは簡単なイメージチェンジにもなります。

いろいろなフォントの色、書体、サイズを変更してみばわかりますが、
フォントだけでホームページをより読みやすく、よりインパクトを与えることも可能です。

是非フォントを使い分けれるようになってください!


CSSの基礎知識
CSS・スタイルシートとは
ブログのCSS
CSSでレイアウト 書き方編
CSSでレイアウト 実践編
CSSポイントレイアウト
CSS フォント
CSS テーブル
CSS ロールオーバー
CSS 背景
CSS margin
CSS float
あると便利!
CSS エディター
FireFoxとCSS
CSSのお勧め書籍
リファレンスHOME
ウェブサイトHOME