Lecture/JouhouC2004/12th のバックアップ(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
現在との差分 - Visual を表示
ソースを表示
Lecture/JouhouC2004/12th へ行く。
- 1 (2004-07-06 (火) 19:09:25)

情報教育演習II 第12回

▲ ▼

前回の復習：HTMLファイルの作成（１）

HTML(Hyper Text Markup Language)
- Webページを作るためのコンピュータ言語
  - 文章の意味（役割）を指定「○○から××までを見出しにする」
  - 表示のしかたを指定「○○から××までを太字にする」
  - ハイパーリンクを設定「ほかのファイルへジャンプする」
タグ(tag)
- 文章に意味や表示の仕方を指定するために使うマークを使う
  - 「<」と「>」で囲まれた文字列（タグ名）
  - 開始タグ（<...>）と終了タグ（</...>）で囲んで指定する（一部終了タグのないものもある）
最低必要なタグ
- html -- HTMLファイルであること示す
- head -- HTMLファイルに関する情報
- title -- Webページのタイトル
- body -- Webページの中身（表示される部分）
文書の構造をあらわすタグ
- h1, h2, ..., h6 -- 見出し（6段階）
- p -- 段落
- br -- 改行
- address -- 署名や連絡先
文字の飾りをあらわすタグ
- b -- 太字
- i -- 斜体
- hr -- 水平線（区切り線）
箇条書きのためのタグ
- ul -- 番号なし箇条書き
- ol -- 番号つき箇条書き
- li -- 箇条書きの項目
- dl,dt,dd -- 説明つき箇条書き
リンクのためのタグ
- a -- リンクを設定

▲ ▼

HTMLファイルの作成（２）

前回は、HTML(Hyper Text Markup Language)でWebページを作成しました。タグを使って、構造や意味を意識しながら、文書（Web）ページを作成しました。

今回は、構造以外に、Webページとして必要な情報や、デザインや配色などを設定していきます。

▲ ▼

Webページに必要な情報

▲ ▼

HTMLのバージョンの指定

HTMLにはいくつかのバージョンがあります。現在は「4.01」とバージョンで、バージョンによって書き方が多少異なります。

HTMLファイルの最初に次の行を入れて、このファイルがHTMLファイルであることとバージョンを指定します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

▲ ▼

文字コードの指定

コンピュータは世界中の国々で使われていますが、その国、その言語圏で使用される言葉を処理できるように、文字コードという文字の一覧表をコンピュータ内部に持っています。日本語の文字コードには、おもにシフトJIS、JIS、EUCの３つがあり、Windowsで利用されているのは、シフトJISです。*1

もし、ブラウザの使用できる文字コードと、Webページ（HTML）ファイルで使用されている文字コードが合わない場合、「文字化け」という文字が正しく表示されない現象が起こります。

しかし、HTMLファイルがどの文字コードを使用しているか書いておけば、ブラウザが解釈して、正しく表示されるようになるます。それには、<head>タグの中で、<meta>タグを使ってHTMLファイルの文字コードを指定します。

<head>
  <meta http-equiv="content-type" content="text/html; charset=shift_jis">

▲ ▼

署名の更新

<address>タグなどを使って、署名や連絡先、更新日などは、必要があれば変更しておきましょう。

とくに更新日は、Webページの鮮度をあらわすものなので、少しでも更新したら、日付を変更しておきましょう。

 <address>
 制作年月日: 2003-12-17; 更新年月日: 2004-01-07<br>
 <a href="mailto:○○">○○＾</a>
 </address>

▲ ▼

スタイルシート

▲ ▼

スタイルシートとは

ワープロソフトのWordには「スタイル」という機能があり、フォントの種類や色などの書式のまとまりをスタイル（見出し、箇条書き等）として登録することで、文書全体のデザインを統一できるのと同時に、デザインの変更をしやくすることができます。

HTMLでも、「スタイルシート」という手段があります。文書の論理的な構造と、見栄えなどの表現の決まりごとを、分けて定義します。

<h1>や<p>などのタグが文書の構造を表現するのに対して、スタイルシートでは、「<h1>タグの文字色は青」「<p>タグの文字の大きさは12pt」のように表現のルールを決めます。

HTMLでのスタイルシートは、CSS(Cascading Style Sheet)といいます。 CSSを使うことで、タグを使った文書構造とデザインを分けて管理することができます。

▲ ▼

CSSの書き方

CSSの書き方にはいくつか方法があります。 CSSを利用するときには、<head>タグの中に次の行を書いておきます。

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

CSSでは、タグの「属性」に「値」を指定します。たとえば、<h1>タグの文字色を赤に設定する場合を考えましょう。（授業では、2.の方法を使います）

タグに<STYLE>属性を設定する（１ヶ所だけの指定）

書き方：

<（タグ） style="（属性）: （値）;">

例：
```
<h1 style="color: red;">見出し</h1>
```

<head>タグの中に<style>タグを設定する（同じタグすべての指定）

書き方：

（タグ） {（属性）: （値）; （属性）: （値）; ...}

例：

<head>
  <meta http-equiv="Content-Style-Type" content="text/css">
  <style type="text/css">
  <!--
    h1 {color: red;}
  -->
  </style>

CSSを書いた別ファイルを指定する
- default.cssというファイルを用意する
```
 h1 {color: red;}
```
- <head>タグの中に、次の行を追加する
```
  <link rel="stylesheet" href="default.css" type="text/css">
```

▲ ▼

色の指定

HTMLでは、文字や線の色などを指定できます。指定するには、色の名前や色の値を使います。

色の名前
- 代表的な色（16色）には、名前がつけられています。
  black gray silver white
  red yellow lime aqua
  blue fuchsia maroon olive
  green teal naby purple
色の値
- 光の三原色である、赤(R)緑(G)青(B)の強さを値であらわします。
- 16進数(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)を使い、RGBそれぞれを00〜FFまでの256段階で設定することができます。
- blackは#000000、redは#FF0000、whiteは#FFFFFFのように、「#」のあとにRGBの値を設定します。
参考：とほほの色入門：色見本
- http://tohoho.wakusei.ne.jp/wwwcolor.htm

▲ ▼

色の変更

文字や線に色をつけたり、背景色を設定するには、次のようにします。

色を設定するには、color属性を使います。
```
p {color: #000080}
```
背景色を設定するには、background属性を使います。
```
h2 {background: #FFFF80;}
```
2つ以上の設定は、つづけて書くことができます。
```
body {color: （文字色）; background: （背景色）;}
```

▲ ▼

文字の装飾

文字の大きさや配置を設定するには、次のようにします。

文字の大きさを設定するには、font-size属性を使います。
- 大きさを指定には、3つの種類があります。
  - 絶対的な大きさ：xx-small, x-small, small, medium, large, x-large, xx-large
```
h1 {font-size: xx-large;}
```
  - 相対的な大きさ：larger, smaller
```
p {font-size: larger}
```
  - パーセンテージ：90%, 120%など
```
address {font-size: 90%;}
```
文字の太さを設定するには、text-wight属性を使います。
- normalやbold, bolderなどがあります。
```
h2 {text-wight: bold;}
```
文字の位置を設定するには、font-align属性を使います。
- 左(left)、右(right)、中央(center)に、文字を揃えることができます。
```
h1 {font-align: center;}
```

▲ ▼

枠の装飾

見出しや段落には、通常、見えない枠があります。枠のスタイルを設定することで、枠を描くことができます。描いた枠には、太さや色を設定することができます。

枠を設定するにはborderではじめる属性を使います。
- border-topは上枠、border-bottomは下枠、border-leftは左枠、border-rightは右枠を設定します。
- すべての枠を同じように設定するには、border属性を設定します。
- 使い方は、次のとおりです。border-topもborder-leftもborder-rightもborderも同じように設定できます。設定には、順序は決まっていませんし、省略できます。
```
  border-bottom: （色の設定） （太さ） （線のスタイル）;
  border-bottom: blue 3px double;
```
- 線の太さには、次の値を設定できます。
  - thin, meduim, thick（標準であるmediumから見た大きさ）
  - 2pxや4pxなど（具体的な太さ：pxはピクセル（画面上の点））
- 線のスタイルには、次の値を設定できます。
  - none （枠を描かない：初期値）
  - dotted （点線）
  - dashed （破線）
  - solid （実線）
  - double （二重線）
  - groove （溝のような線）枠が溝のように描かれる。
  - ridge （盛り上がった線）枠が盛り上がっているように描かれる。
  - inset （ボタンを押したような線）
  - outset （ボタンが押される前のような線）
枠の外側の余白を設定するにはmarginではじめる属性を使います。
- margin-topは上側、margin-bottomは下側、margin-leftは左側、margin-rightは右側を設定します。
- すべての余白を同じように設定するには、margin属性を設定します。
- 使い方は、次のとおりです。margin-topもmargin-leftもmargin-rightもmarginも同じように設定できます。設定には、順序は決まっていませんし、省略できます。
```
  margin-bottom: （余白の長さ）;
  margin-bottom: 1em;
```
- 長さには、em（1emは1文字の高さ）などがつかます
枠の内側の余白を設定するにはpaddingではじめる属性を使います。
- padding-topは上側、paddin-bottomは下側、paddin-leftは左側、paddin-rightは右側を設定します。
- すべての余白を同じように設定するには、paddin属性を設定します。
- 使い方は、次のとおりです。padding-topもpaddin-leftもpadding-rightもpaddinも同じように設定できます。設定には、順序は決まっていませんし、省略できます。
```
  padding-bottom: （余白の長さ）;
  padding-bottom: 1em;
```
- 長さには、em（1emは1文字の高さ）などがつかます

KAWANO's PukiWiki Plus! - Lecture/JouhouC2004/12th のバックアップ(No.1)