それぞれの要素がどのようなデザインで表示されるか確認しようファイル名 ex08-01.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> デフォルトスタイルシートの確認 </title> <link href="css

Size: px

Start display at page:

Download "それぞれの要素がどのようなデザインで表示されるか確認しようファイル名 ex08-01.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> デフォルトスタイルシートの確認 </title> <link href="css"

あまめもちやま
5 years ago
Views:

1 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 各要素のデフォルトスタイルシート各要素はブラウザで決められているスタイルで表示される ( 例 : 見出しが大きな文字太字で表示される余白の調整など ) これをデフォルトスタイルシートと呼ぶ自作するスタイルシートで変更できる

2 それぞれの要素がどのようなデザインで表示されるか確認しようファイル名 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 は次ページ

3 ファイル名 "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 フォルダー内に保存しましょう

4 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>

5 <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 は次のページ

6 ファイル名 "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 要素まとまった文章を引用するときブロックレベルの性質前後で改行される + 左インデント

7 (2)q 要素語句単位の引用インラインの性質斜体で表示される( ブラウザの種類によって変化 ) HTML5 では引用元の URL を cite 属性で定義するようになった ( 例 ) <q cite= (3)cite 要素 HTML5 では作品のタイトル ( 映画書籍ゲーム絵画 etc.) HTML4.01 では引用元作者名等にも使う (4)mark 要素目立たせたいテキストをマークアップ背景に色が付く実習 8-3 引用や出典の要素について表示確認引用や出典を表す要素について HTML ファイルを作成し表示を確認しようファイル名 ex08-03.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 引用や出典を表す要素 </title>

8 <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 タグでマークアップしています

9 </p> <cite> 作品名銀河鉄道の夜 </cite> <cite> 作者名 : 宮沢賢治 </cite> <h2> 目立たせたいテキスト mark 要素 </h2> <p> この後の内を mark タグでマークアップしています <mark> この部分を強調 </mark> </p> </body> </html> スタイルシート style08-03.css はページまたがっていますので気を付けてコピー & ペーストして下さいファイル名 "UTF-8"; h1 { border-left: 20px solid #ff6633; font-size: 20px; h2 { margin-left: 20px; border-left: 20px solid #66ff33; font-size: 16px;

10 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>

11 <h1> 強制改行と水平罫線 </h1> <h2> 強制改行 br タグ </h2> <p> 以下の文章の途中 br タグで改行しています </p> <p> ではみなさんはそういうふうに川だと言われたり乳の流れたあとだと言われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか先生は黒板につるした大きな黒い星座の図の上から下へ白くけぶった銀河帯のようなところを指しながらみんなに問いをかけました <br> カムパネルラが手をあげましたそれから四五人手をあげましたジョバンニも手をあげようとして急いでそのままやめましたたしかにあれがみんな星だといつか雑誌で読んだのでしたがこのごろはジョバンニはまるで毎日教室でもねむく本を読むひまも読む本もないのでなんだかどんなこともよくわからないという気持ちがするのでした </p> <h2> 水平罫線 hr タグ </h2> <p> 以下の2つの段落の間に hr タグで水平罫線を表示しています </p> <p> 作品について : 未定稿のまま死後発見された童話昭和 2 年ごろの作と推定されている初出宮沢賢治全集第三巻 ( 文圃堂昭和 9 年 ) 貧しいジョバンニと友人を助けるために死んだカムパネルラ二人の少年は銀河鉄道に乗って幻想的な宇宙を旅する </p> <hr> <p> 宮沢賢治 : 岩手県花巻に生まれる盛岡高等農林農学科に在学中に日

12 蓮宗を信仰するようになる稗貫農学校の教諭をしながら詩や童話を書いた春と修羅は生前刊行された唯一の詩集農民の暮らしを知るようになって農学校を退職し自らも開墾生活をしつつ羅須地人協会を設立し稲作指導をしたり農民芸術の必要を説いた </p> </body> </html> ファイル名 "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;

13 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>

14 <h2> 情報の削除 del 要素 </h2> <p> 以下の文章の内は del タグでマークアップしています </p> <p> <del> もうすぐ開催 </del> 間もなく開催夏のスペシャルオープンキャンパス </p> <h2> 情報の追加 ins 要素 </h2> <p> 以下の文章の内は ins タグでマークアップしています </p> <p> <ins> 楽しく </ins> 体験しよう夏のスペシャルオープンキャンパス </p> <p> </p> </body> </html> ファイル名 "UTF-8"; h1 { border-left: 20px solid #ff6633; font-size: 20px; h2 { margin-left: 20px;

15 border-left: 20px solid #66ff33; font-size: 16px; p { margin-left: 30px; 質疑応答まとめ様々な要素見出しと段落文字に意味を与える引用出典強制改行水平罫線情報の削除と修正

■新聞記事

■新聞記事情報処理 C (P.1) 情報処理 C ホームページ作成入門テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のことテキストエディタの起動 (TeraPad の場合 ) [ スタート ]-[ プログラム ]-[ テキストエディタ ]-[TeraPad] をクリック

それぞれの要素がどのようなデザインで表示されるか確認しよう ファイル名 ex08-01.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> デフォルトスタイルシートの確認 </title> <link href="css

それぞれの要素がどのようなデザインで表示されるか確認しようファイル名 ex08-01.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> デフォルトスタイルシートの確認 </title> <link href="css