【HTML5課題15】PDF表示
○地図のPDFを表示させなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> <script src=""></script> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <h1>地図のPDFを表示</h1> <object data="image/map.pdf" width="600" height="400"> <p><img src="image/map.gif" alt="地図PDFのサムネイル"></p> <p><a href="image/map.pdf">PDFのダウンロード</a></p> </object> </body> </html>
○object要素：外部ファイル・コンテンツを組み込む
○data属性：組み込むファイル・コンテンツのアドレスを指定する
【HTML5課題14】コピーライト表示
○コピーライトを表示させなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> <script src=""></script> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <h1>コピーライトを表示</h1> <p>コピーライトとは著作権という意味です。</p> <p><small>Copyright © studio felica Inc. All Rights Reserved.</small></p> </body> </html>
○small要素：注釈表示を表す（警告・免責事項・法的規制・著作権など）
【HTML5課題13】強調
○本来の文章の意図から離れて強調したい部分を区別して表示させなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> <script src=""></script> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <h1>蛍光ペンである部分を区別</h1> <p>先生はしばらく困ったようすでしたが、眼を<mark>カムパネルラ</mark>の方へ向けて、「では<mark>カムパネルラ</mark>さん。」と名指しました。するとあんなに元気に手をあげた<mark>カムパネルラ</mark>が、やはりもじもじ立ち上ったままやはり答えができませんでした。<br> 先生は意外なようにしばらくじっと<mark>カムパネルラ</mark>を見ていましたが、急いで「では。よし。」と云いながら、自分で星図を指しました。</p> </body> </html>
○mark要素：テキストの一部分を装飾するために用いる
【HTML5課題12】台詞、会話（i要素）
○話している部分を区別して表示させなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> <script src=""></script> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <h1>日記内で人が話している部分を区別</h1> <p>今日はとても暑い日だった。日陰を歩いていたら、近くに居た人の声が聞こえてきた。<br /> <i>「わあ！キレイ・・・！」</i><br /> 思わず声のする方に目をやると、とてもキレイなひまわりが咲いていた。</p> </body> </html>
○i要素：声・台詞・ムード・思考などを表す
【HTML5課題11】日付
○日付を表示させなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> <script src=""></script> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <h1>上野動物園のパンダに赤ちゃんが生まれる</h1> <time datetime="2012-07-06" pubdate="pubdate">2012年7月6日</time> </body> </html>
【HTML5課題10】引用（cite,q,quate,blockquote)
引用を表示させなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5課題02</title> <link rel="stylesheet" href=""> <script src=""></script> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <h1>読書メモ</h1> <p>本のタイトルや気になったフレーズなどをメモしていきます。</p> <cite>引用：グスコーブドリの伝記</cite> <p>グスコーブドリは、<q>イーハトーヴの大きな森のなかに生まれました。</q></p> <blockquote> グスコーブドリは、イーハトーヴの大きな森のなかに生まれました。おとうさんは、グスコーナドリという名高い木こりで、どんな大きな木でも、まるで赤ん坊を寝かしつけるようにわけなく切ってしまう人でした。 ブドリにはネリという妹があって、二人は毎日森で遊びました。ごしっごしっとおとうさんの木を挽ひく音が、やっと聞こえるくらいな遠くへも行きました。二人はそこで木いちごの実をとってわき水につけたり、空を向いてかわるがわる山鳩の鳴くまねをしたりしました。するとあちらでもこちらでも、ぽう、ぽう、と鳥が眠そうに鳴き出すのでした。 </blockquote> </body> </html>
○cite要素：引用元の作品名を表す
○q要素：フレーズの引用を表す
○quote（引用）
○blockquote要素：まとまったかたまりの引用を表す
【HTML5課題09】sup :上付き文字
面積の単位を表示させなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5課題02</title> <link rel="stylesheet" href=""> <script src=""></script> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <h1>面積の単位を表示</h1> <p>１辺の長さが１メートルの正方形の面積は、１m<sup>2</sup>と表します。</p> </body> </html>
○sup :上付き文字
