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> <h2>これは<h2>でマークアップしています。</h2> <h3>これは<h3>でマークアップしています。</h3> <h4>これは<h4>でマークアップしています。</h4> <h5>これは<h5>でマークアップしています。</h5> <h6>これは<h6>でマークアップしています。</h6> <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, H 2O, C7 など） ・上付き sup 要素 ｜ 下付き sub 要素 （３）視覚的な表現（「重要性」等は含まない） ・どちらも他のテキストと区別したい文字をマークアップ ・b 要素 ・・・ キーワードや製品名等、印刷時に太字 ・i 要素 ・・・ 声や思ったことなど、印刷時に斜体実習 8-2 各要素の表示を確認する
・文字に意味を与える要素について HTML ファイルを作成し、表示を確認し よう。 ファイル名 ex08-02.html <!DOCTYPE html> <html> <head><meta charset="utf-8">
<title>文字に意味を与える要素</title>
<link href="css/style08-02.css" rel="stylesheet"> </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 ファイルを作成し、表示を確認しよ う。 ファイル名 ex08-03.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>引用や出典を表す要素</title><link href="css/style08-03.css" rel="stylesheet"> </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はページまたがっていますので気を付けてコ ピー＆ペーストして下さい。 ファイル名 style08-03.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, q, cite { margin-left: 30px; }
４ 強制改行と水平罫線
（１）強制改行 <br> （XHTML では <br />） （２）水平罫線 <hr> （XHTML では <hr />） ・テーマや話題の区切り ・HTML4.01 までは、装飾的な水平線実習 8-4 強制改行と水平罫線の表示
・以下の HTML ファイルを作成し、強制改行と水平罫線の機能を確認しよう。 ファイル名 ex08-04.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>強制改行と水平罫線</title><link href="css/style08-04.css" rel="stylesheet"> </head>
<h1>強制改行と水平罫線</h1> <h2>強制改行 br タグ</h2> <p>以下の文章の途中、br タグで改行しています。</p> <p> 「ではみなさんは、そういうふうに川だと言われたり、乳の流れたあとだと 言われたりしていた、このぼんやりと白いものがほんとうは何かご承知で すか」先生は、黒板につるした大きな黒い星座の図の、上から下へ白くけぶ った銀河帯のようなところを指しながら、みんなに問いをかけました。 <br> カムパネルラが手をあげました。それから四、五人手をあげました。ジョ バンニも手をあげようとして、急いでそのままやめました。たしかにあれが みんな星だと、いつか雑誌で読んだのでしたが、このごろはジョバンニはま るで毎日教室でもねむく、本を読むひまも読む本もないので、なんだかどん なこともよくわからないという気持ちがするのでした。 </p> <h2>水平罫線 hr タグ</h2> <p>以下の２つの段落の間に hr タグで水平罫線を表示しています。 </p> <p>作品について︓未定稿のまま死後発見された童話。昭和２年ごろの作 と推定されている。初出 『宮沢賢治全集』第三巻 （文圃堂、昭和９年）。貧 しいジョバンニと友人を助けるために死んだカムパネルラ、二人の少年は 銀河鉄道に乗って幻想的な宇宙を旅する。</p> <hr> <p>宮沢賢治︓岩手県花巻に生まれる。盛岡高等農林農学科に在学中に日
蓮宗を信仰するようになる。稗貫農学校の教諭をしながら、詩や童話を書い た。「春と修羅」は生前刊行された唯一の詩集。農民の暮らしを知るように なって、農学校を退職し、自らも開墾生活をしつつ羅須地人協会を設立し、 稲作指導をしたり、農民芸術の必要を説いた。</p> </body> </html> ファイル名 style08-04.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, hr { margin-left: 30px; }
５ 情報の削除と修正
（１）del 要素 ・削除された情報であることを示す ・取り消し線が追加される （２）ins 要素 ・追加された情報であることを示す ・下線が表示される実習 8-5 情報の修正と削除
・以下の HTML ファイルを作成し、情報の削除と追加の要素がどのように表 示されるか確認しよう。 ファイル名 ex08-05.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>情報の修正と削除</title><link href="css/style08-05.css" rel="stylesheet"> </head>
<body>
<h2>情報の削除 del 要素</h2> <p>以下の文章の【】内は del タグでマークアップしています。</p> <p> 【<del>もうすぐ開催</del>間もなく開催】夏のスペシャル・オー プンキャンパス</p> <h2>情報の追加 ins 要素</h2> <p>以下の文章の【】内は ins タグでマークアップしています。</p> <p>【<ins>楽しく</ins>体験しよう】夏のスペシャル・オープンキャ ンパス</p> <p> </p> </body> </html> ファイル名 style08-05.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; }
