(10)12/16の授業内容

CSSの設定方法

CSSによるデザインの指定方法として、前回はstyle属性を使用した方法を示しました。しかし、<p>タグを使用する場合は全て青色の文字で書きたいというような場合、毎回style属性で指定するのは面倒です。最初から、<p>タグを使った場合には必ず文字が青くなるようにしておきたいところです。

CSSを使用する場合、様々な要望があります。

  1. 特定の一箇所だけ指定したい
  2. 特定の数箇所だけ指定したい
  3. 特定のタグを使用した場合は全てにデザインを反映させたい
  4. 特定のタグを使用した場合は全てにデザインを反映させ、かつそのデザインを複数のページに適用したい

これらのニーズに対応できるように、CSSの設定方法は様々にあります。

CSSの書式

セレクタ {プロパティ：値}

セレクタはデザインを適用させる対象です。セレクタとしては、タグを指定する場合と、アスタリスク（後述）を指定することができます。複数のプロパティを指定する場合は値の後ろに；をつけてつなぎます(これが一般的な指定方法です。そういう意味では先日のstyle属性は特殊な部類であるといえます)。 

p     {
       color: #000000;
       letter-spacing: 0.1em;
       }
.item {
       line-height: 2em;
       font-size: 16px;
       margin-left: 15px;
       margin-right: 15px;
       letter-spacing: 0.1em;
       }

上記のうち上の例は、セレクタをタグとしている場合です。このような指定をすると、pタグを使用した場合、必ず指定したデザインが適用されることになります。下の例はセレクタにアスタリスクを使用している場合です。この場合はclass属性を使用して<p>の変わりに<p class="item">と記述した場合のみ、指定したデザインが適用されるようになります。

では、これらの設定をどこに記述すればよいでしょうか？　方法は2種類あります。特定のページにのみこのデザインを適用したい場合は、そのページの<head></head>内に記述します。複数のページにデザインを適用したい場合は、拡張子に.cssがつくファイルを作成し、その中に記述しておき、各ページを表示する際にそのファイルを読み込ませるという方法をとります。

まずは、<head></head>内に記述をした例を見てみましょう。いろいろ書いてありますが、細かいことは気にせず、とりあえず赤い字で書いてあるところだけに着目してください。特定のページにデザインを適用する場合は、<style type="text/css"></style>の間に記述して指定します。このような形で指定する場合は、これをコピーして必要な部分だけ変更するようにすれば良いでしょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="author" content="Naoya Kanda">
<meta name="description" content="自己紹介のページです">
<meta name="keywords" content="自己紹介・趣味・特技">
<title>Welcome!!!</title>
<link rev="made" href="mailto:naoya@e.koeki-u.ac.jp">
<style type="text/css">
<!--
	body { 
		background-color: #fff;
	}
	h1 {
		text-align: center;
		color: #000;
		font-size: 28px;
		font-weight: bold;
	}	
	p { 	
		color: #000;
		font-size: 18px;
	}
	.right {
		text-align: right;
	}
	.center {
		text-align: center;
		margin-bottom: 30px;
	}
	.red {
		color: #f00;
		font-weight: 700;
	}
	.item {
		text-indent:-1em;
		
	}
-->
</style>
</head>

一方、複数のページにデザインを適用する場合は、外部に.cssファイルを作成します。以下に、情報リテラシーIIの全ページに対応するように記述されたCSSファイルを示しますので確認してみましょう。

http://roy.e.koeki-u.ac.jp/~naoya/default.css

そして、.cssファイルを読み込ませたいページの<head></head>内には下記のように記述します。ここで、ファイル名は作成した.cssファイルの名称と同一である必要があります。

<link rel="stylesheet" href="../default.css" type="text/css">

上記のhref="../default.css"で読み込むcssファイルを指定しています。htmlファイルとcssファイルの相対的な位置関係により../などをつけて場所を指定する必要があります。これは通常の<a>タグを使用する場合と同じです。

CSS設定方法のまとめ

<head></head>内に記述する情報

これまで、<head></head>内には<title></title>を配置し、そのページのタイトルを記述してきましたが、これだけでは十分ではありません。<head></head>内にはページの概要や作成者、文字コードなどいくつか記述すべき情報が決められています。以下にサンプルを示しますので、必要に応じて適宜変更して利用してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="author" content="Naoya KANDA">
<meta name="description" content="情報リテラシーII第10回">
<meta name="keywords" content="CSSの設定方法、HEAD内の記述">
<title>情報リテラシーII第10回</title>
<link rel="stylesheet" href="../default.css" type="text/css">
<link rev="made" href="mailto:naoya@e.koeki-u.ac.jp">
</head>

続いて、各行について説明します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

htmlファイルを作成した場合には、必ず冒頭に書く必要があるDOCTYPE宣言と呼ばれるものです。これは、このページがHTMLのどのバージョンのどのDTDに基づいて書かれているのかを示すものです。DTDとはDocument Type Definitionの略で、利用可能なタグや属性を指定したものです。3種類あり、Strict.dtdはHTMLの最新のバージョンに厳格に従うもので、非推奨のfontタグなどは使用しても反映されません。Transitional.dtdはHTMLの最新バージョンに移行中のページであることを示すもので、fontタグなどの非推奨のタグも利用可能です。frameset.dtdはフレームを使用していることを示します。ここではStrict.dtdを使用しています。

<html lang="ja">

htmlファイルの2行目には<html>を記述します（前回までは1行目と言ってきましたが、1行目にはDOCTYPE宣言が入るので、正確には2行目です。）lang="ja"は日本語で書かれていることを示しています。

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">

この行では文字コードを指定しています。文字はコンピュータでは全て数字の組み合わせとして扱われており、数字の組み合わせと文字の対応関係を規定したものが文字コードです。日本語をあらわす文字コードが何種類かあるので、どれを利用しているのかを示しておく必要があります。これを記載しなかったり、書き間違えていると文字化けが生じる可能性があります。royで作成した場合は"EUC-JP"となります。

<meta http-equiv="Content-Style-Type" content="text/css">

デザインを指定する上でCSSを使用していることを示しています。CSSを使用する場合は必ず記入します（使用しない場合は不要です）。

<meta name="author" content="Naoya KANDA">

作成者を示します。

<meta name="description" content="情報リテラシーII第10回">

このページの説明を記述します。図のみのページのような場合、Googleなどの検索結果には、ここに記載された内容が表示されます。

<meta name="keywords" content="CSSの設定方法、HEAD内の記述">

このページのキーワードを示します。

<title>情報リテラシーII第10回</title>

このページのタイトルを表示します。ここに記述した内容が、ブラウザの左上に表示されます

<link rel="stylesheet" href="../default.css" type="text/css">

外部のcssファイルを読み込む場合に記述します。hrefの中にファイル名及びファイルの位置を指定します。

<link rev="made" href="mailto:naoya@e.koeki-u.ac.jp">

作成者の連絡先（メールアドレス）を記述します。

完成したページを採点しよう

作成したページがどの程度正しい文法で記述されているかを採点することができます。下記のリンク先のDATAの部分に作成したページ内容をすべて貼り付けてチェックしてみましょう。

Another HTML-lint Gateway

課題

index.htmlとjikanwari.htmlを完成させる。いずれもCSSを利用すること。完成したらindex.htmlだけAnother HTML-lint Gatewayで採点する。採点結果に基づいて得点を決定する

提出先：naoya@e.koeki-u.ac.jp

メールの件名（Subject）：学籍番号_html

本文：index.htmlファイルのURLを記載する

採点方法：12月中：基準点15点、それ以降〜trr試験前まで：基準点10点とし、Another HTML-lint Gatewayの採点結果に基づいて加点する。

加点は、採点結果を10で割った値（小数点以下切捨て）とし、マイナスの値の場合は0点とする（例えば62点なら6点、38点なら3点、-20点なら0点）。なお、jikanwari.htmlを未作成の場合は5点減点とする