＜テーマ＞ html の役割（3 · 2016. 7. 15. · 実習8-1...

Webデザイン基礎授業ノート 8

＜テーマ＞ HTML の役割（3）

１見出しと段落

（１）要素 <h1> <h2> <h3> <h4> <h5> <h6>

・<h1> Webサイト全体の総合的な主題（テーマ、タイトル）

最重要人間にもコンピューターにも主題が伝わること

・<h2>～ページ内の情報に対する見出し

階層構造にする

・ブロックレベルの性質前後で改行され、縦に積まれる

（２）p 要素

・<p>～</p>の中が一つの段落

・ブロックレベルの性質前後で改行される

・段落の途中で改行が必要な場合は br 要素を使う

<br> （XHTMLでは <br />）

実習 8-1 各要素のデフォルトスタイルシート

・各要素はブラウザで決められているスタイルで表示される。

（例︓見出しが大きな文字、太字で表示される、余白の調整、など）

これを「デフォルトスタイルシート」と呼ぶ。

自作するスタイルシートで変更できる。

・それぞれの要素がどのようなデザインで表示されるか確認しよう。

ファイル名 ex08-01.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>デフォルトスタイルシートの確認</title>

<link href="css/style08-01.css" rel="stylesheet">

</head>

<body>

<h1>これは<h1>でマークアップしています。</h1>






<p>これは<p>でマークアップしています。<br>

改行しました。

改行していません。

</p>

</body>

</html>

（TeraPadで新規作成したところへペーストして下さい）

スタイルシート style08-01.css は次ページ

ファイル名 style08-01.css

@charset "UTF-8";

body { font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-

serif;

}

h1 { background-color: #ffeeee;

}

h2 { background-color: #ffffee;

}

h3 { background-color: #eeffee;

}

h4 { background-color: #eeffff;

}

h5 { background-color: #ffeeff;

}

h6 { background-color: #ffeeff;

}

p { background-color: #eeeeee;

}

（TeraPadで新規作成したところへコピー＆ペーストして下さい）

※スタイルシートのファイルは css フォルダー内に保存しましょう。

２文字に意味を与える要素

（１）強調する em 要素 strong 要素

<em>文字列</em> 表示は「斜体」

<strong>文字列</strong> 表示は「太字」

・em要素・・・意味を強調する

・strong要素・・・重要性、深刻性、緊急性の意味付け強い強調

（２）上付き、下付き（m3, 102, H2O, C7 など）

・上付き sup要素｜下付き sub要素

（３）視覚的な表現（「重要性」等は含まない）

・どちらも他のテキストと区別したい文字をマークアップ

・b要素・・・キーワードや製品名等、印刷時に太字

・i要素・・・声や思ったことなど、印刷時に斜体

実習 8-2 各要素の表示を確認する

・文字に意味を与える要素について HTML ファイルを作成し、表示を確認し

よう。


<!DOCTYPE html>

<html>

<head>


<title>文字に意味を与える要素</title>


</head>

<body>

<h1>文字に意味を与える要素</h1>

<h2>強調する</h2>

<p>em 要素 <em>em タグでマークアップしています</em></p>

<p>strong 要素 <strong>strong タグでマークアップしています

</strong></p>

<h2>上付き、下付き</h2>

<p>sup 要素平方メートル m<sup>2</sup> 立方メートル

m<sup>3</sup></p>

<p>sub 要素水の分子 H<sub>2</sub>O セブンスコード

C<sub>7</sub></p>

<h2>視覚的な表現</h2>

<p>b 要素 <b>b タグでマークアップしています</b></p>

<p>i 要素 <i>i タグでマークアップしています</i></p>

</body>

</html>

スタイルシート style08-02.css は次のページ


@charset "UTF-8";

h1 { border-left: 20px solid #ff6633;

padding-left: 10px;

font-size: 20px;

}

h2 { margin-left: 20px;

border-left: 20px solid #66ff33;

padding-left: 10px;

font-size: 16px;

}

p { margin-left: 30px;

}

３引用や出典を表す

・引用を表現する３つの要素 blockquote要素、q要素、cite要素

（１）blockquote 要素

・まとまった文章を引用するとき

・ブロックレベルの性質

前後で改行される＋左インデント

（２）q 要素

・語句単位の引用

・インラインの性質、斜体で表示される（ブラウザの種類によって変化）

・HTML5では引用元の URLを cite属性で定義するようになった

（例）

<q cite=”http://www.can2.sakura.ne.jp/vs/webkiso.php">

（３）cite 要素

・HTML5では、作品のタイトル（映画、書籍、ゲーム、絵画 etc.）

・HTML4.01では、引用元、作者名等にも使う

（４）mark 要素

・目立たせたいテキストをマークアップ背景に色が付く

実習 8-3 引用や出典の要素について表示確認

・引用や出典を表す要素について HTML ファイルを作成し、表示を確認しよ

う。


<!DOCTYPE html>

<html>

<head>


<title>引用や出典を表す要素</title>


</head>

<body>

<h1>引用や出典を表す要素</h1>

<h2>引用 blockquote 要素</h2>

<p>以下の文章は blockquote タグでマークアップしています</p>

<blockquote>

「ではみなさんは、そういうふうに川だと言われたり、乳の流れたあとだと

言われたりしていた、このぼんやりと白いものがほんとうは何かご承知で

すか」先生は、黒板につるした大きな黒い星座の図の、上から下へ白くけぶ

った銀河帯のようなところを指しながら、みんなに問いをかけました。

カムパネルラが手をあげました。それから四、五人手をあげました。ジョ

バンニも手をあげようとして、急いでそのままやめました。たしかにあれが

みんな星だと、いつか雑誌で読んだのでしたが、このごろはジョバンニはま

るで毎日教室でもねむく、本を読むひまも読む本もないので、なんだかどん

なこともよくわからないという気持ちがするのでした。

</blockquote>

<h2>語句単位の引用 q 要素</h2>

<p>以下の２つのキーワードは q タグでマークアップしています</p>

<q>カムパネルラ</q>

<q>ジョバンニ</q>

<h2>作品のタイトル cite 要素</h2>

<p>以下の２つのキーワードは cite タグでマークアップしています

</p>

<cite>作品名「銀河鉄道の夜」</cite>

<cite>作者名︓宮沢賢治</cite>

<h2>目立たせたいテキスト mark 要素</h2>

<p>この後の《》内を mark タグでマークアップしています。《<mark>

この部分を強調</mark>》</p>

</body>

</html>

スタイルシート style08-03.cssはページまたがっていますので気を付けてコ

ピー＆ペーストして下さい。


@charset "UTF-8";


padding-left: 10px;

font-size: 20px;

}



padding-left: 10px;

font-size: 16px;

}

p, q, cite { margin-left: 30px;

}

４強制改行と水平罫線

（１）強制改行 <br> （XHTML では <br />）

（２）水平罫線 <hr> （XHTML では <hr />）

・テーマや話題の区切り

・HTML4.01までは、装飾的な水平線

実習 8-4 強制改行と水平罫線の表示

・以下の HTMLファイルを作成し、強制改行と水平罫線の機能を確認しよう。


<!DOCTYPE html>

<html>

<head>


<title>強制改行と水平罫線</title>


</head>

<body>

<h1>強制改行と水平罫線</h1>

<h2>強制改行 br タグ</h2>

<p>以下の文章の途中、br タグで改行しています。</p>

<p>

「ではみなさんは、そういうふうに川だと言われたり、乳の流れたあとだと

言われたりしていた、このぼんやりと白いものがほんとうは何かご承知で

すか」先生は、黒板につるした大きな黒い星座の図の、上から下へ白くけぶ

った銀河帯のようなところを指しながら、みんなに問いをかけました。

<br>

カムパネルラが手をあげました。それから四、五人手をあげました。ジョ

バンニも手をあげようとして、急いでそのままやめました。たしかにあれが

みんな星だと、いつか雑誌で読んだのでしたが、このごろはジョバンニはま

るで毎日教室でもねむく、本を読むひまも読む本もないので、なんだかどん

なこともよくわからないという気持ちがするのでした。

</p>

<h2>水平罫線 hr タグ</h2>

<p>以下の２つの段落の間に hr タグで水平罫線を表示しています。

</p>

<p>作品について︓未定稿のまま死後発見された童話。昭和２年ごろの作

と推定されている。初出『宮沢賢治全集』第三巻（文圃堂、昭和９年）。貧

しいジョバンニと友人を助けるために死んだカムパネルラ、二人の少年は

銀河鉄道に乗って幻想的な宇宙を旅する。</p>

<hr>

<p>宮沢賢治︓岩手県花巻に生まれる。盛岡高等農林農学科に在学中に日

蓮宗を信仰するようになる。稗貫農学校の教諭をしながら、詩や童話を書い

た。「春と修羅」は生前刊行された唯一の詩集。農民の暮らしを知るように

なって、農学校を退職し、自らも開墾生活をしつつ羅須地人協会を設立し、

稲作指導をしたり、農民芸術の必要を説いた。</p>

</body>

</html>


@charset "UTF-8";


padding-left: 10px;

font-size: 20px;

}



padding-left: 10px;

font-size: 16px;

}

p, hr { margin-left: 30px;

}

５情報の削除と修正

（１）del 要素

・削除された情報であることを示す

・取り消し線が追加される

（２）ins 要素

・追加された情報であることを示す

・下線が表示される

実習 8-5 情報の修正と削除

・以下の HTML ファイルを作成し、情報の削除と追加の要素がどのように表

示されるか確認しよう。


<!DOCTYPE html>

<html>

<head>


<title>情報の修正と削除</title>


</head>

<body>

<h1>情報の修正と削除</h1>

<h2>情報の削除 del 要素</h2>

<p>以下の文章の【】内は del タグでマークアップしています。</p>

<p> 【<del>もうすぐ開催</del>間もなく開催】夏のスペシャル・オー

プンキャンパス</p>

<h2>情報の追加 ins 要素</h2>

<p>以下の文章の【】内は ins タグでマークアップしています。</p>

<p>【<ins>楽しく</ins>体験しよう】夏のスペシャル・オープンキャ

ンパス</p>

<p>

</p>

</body>

</html>


@charset "UTF-8";


padding-left: 10px;

font-size: 20px;

}



padding-left: 10px;

font-size: 16px;

}

p { margin-left: 30px;

}

● 質疑・応答 ●

● まとめ ●

様々な要素

・見出しと段落

・文字に意味を与える

・引用、出典

・強制改行、水平罫線

・情報の削除と修正

＜テーマ＞ html の役割（3 · 2016. 7. 15. · 実習8-1...

Documents