4月15日(木)3、4コマ目
予習
以下の資料を使います。
今日、やったこと
- WebとHTML
- HTMLのタグ
- フォントの色、サイズを変える
- <style>でデザインを一括設定
今日のホワイトボード
ホームページはHTMLで記述されている
ホームページを見る際、
①クライアント側のWebブラウザがWebサーバーへHTMLページをリクエストする
②WebサーバーはリクエストされたHTMLページの中身をWebブラウザへ返信する
③Webブラウザは受信したHTMLを表示する
の流れで処理される。
Webブラウザは
- Webサーバーにリクエストする
- HTMLを表示する
のが仕事。
 |
| 図 ホームページを見るには |
HTML
HTML(Hyper Text Markup Language)にはあらかじめ役割が決められたタグを定義している。
たとえば、<p>タグは段落を指定するためのタグ。
ホームページを作る際、このタグを組み合わせて作る。
 |
| 図 HTMLのタグ①（開始タグと終了タグのペア） |
 |
| 図 HTMLのタグ②（タグはネスト構造OK） |
 |
| 図 タグには属性が設定できる |
タグの構造
1つのHTMLファイルは<HTML>タグで始まり、</HTML>で終了する。
<HTML>～</HTML>内に、ヘッダー部（ブラウザには表示されない）を<HEAD>～</HEAD>に、ボディ部（ブラウザに表示される）を<BODY>～</BODY>に記述する。
このように、タグによっては記述する位置が決まっているモノもある。
 |
| 図 タグの構造 |
タグの紹介
タグは大量にあるが、とりあえずこれをおさえてください。
 |
| 図 タグの紹介（最低限） |
フォントの色、サイズを変える
style属性で指定する。
style属性で指定できる設定項目名は大量にある。
 |
| 図 style属性で"設定項目名:設定値;"のフォーマットで指定する |
段落全体の設定をしたい場合は<p style="・・">と<p>タグで指定すればいいが、段落の一部分を指定した場合は<span>タグを使って領域を作り、<span style="・・">～</span>のように指定する。
 |
| 図 <p>タグで段落全体を設定、<span>タグで一部分だけ設定 |
<span>タグは領域を作るためだけのタグ。見た目には一切効果なし。
同じように領域を作るための<div>タグもある。
<style>タグ内で一括してデザイン指定
各タグでstyle属性を使ってデザイン指定すると、同じデザインを指定したい場合は同じ記述が重複する。
プログラミング言語の関数導入理由と同じで、このままでは効率が悪い。
 |
| 図 タグごとにstyle属性でデザイン指定は効率が悪い |
よって、一か所にまとめて設定する方法が用意されてある。
<HEAD>～</HEAD>内の<style>～</style>で指定する。
指定方法は以下のとおり。
<HEAD>
<STYLE type="test/css">
セレクタ {
設定項目名 : 設定値;
設定項目名 : 設定値;
・
・
}
</STYLE>
</HEAD>
なお、セレクタは以下のように。
| 設定対象 | セレクタ | 備考 |
|---|---|---|
| タグ | タグ名 | <p>タグならp |
| クラス | .クラス名 | dogクラスなら.dog |
| ID | #ID名 | ID=catなら#cat |
 |
| 図 <style>～</style>でまとめてデザイン指定 |
コメント