レッスンの目標⌗

HTMLでホームページを作ろう

ファイルを作成する⌗

テキストエディタを使ってmcc1/code/htmlの下にindex.htmlというファイルを作成します。

HTMLの全体構造⌗

作成したindex.htmlに以下のようなHTMLコードを入力します。

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
	</body>
</html>

先頭の<!DOCTYPE html>でこのファイルがHTMLで書かれていることを宣言します。次に<html>から</html>で囲まれた部分がHTML文であることを示しています。 HTML文には<head>から</head>で囲まれた要素と<body>から</body>で囲まれた要素が必要です。 <head>要素では「ページに関する情報」を、<body>要素では「実際に表示したい内容」を書きます。

演習１⌗

<body>と</body>の間に好きな文字を入力し、index.htmlをブラウザで表示してみましょう。

<head>要素の中身⌗

<head>要素では以下のような内容を書きます。

文字コード

<meta charset="utf-8">

日本語で記述する場合、このように記述します(Linux環境の場合）。

ページタイトル

<title>ページのタイトル</title>

「ページのタイトル」の部分に実際のページのタイトルを書きます。このタイトルは実際のホームページには表示されませんが、ブラウザのタブなどに反映されます。

CSSファイルの呼び出し

<link rel="stylesheet" href="stylesheet.css">

ページのレイアウト情報を記述したcssファイルを呼び出します。 stylesheet.cssというファイルを作成し、レイアウト情報を記述します。とりあえず、中身が空のstylesheet.cssというファイルを作成してください。具体的な記載内容については後で説明します。

演習２⌗

index.htmlに上記の<head>要素を追加し、ページのタイトルを入れてください。さらに、空のstylesheet.cssファイルを作成し、index.htmlをブラウザで表示してみましょう。前回と何が違っているか確認しましょう。

<body>要素の中身⌗

ホームページに表示するタイトル⌗

ホームページに実際に表示するタイトルを作成します。

<h1>実際に表示するタイトル</h1>

「実際に表示するタイトル」の部分にホームページに実際に表示したいタイトルを記述します。なお、文字の大きさ、色、背景色などは、cssファイルで自由に変更できます。

演習３⌗

index.htmlの<body>と</body>の間に記述した文字を上記の実際に表示するタイトルに書き換え、index.htmlをブラウザで表示しましょう。

テーブル要素⌗

行と列で構成される表を作成するには<table>要素を追加します。

<table>
	<tr>
		<td>
			表1.1
		</td>
		<td>
			表1.2
		</td>
		<td>
			表1.3
		</td>
	</tr>
	<tr>
		<td>
			表2.1
		</td>
		<td>
			表2.2
		</td>
		<td>
			表2.3
		</td>
	</tr>
</table>

<table>から</table>までが表であることを示しています。 <tr>から</tr>までが１つの行であることを示します。 <td>から</td>までが１つの列であることを示します。上記例では行の中に複数の列が記述されています。

演習４⌗

index.htmlの「実際に表示するタイトル」の後ろに上記テーブルを追加し、どのように表示されるかindex.htmlをブラウザで表示し、確認してください。

画像の表示⌗

画像を表示するためには、最初に画像ファイルを用意する必要があります。 mcc1/code/htmlの下にphotoというフォルダを作成し、そのフォルダの中に表示したい画像ファイルを保存してください。例えば、image01.jpegという名前の画像ファイルを表示するためには以下のように記述します。

<img src="photo/image01.jpeg">

演習５⌗

index.htmlの<table>要素の中の「表1.1」、「表1.2」、「表1.3」３つをそれぞれ３つの画像を表示するように書き換えてみましょう。
書き換えたら、「表2.1」、「表2.2」、「表2.3」の部分をそれぞれ画像を説明する説明文に書き換えてみましょう。

CSSの記述⌗

先程作成したstylesheet.cssファイルにレイアウト情報を記載します。例えば、先程作成した実際に表示するタイトルの色を赤色に変更するためには以下のように記述します。

h1 {
	color: red;
}

タイトルは<h1>という要素で書かれているので、このレイアウトについて色を指定するには上記のように記載します。

演習６⌗

stylesheet.cssを書き換えて、タイトルを好きな色に設定し、index.htmlをブラウザで表示し、好きな色に変更されていることを確認しましょう。

CSSで設定できる項目⌗

CSSでは各要素毎に以下のような項目を設定できます。

文字の色

	color: red;

redの部分では色々な色を単語で指定したり#ff0000のようなカラーコードで指定することができます。

文字の大きさ

	font-size: 40px;

pxという単位で文字の大きさを指定します。

背景色

	background-color: yellow;

yellowの部分は文字の色と同様、単語やカラーコードで指定できます。

演習７⌗

タイトルの文字の大きさ、背景を好きな大きさ、背景色に変更してみましょう。

CSSで設定できる項目(2)⌗

横幅、高さ

文字が描画される領域や画像の領域を指定できます。例えば、画像を全て同じ横幅・高さに設定するためには以下のように設定します。

img {
	width: 500px;
	height: 200px;
}

設定する値は、pxという単位で指定します。画像を指定する場合、幅(width)、高さ(height)の両方を指定すると強制的にその大きさに変形されます。縦横の比率を変えたくない場合は、揃えたい幅または高さのどちらか一方だけを指定すると、縦横の比率を保ったまま大きさを揃えることができます。

演習８⌗

先程の画像の横幅を300pxに変更してみましょう。

CSSで設定できる項目(3)⌗

文字の配置

文字の配置を左揃え（初期値）、中央揃え、右揃えなどに設定できます。テーブルに表示する文字の配置を変更するには、以下のように設定します。

td {
	text-align: center;
}

テーブルの各要素の文字の配置を中央揃えにしたい場合、上記のように指定します。左揃えはleft、右揃えはrightと指定します。

演習９⌗

テーブルの各要素の文字を好きな配置に変更してみましょう。

CSSで設定できる項目(4)⌗

枠線

枠線をつけたい場合、以下のように枠線の幅、種類、色を指定します。

td {
	border: 2px solid black;
}

枠線の種類は以下の通り

dotted 点線
solid 実線
double 二重線
groove 窪んだ立体線
ridge 浮き上がった立体線
inset 全体が窪んだ立体線
outset 全体が浮き上がった立体線

演習１０⌗

今まで習ったことを利用して、自分のホームページを完成しましょう。

レッスン 26