Web デザイン基礎授業ノート 8 < テーマ > HTML の役割 (3) 1 見出しと段落 (1) 要素 <h1> <h2> <h3> <h4> <h5> <h6> <h1> Web サイト全体の総合的な主題 ( テーマ タイトル ) 最重要人間にもコンピューターにも主題が伝わること <h2>~ ページ内の情報に対する見出し階層構造にする ブロックレベルの性質前後で改行され 縦に積まれる (2)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', sansserif; 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 フォルダー内に保存しましょう
2 文字に意味を与える要素 (1) 強調する em 要素 strong 要素 <em> 文字列 </em> <strong> 文字列 </strong> 表示は 斜体 表示は 太字 em 要素 意味を強調する strong 要素 重要性 深刻性 緊急性の意味付け強い強調 (2) 上付き 下付き (m 3, 10 2, H 2 O, C 7 など ) 上付き sup 要素 下付き sub 要素 (3) 視覚的な表現 ( 重要性 等は含まない ) どちらも他のテキストと区別したい文字をマークアップ 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 は次のページ
ファイル名 style08-02.css @charset "UTF-8"; h1 { border-left: 20px solid #ff6633; font-size: 20px; h2 { margin-left: 20px; border-left: 20px solid #66ff33; font-size: 16px; p { margin-left: 30px; 3 引用や出典を表す 引用を表現する 3 つの要素 blockquote 要素 q 要素 cite 要素 (1)blockquote 要素 まとまった文章を引用するとき ブロックレベルの性質前後で改行される + 左インデント
(2)q 要素 語句単位の引用 インラインの性質 斜体で表示される( ブラウザの種類によって変化 ) HTML5 では引用元の URL を cite 属性で定義するようになった ( 例 ) <q cite= http://www.can2.sakura.ne.jp/vs/webkiso.php"> (3)cite 要素 HTML5 では 作品のタイトル ( 映画 書籍 ゲーム 絵画 etc.) HTML4.01 では 引用元 作者名等にも使う (4)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> 以下の2つのキーワードは q タグでマークアップしています </p> <q> カムパネルラ </q> <q> ジョバンニ </q> <h2> 作品のタイトル cite 要素 </h2> <p> 以下の 2 つのキーワードは 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; font-size: 20px; h2 { margin-left: 20px; border-left: 20px solid #66ff33; font-size: 16px;
p, q, cite { margin-left: 30px; 4 強制改行と水平罫線 (1) 強制改行 <br> (XHTML では <br />) (2) 水平罫線 <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> <body>
<h1> 強制改行と水平罫線 </h1> <h2> 強制改行 br タグ </h2> <p> 以下の文章の途中 br タグで改行しています </p> <p> ではみなさんは そういうふうに川だと言われたり 乳の流れたあとだと言われたりしていた このぼんやりと白いものがほんとうは何かご承知ですか 先生は 黒板につるした大きな黒い星座の図の 上から下へ白くけぶった銀河帯のようなところを指しながら みんなに問いをかけました <br> カムパネルラが手をあげました それから四 五人手をあげました ジョバンニも手をあげようとして 急いでそのままやめました たしかにあれがみんな星だと いつか雑誌で読んだのでしたが このごろはジョバンニはまるで毎日教室でもねむく 本を読むひまも読む本もないので なんだかどんなこともよくわからないという気持ちがするのでした </p> <h2> 水平罫線 hr タグ </h2> <p> 以下の2つの段落の間に hr タグで水平罫線を表示しています </p> <p> 作品について : 未定稿のまま死後発見された童話 昭和 2 年ごろの作と推定されている 初出 宮沢賢治全集 第三巻 ( 文圃堂 昭和 9 年 ) 貧しいジョバンニと友人を助けるために死んだカムパネルラ 二人の少年は銀河鉄道に乗って幻想的な宇宙を旅する </p> <hr> <p> 宮沢賢治 : 岩手県花巻に生まれる 盛岡高等農林農学科に在学中に日
蓮宗を信仰するようになる 稗貫農学校の教諭をしながら 詩や童話を書いた 春と修羅 は生前刊行された唯一の詩集 農民の暮らしを知るようになって 農学校を退職し 自らも開墾生活をしつつ羅須地人協会を設立し 稲作指導をしたり 農民芸術の必要を説いた </p> </body> </html> ファイル名 style08-04.css @charset "UTF-8"; h1 { border-left: 20px solid #ff6633; font-size: 20px; h2 { margin-left: 20px; border-left: 20px solid #66ff33; font-size: 16px; p, hr { margin-left: 30px;
5 情報の削除と修正 (1)del 要素 削除された情報であることを示す 取り消し線が追加される (2)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> <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> ファイル名 style08-05.css @charset "UTF-8"; h1 { border-left: 20px solid #ff6633; font-size: 20px; h2 { margin-left: 20px;
border-left: 20px solid #66ff33; font-size: 16px; p { margin-left: 30px; 質疑 応答 まとめ 様々な要素 見出しと段落 文字に意味を与える 引用 出典 強制改行 水平罫線 情報の削除と修正