東京・大阪・名古屋・福岡・仙台・札幌で開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

7.4 テーブル・セルのサイズを指定する

テーブル・セルのサイズを指定する

7.4 テーブル・セルのサイズを指定する

テーブルやセルのサイズは、自由に指定することができます。サイズの指定は、ピクセル数で指定する方法と画面に対する比率で指定する方法の2通りがあります。

1. テーブルのサイズをピクセル数で指定する

<table>タグにwidth属性(幅)を追加してピクセル数を指定すると、テーブルのサイズを指定することができます。

早速、幅400ピクセルのテーブルを作成してみます。

新しくテキストエディタを開いて、[table4_1.html]と[table4_1.css]いう名前で[ch07]フォルダに保存してください。保存ができたら、[table4_1.html]と[table4_1.css]に以下のソースコードを記述してください。

①ソース・フォルダー :webpage/ch07
②ファイル名     :table4_1.html, table4_1.css

➢ table4_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="table4_1.css">
<title>テーブルのサイズ</title>
</head>
<body>
<table>
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>
</body>
</html>
        

➢ table4_1.css

@charset "UTF-8";

table {
    border: 1px solid gray;
    width: 400px;
    height: 100px;
}
td {
    border: 1px solid gray;
}
        

ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示を確認してください。

図 7.4.1

幅400ピクセル、高さ100ピクセルのテーブルができました。このようにピクセル数を指定して、テーブルのサイズを指定することができます。

2. テーブルのサイズを比率指定する

テーブルのサイズは、パーセントで指定することも可能です。widthプロパティやheightプロパティにパーセントを指定すると、表示画面(ブラウザ画面)に対する指定比率で表示されます。

では、表示されるブラウザ画面に対して、幅70%、高さ80%のサイズのテーブルを作成します。

新しくテキストエディタを開いて、[table4_2.html]と[table4_2.css]いう名前で[ch07]フォルダに保存してください。保存ができたら、[table4_2.html]と[table4_2.css]に以下のソースコードを記述してください。

①ソース・フォルダー :webpage/ch07
②ファイル名     :table4_2.html, table4_2.css

➢ table4_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="table4_2.css">
<title>テーブルのサイズ</title>
</head>
<body>
<table>
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>
</body>
</html>
        

➢ table4_2.css

@charset "UTF-8";

html,body{
  height: 100%;
}

table {
    border: 1px solid gray;
    width: 70%;
    height: 80%;
}
td {
    border: 1px solid gray;
}
        

ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示を確認してください。

図 7.4.2

テーブルサイズの比率指定(%)では、ブラウザ画面に対して指定した比率で表示されますが、ブラウザによっては、横幅は比率通りに表示されても、高さは指定通りに表示されないことがありますので、注意してください。

3. セルのサイズをピクセル数で指定をする

テーブルだけでなく、セルの幅や高さもテーブルと同じように指定することができます。<td>タグにwidthプロパティ・heightプロパティを追加して、ピクセル数を指定し、セルのサイズを指定していきましょう。

新しくテキストエディタを開いて、[table4_3.html]と[table4_3.css]いう名前で[ch07]フォルダに保存してください。保存ができたら、[table4_3.html]と[table4_3.css]に以下のソースコードを記述してください。

①ソース・フォルダー :webpage/ch07
②ファイル名     :table4_3.html、table4_3.css

➢ table4_3.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="table4_3.css">
<title>セルのサイズ</title>
</head>
<body>
<table>
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>
</body>
</html>
        

➢ table4_3.css

@charset "UTF-8";

table {
    border: 1px solid gray; 
}
td {
    border: 1px solid gray;
    width: 200px;
    height: 100px;
}
        

ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示を確認してください。

図 7.4.3

A1のセルが、指定されたピクセル数で設定されました。A1のセル以外のセルの大きさは、行や列の中で最大のセルに合わせて設定されますので、サイズの設定されていないA2のセルの縦幅やB1のセルの横幅のサイズも自動調整されました。

4. セルのサイズを比率指定する

続いて、セルのサイズをパーセントで指定してみましょう。<td>タグのwidthプロパティ・heightプロパティにパーセントを指定すると、テーブルに対する指定比率で表示されます。

新しくテキストエディタを開いて、[table4_4.html]と[table4_4.css]いう名前で[ch07]フォルダに保存してください。保存ができたら、[table4_4.html]と[table4_4.css]に以下のソースコードを記述してください。

①ソース・フォルダー :webpage/ch07
②ファイル名     :table4_4.html、table4_4.css

➢ table4_4.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="table4_4.css">
<title>セルのサイズ</title>
</head>
<body>
<table>
<tr>
<td class="td-first">A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>
</body>
</html>
        

➢ table4_4.css

➢ table4_4.css
@charset "UTF-8";

table {
    border: 1px solid gray;
    width: 400px;
    height: 200px;
}
td {
    border: 1px solid gray;
}
td.td-first {
    width: 70%;
    height: 60%;
}
        

ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示を確認してください。

図 7.4.4

A1のセルが、指定されたピクセル数で設定されました。セルのあるテーブルに対して、幅70%、高さ60%のサイズになっています。

A1のセル以外のセルの大きさは、行や列の中で最大のセルに合わせて設定されますので、サイズの設定されていないA2のセルの高さや
B1のセルの幅のサイズも自動調整されました。

◉border-collapseプロパティ
border-collapse
はテーブルのスタイルに固有のプロパティです。<th>、<td>のセルごとにボーダーを引くか、隣り合うボーダーを1本にまとめるか、どちらかを決めるプロパティです。値は collapseseparateで、このプロパティを指定しない場合は、デフォルトでseparateが適用されます。collapseにすると、隣り合うボーダーは1本にまとまります。

◉Google Chromeデベロッパーツール

HTMLとCSSのコーディングが完了したあとで、「意図したスタイルが反映されていない」という不具合を修正することや、「やっぱりフォントサイズをもう少し大きくしたい」、「下の余白をもっと小さくしたい」などのレイアウト修正を行うことはよくあります。そのようなとき、Google
Chromeデベロッパーツール(以下、デベロッパーツール)を使うと、リアルタイムでページの修正を試すことができます。
デベロッパーツールを起動するには、Google
Chromeを起動して、F12キーを押すか、ページ上で右クリックして「要素の検証」をクリックします。また、ページの変更したい箇所を選択したまま、「要素の検証」を選ぶと、デベロッパーツールの「Elements」パネルで該当箇所がハイライトされ、適用されているCSSが把握できます。また、「Elements」パネルの状態でルーペアイコンを選び、ページ上の要素をクリックしても、同様に該当箇所がハイライトされます。
7.4で作成したページを使って、ページを修正する方法を見てみましょう。

A1を選択した状態で「要素の検証」を選ぶと、デベロッパーツールが起動します。

Elementsパネルで、該当箇所の<td>タグの部分がハイライトされ、サイドバー(①)で適用されているCSSの情報が確認できます。DOMエレメントツリー(②)では、ブラウザ部分で表示中のHTML要素をツリー形式で表示されます。また、現在表示している要素の階層はパンくずリスト(③)に表示されます。

「最初の<td>タグの背景を薄い青色にして、文字サイズをもっと大きくしてほしい」という修正依頼があったと想定してみましょう。
CSSファイルを変更する前に、デベロッパーツール上でCSSを追加して、リアルタイムで編集を行って修正を試してみます。
対象の要素がアクティブになった状態で、サイドバーの適用されているCSSの余白をクリックすると、CSSが追加できるようになります。


「最初の<td>タグの背景を薄い青色にして、文字サイズをもう少し大きくして」という修正依頼があったと想定してみましょう。
CSSファイルを変更する前に、デベロッパーツール上でCSSを追加して、リアルタイムで編集を行って修正を試してみます。
対象の要素がアクティブになった状態で、サイドバーの適用されているCSSの余白をクリックしてください。そうすると、新たにCSSが追加できるようになります。
ここで、背景色を薄い青色にするために、「background-color:#b2d8ff」を追加すると、リアルタイムでA1の背景の色が変更されます。
リアルタイムでの変更を試すだけでなく、デベロッパーツールを使えば、CSSやHTMLの記述ミスを見つける手掛かりにもなります。
たとえば、CSSの記述を記載したにもかかわらず、サイドバーに記述した内容が表示されない場合は、クラス名や記述に間違いがあることを示しています。その場合には、デベロッパーツールを使ってソースコードを見直して、修正を行いましょう。

NEXT>> 7.5 本章のまとめ

HTMLとCSSの入門 目次

ご不明点はお問い合わせフォームからご連絡ください。

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター
早稲田大学大学院 理工学部卒業
SanJose 州立大学、コンピューター工学部卒業
アメリカのシリコンバレーでは、プログラマー・SEとして活躍
講師の詳細はこちら

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.