Web(4)時間割作成、CSSクラス指定

Web作成は必ず public_htmlフォルダを指定すること!

表の作成

実際に html を使い時間割を作成してみる。
とりあえず途中まで。
ファイル名は table.html とする。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>時間割</title>

</head>
<body>
<h1>時間割</h1>
<table>
<tr>
 <th>--</th>
 <th>月曜日</th>
 <th>火曜日</th>
 <th>水曜日</th>
 <th>木曜日</th>
 <th>金曜日</th>
</tr>
<tr>
 <th>1限</th>
 <td>--</td>
 <td>情報リテラシー</td>
 <td>--</td>
 <td>--</td>
 <td>英語I</td>
</tr>
<tr>
 <th>2限</th>
 <td>山形の文化</td>
 <td>数学</td>
 <td>--</td>
 <td>英語II</td>
 <td>公益研究</td>
</tr>
</table>
</body>
</html>

実際に確認してみよう。
アドレスは
http://roy/~c1xxxxx/table.html
各自このアドレスをfirefoxのアドレスバーにコピーペーストし、自分の学籍番号に替えてアクセスしてみる。 .

タグについてはホワイトボードにて説明を行なう。必要であればメモを取ること。
マニュアル表の作成

スタイルシートで罫線の設定

表の罫線はスタイルシートで設定する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>時間割</title>
<style>
table,td,th{border-collapse:collapse; border:3px solid red;}
</style>
</head>

<body>
<h1>時間割</h1>
<table>
<tr>
 <th>--</th>

設定をコピペするとこのような見ためになる。

罫線が必要なタグ table td th のタグに対して罫線のスタイルを設定している。

border-collapse
border とは「ボーダー、縁、へり」、 collapse とは「つぶれる、くずれる」という意味。 border-collapse:collapse; とすることにより、隣接するマスのborderを重ねるという意味になる。
ちなみにborderを重ねず間隔をあける場合は border-collapse:separate;
border:1px solid white;
border:1px はborderの太さ、solid はborderの種類(solid は実線)、 white はborderの色
borderの種類はこちらを参考に

その他スタイルシートでの設定

時間割の文字を中央揃えにしたい、文字色を場所によって変更したいなどの設定をしたい場合は、以下のようなスタイルを追加する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>時間割</title>

<style>
body{background-color:pink; color:navy;}
table,td,th{border-collapse:collapse; border:3px solid red;}
th {background-color:black; color:white;}
td {background-color:green; color:white; text-align:center;}
</style>

</head>
<body>
<h1>時間割</h1>
<table>
(以下省略)

見栄えがぐっと変わって来る

text-align というのは文字などの行揃え位置を設定するもので、中央揃えにする場合は center 、右寄せは right になる。
<th> タグはもともと初期設定が中央揃えのため設定の必要なし。

スタイルのクラス指定

今までの行なって来た背景色、文字の色などの変更は特定のタグに対して共通の見た目で行なって来たが、同じタグで違う見た目の変更を行ないたい場合 (例えば特定の文字だけ赤にしたいなど)クラス指定を使用する。

参考公式マニュアル
クラスによるスタイル指定

余裕がある人は、スタイルのクラス指定でデザイン変更すると加点する。クラス指定を使用する際、任意のクラス名を付けることができる。

任意のクラス名にスタイルの設定を行ない、使いたいタグの中でクラス指定を行なうと見た目が変わる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>時間割</title>

<style>
body{background-color:pink; color:navy;}
table,td,th{border-collapse:collapse; border:3px solid red;}
th {background-color:black; color:white;}
td {background-color:green; color:white; text-align:center;}
.white-blue {background-color:white;color:blue;}
.green {color:green;}
.yellow {color:yellow;}
</style>

</head>
<body>
<h1>時間割</h1>
<table border="1">
<tr>
 <th>--</th>
 <th class="white-blue">月曜日</th>
 <th class="green">火曜日</th>
 <th class="yellow">水曜日</th>
 <th >木曜日</th>
 <th >金曜日</th>
</tr>
<tr>
 <th>1限</th>
 <td>--</td>
 <td>情報リテラシー</td>
 <td>--</td>
 <td>--</td>
 <td>英語I</td>
</tr>
<tr>
 <th>2限</th>
 <td>山形の文化</td>
 <td>数学</td>
 <td>--</td>
 <td>英語II</td>
 <td>公益研究</td>
</tr>
</table>
</body>
</html>

実際これをブラウザで確認すると、このような見た目になる。

本日の課題

トップ