コンピュータサイエンス 1. ウェブの基本

(1)

コンピュータサイエンス

1. ウェブの基本

Chris Plaintail

May 18, 2016

(2)

ウェブページ

ここではウェブページを記述する HTML 言語とその 周辺を学ぶ．ウェブページを記述する HTML 言語は， マークアップとよばれる方法で文書の構造を指示している．つまり文書に含まれる各要素の意味や相互の構造上の関係を指示しているのである．ところで，文書要素の意味や構造は具体的な表現をもって認識される．たとえば，箇条書き，見出し，段落のインデント，表といった具体例を思い起こすとわかりやすいだろう． 現在の HTML は文書の構造のみを指示するものと し，表現法を指示する体系は HTML とは別に用意され ている．この言語は CSS とよばれている． ブラウザは HTML による記述にしたがって文書の構 造を解析し，CSS による記述にしたがって具体的は表現 を実現するのである． 3 / 27

(4)

(5)

ウェブブラウザと

HTML

ファイル

ウェブサーバー HTML, CSS ローカルディスク HTML, CSS ウェブブラウザ CSS -http, https -file HTMLは意味と構造を指示する（表現は CSS で指定する）．テキストエディタで編集してウェブブラウザで表示する．ファイル名の拡張子は .html とする． PCのファイルを表示するには「file://ファイルのパス」 PCのファイルを表示するブラウザの登録 .htmlファイルのアイコンを右クリックプログラムの選択既定プログラムの選択 5 / 27

(6)

(7)

HTML

：要素と属性

文書の各要素はタグとよばれる記号で構造化される．属性を指定することもある．

要素：開始タグ

∼

内容

∼

終了タグ

<タグ属性="値">内容</タグ>

空要素：内容（および終了タグ）のない要素

<タグ属性="値"> 汎用属性 style id class 7 / 27

(8)

HTML

：文書構造

文書型宣言：<!DOCTYPE html> 全体：html 要素ヘッダー：head要素本文：body 要素 <!DOCTYPE html> <html lang="ja"> <head> ... </head> <body> ... </body> </html>

(9)

HTML

：ヘッダ情報

文字コード外部ファイル（スタイルファイル・スクリプト）

sample-1.html

<!DOCTYPE html> <html lang="ja"> <head> <title>タイトル</title> <meta charset="utf-8">

(10)

HTML

：ヘッダ情報

【問 1】 meta 要素で指定される文字コードは utf-8 の他にどのようなものがあるか．【問 2】 meta 要素での指定と異なる文字コードを使って保存されたファイルをブラウザーで閲覧するとどうなるか．また，このファイルを変更せずに表示させるにはブラウザーをどのように設定すればよいか．【問 3】 link や script 要素で実在しないファイルを指定すると何が起こるか．【問 4】文書全体の構造指定に関して HTML 文書と LA_{TEX 文書} を対比して，共通点・相違点を考えよう．

(11)

HTML

：基本要素

sample-2.html

<!DOCTYPE html> <html lang="ja"> <head> ... </head> <body> <h1>見出し</h1> <p>本文（段落） <a href="http://www.google.co.jp">google</a> <a href="sample-01.html">ファイル</a>

</body> </html>

(12)

HTML

：表組

sample-3.html

<!DOCTYPE html> <html lang="ja"> <head> ... </head> <body> <h2>表組み</h2> <table> <tr><td>日本</td><td>東京</td></tr> <tr><td>中華民国</td><td>台北</td></tr> <tr><td>大韓民国</td><td>ソウル</td></tr> </table> </body> </html>

(13)

HTML

：リスト

sample-4.html

<body> <h2>箇条書き</h2> <ul> <li>被子植物 <ul> <li>双子葉類</li> <li>単子葉類</li> </ul> </li> <li>裸子植物</li> </ul> </body> 13 / 27

(14)

HTML

：フォームとボタン

sample-5.html

<body>

<form action="sample.php" methot="post"> メールアドレス：<input type="email"><br> パスワード：<input type="password"><br> 電話番号：<input type="tel"><br>

氏名：<input type="text"><br> <input type="submit" value="送信"> <input type="reset" value="リセット"> </form>

(15)

HTML

：フォーム

sample-6.html

<form action="sample.php" methot="post"> 言語：

<select id="language" name="language"> <option value="en">英語</option> <option value="de">ドイツ語</option> <option value="fr">フランス語</option> <option value="ja" selected>日本語</option> <option value="zh">中国語</option>

</select> </form>

(16)

HTML

：フォーム

sample-7.html

<form action="sample.php" methot="post"> 連絡方法（複数選択可）：

<select id="contact" name="contact" multiple size="5"> <option value="email" selected>電子メール</option> <option value="tel" selected>電話</option>

<option value="fax" selected>ファックス</option> <option value="postal" selected>郵便</option> <option value="office">直接来場</option> </select>

(17)

HTML

：課題

【問 5】適当な画像ファイルを作成（ダウンロード）して，その画像を含むウェブページを作成しよう．また，その画像をクリックすると特定のサイトに移動するようにしてみよう．【問 6】 form 要素を使って，アンケート調査のウェブページを作成しよう．【問 7】 table と button を使って，電卓のキーの配列（数字と演算記号など）を，また，input を使って文字入力領域（計算結果表示領域に対応する）を表示する HTML ファイルを作成しよう（もちろん計算機能が実現されるものではない）．【問 8】箇条書きを繰り返し適用して表現するにふさわしい構造のデータを探し，それを HTML ファイルで表現してみよう．【問 9】いろいろな HTML 要素を調べて使ってみよう． 17 / 27

(18)

(19)

CSS

の適用

style 属性（個別に設定） <style> 要素（ヘッダに記述） <link> 要素（外部ファイルから読み込む）

sample-8.html

<!DOCTYPE html> <html lang="ja"> <head><meta charset="utf-8"></head> <body> <h1 style=color:red;font-size:12px;">見出し語</h1> <p style="color:blue;font-size:10px;"> style 属性で個別に設定</p> <h1 style=color:red;font-size:12px;">次の見出し語</h1> </body> </html> 19 / 27

(20)

CSS

の適用

sample-9.html

<html lang="ja"> <head> <style> p {color:blue; font-size:10pt;} </style> </head> <body> <p>ヘッダに記述</p> </body> </html>

(21)

CSS

の適用

sample-10.html

ex-01.css

p {color:blue; font-size:10pt;} 21 / 27

(22)

CSS

：表現の指定

書式セレクタ{プロパティ:値;} p {color:blue; font-size:10pt;} 長さの単位絶対単位：pt, cm, mm, in, pt, pc 相対単位：px, em, ex, % 色の表現

カラー名：black, gray, silver, white, blue, red, green, ... rgb 指定：#ffffff(white) ∼ #000000(black)

(23)

CSS

：表現の指定

箱の寸法内容 padding border margin 【問 11】【問 7】で作成された html ファイルに対して，CSS でボタンの大きさ，ボタンの背景色などを指定しよう． 23 / 27

(24)

セレクタの指定方法

要素要素名 p {color:blue;}

全称 * * {color:bule;}

class 要素名. クラス名 p.xxx {color:blue;} id 要素名#id 名 p#yyy {color:blue;} 未訪問リンク要素名:link a:link {color:blue;} 訪問済リンク要素名:visited a:visited {color:blue;} 列挙セレクタ, セレクタ h1, h2 {color:blue;} 子孫セレクタセレクタ p a{color:blue;} 子セレクタ>セレクタ ul > li {color:blue;} 隣接セレクタ+セレクタ h1 + p {color:blue;}

(25)

id

要素#ID{プロパティ:値} <style> p#ex-1{color:red;} p#ex-2{color:blue;} p#ex-3{color:green;} </style> ... <p id="ex-1">設定 ex-1 が適用される</p> <p id="ex-2">設定 ex-2 が適用される</p> <p id="ex-3">設定 ex-3 が適用される</p> <p id="ex-3">同一 ID (ex-3) の使用は 1 回限り </p> 25 / 27

(26)

class

要素. クラス{プロパティ:値} .クラス{プロパティ:値} <style> p.ex-1{color:red;} .ex-2{font-size:15pt;} *.ex-3{color:green;font-size:15pt;} </style> ... <p>設定が適用されない</p> <p class="ex-1">設定が適用される</p> <p class="ex-2">設定が適用される</p> <p class="ex-2">設定が適用される（何度でも使える）</p> <h3 class="ex-2">設定が適用されない</h3> <h3 class="ex-3">設定が適用される</h3>

(27)

スタイルの継承

親要素の値が子要素に継承されるか Yes : color, font-size

No : border, margin, padding

親要素の値を子要素が強制的に継承する：inherit div.ex-1 {border:1px solid #000000;} p.ex-2 {border:inherit;} <h3 class="ex-1">設定が適用される</h3> <div> <p class="ex-2">設定 (ex-1 ど同じ) が適用される</p> </div> 27 / 27

コンピュータサイエンス 1. ウェブの基本