STEP1-3.HTMLとCSSについて
HTML
HTMLはWebページを記述するための言語です。HTMLではタグを使って要素を記述します。<タグ名>を開始タグ、</タグ名>を終了タグといい、開始タグと終了タグの間に書いたものがそのタグの内容となります。（終了タグがないタグもあります。）
最低限のHTMLファイルは以下のようなものになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>HTMLのテストだよ</p>
</body>
</html>
これを開発環境のインストールディレトリのapp（skillup-php-step1-master/app/）の中にhello.htmlという名前で保存してみましょう。その際文字コードはUTF-8にしてください。メモ帳の場合、文字コードの選択は保存ボタンの左側にあります。
では、作ったファイルが実際どのように表示されるかみてみましょう。
作ったファイルをchromeなどのブラウザにドラック&ドロップしてみてください。
以下のような画面が表示されるはずです。
ファイルの文字を変更して保存してから表示させると画面の文字も変わっていると思います。htmlファイルはこのようにブラウザで表示することができます。
各タグの概要は以下になります。
| タグ | 役割 |
|---|---|
| <!DOCTYPE html> | HTML5で作成されたファイルであることを示すタグです。最近はHTML5が主流になりました。 |
| <head>～</head> | ページの情報を表します。 |
| <meta charset="～" /> | 文字コードを指定します。 |
| <title>～</title> | ブラウザのタイトルバーに表示するタイトルです。 |
| <body>～</body> | このタグの中にページの内容を書いていきます。 |
| <h1>～<h1> | 見出しです。h6まであり、数字が大きくなるほど文字が小さくなります。 |
| <p>～</p> | 段落を表します。 |
そのほかにも様々なタグがあります。HTML5リファレンスに詳しく載っていますので色々試してみてください。
CSS
CSSはHTMLの要素の見た目を指定するものです。先ほどのhello.htmlを以下のように修正してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTMLのサンプル</title>
<link rel="stylesheet" href="hello.css">
</head>
<body>
<h1>HTMLのサンプル</h1>
<p>こんにちは</p>
<p id="red">赤いこんにちは</p>
<p class="big">大きいこんにちは</p>
<p class="blue">青いこんにちは</p>
<p class="big blue">青くて大きいこんにちは</p>
</body>
</html>
各要素の概要は以下になります。
| 要素 | 役割 |
|---|---|
| <link rel="stylesheet" href="～"> | CSSを読み込む処理です。 |
| id="～" | タグにIDを設定できます。同一ページ内に同じIDが存在してはいけません。 |
| class="～" | タグにclassを設定できます。複数指定することもできます。idやclassはCSSで装飾する要素を指定するときに使用します。 |
さて、新たにhello.cssというファイルを以下のように作成します。
p {
text-decoration: underline;
}
#red {
color: #FF0000;
}
.big {
font-size: 1.5em;
}
.blue {
color: blue;
}
CSSは先頭で指定した要素全てに対して{}で囲まれた内容を適用するという構文になっています。先頭に何も付けないとタグ名、先頭に#を付けるとid名、先頭に.を付けるとclass名を指定できます。どのようなことができるかについてはスタイルシートリファレンスに載っていますので試してみてください。
また、Webブラウザには様々な種類があり、ブラウザごとにHTMLやCSSのレンダリングエンジンが異なるため、あるブラウザでしか使用できないタグや、あるブラウザでは崩れてしまうレイアウトなどがあるかもしれません。そのため様々なブラウザでチェックする必要があるでしょう。
[課題]フォームを作ってみよう
掲示板には発言を投稿するためのフォームが必要です。フォームの作り方を調べて、HTMLとCSSを使って発言を書き込む部分と送信ボタンがあるフォームを作ってみましょう。