HTML5 デザインと Modification_html5 チュートリアル スキルのいくつかのページ例を共有する

HTML5 の新しいセマンティック要素を理解し、慣れるための最良の方法は、古典的な HTML ドキュメントを例として取り上げ、それを HTML5 の新しい要素で強化することです。以下は変換するページです。このページは非常に単純で、記事が 1 つだけ含まれています。

ApocalypsePage_Original.html、これは非常に標準化された形式のページであり、すべてのスタイルは外部スタイル シートから取得されます。

XML/HTML コードコンテンツをクリップボードにコピー

1. /span>>
2. html lang="zh- CN「>
3. 頭>
4. meta charset="utf- 8">
5. タイトル>地獄の黙示録タイトル>
6. リンク rel="スタイルシート" href="ApocalypsePage_Original.css">
7. 頭>
9. ボディ>
10. div class="ヘッダー" >
11. h1>世界はどのように終わるのかh1>
12. p クラス=「ティーザー」 >私たちが知っている人生の終わりを告げるシナリオp>
13. p クラス="署名" >by Ray N. Carnationp>
14. div>
16. div class="コンテンツ" >
17. p>スパン クラス="LeadIn">現在span>、おそらくとても良い気分です。 結局のところ、先進国の生活は快適ですスパン クラス="style1">—スパン>おそらく有史以来、平均的な人間よりも快適です。p>
18. p>しかし、独りよがりになりすぎないでください。 すべてがバラバラになる可能性のある恐ろしい方法がまだたくさんあります。 この記事では、お気に入りのいくつかについて説明します。p>
20. h2>マヤ終末期h2>
21. p>懐疑派は、マヤ暦が単に新しい 5,126 年の時代に移行するだけだと示唆しています2012 年以降であり、実際に生命を終わらせる黙示録を予測するものではありません。 しかし、大昔に滅びたマヤ人が他のすべてのことについて事実上間違っていたことを考えると、なぜこの件に関して彼らを信頼する必要があるのでしょうか?p>
23. h2>ロボット乗っ取りh2>
24. p>吸血鬼の乗っ取りやリビングデッドの乗っ取りほど恐ろしいものではありませんが、ロボットの反乱は今でも不穏な考えです。 私たちはすでにテクノロジー機器の多さに圧倒されており、ビル・ゲイツですら、日本の奴隷が足首をつかんでひっくり返し、（適切なロボットの声で）「今、あなたのお父さんは誰ですか？」と尋ねる日を恐れています。 /p>
26. h2>原因不明の特異点h2>
27. p>宇宙がどのように始まったのかはわかりません。それはきっと今日だけで終わるわけではないし、もしかしたら反物質のパフとわずかなシュワシュワという音以外にエキサイティングなものは何もないかもしれない。p >
29. h2>暴走する気候変動 h2>
30. p>一部の人には無視されていますが、アル・ゴアの破滅の予言は今でも実現する可能性があります。 もしそうなった場合、私たちは激しい嵐、広範な食料不足、無愛想なエアコン修理業者と戦わなければならないかもしれません。p>>
32. h2>世界的流行h2>
33. p>将来、致死性のウイルスが発生する可能性があります。 病気の原因については予測が異なりますが、候補には、アフリカのジャングルのサル、バイオテロリスト、インフルエンザに感染した鳥や豚、未来から来た戦士、エイリアン人種、抗生物質を多用する病院、吸血鬼、CIA、国連などが含まれています。洗った芽キャベツ。 情報源が何であれ、それは明らかに悪いニュースです。p>
35. div>
37. div class="フッター" >
38. p クラス=「免責事項」 >これらの終末論的な予測は、著者の見解を反映したものではありません。p>
39. p>
40. a href=「当社について。 html">会社概要a>
41. a href=」免責事項。 html">免責事項a>
42. a href="お問い合わせください。 html">お問い合わせa>
43. p>
44. p>Copyright © 2014 p>
45. div>
46. ボディ>
47. html>

CSS 样式表を追加しない前に、結果は次のようになります:

上面は 3 つの

を通過します。 表面は、上部の眉、中央の内容、底部の 3 つの部分に分割されます。

この例では、画面全体の最大解像度が 800 ピクセルに設定されているため、画面上の表示が長くなるのを避けることができます。都

内側のピッチが追加され、脚は全体の底部にあります。

ApocalypsePage_Original.css样式文件内容以下：

XML/HTML コード复制コンテンツ到剪贴板

1. @charset "utf-8"
2. /* CSS ドキュメント */
3. ボディ{
4. /*font-family 安全なフォントを使用するには、最初に特殊、次に一般という原則に従います。
5. 最初に必要なフォントを指定し、次により安全なフォントを指定します。
6. 最後はサンセリフフォントで終わります*/
7. フォントファミリー: "Lucida sans Unicode"、"Lucida Grande"、ジュネーブ、サンセリフ
8. max-width: 800px; /*最大幅は 800 ピクセルを超えません*/
9. }
10. /*ページ上部のタイトル領域のスタイル*/
11. .Header {
12. 背景色: #7695FE; /*任意の色の値を使用できます*/
13. ボーダー: 細い #336699 ソリッド /*オールインワンボーダー属性*/
14. padding: 10px; /* 10 ピクセルのパディング、境界線とコンテンツの間の距離*/
15. margin: 10px; /* 10 ピクセルのマージン、境界線と周囲の要素の間の距離*/
16. text-align: center; /*ヘッダーのテキストは中央に配置されます*/
17. }
18. /*ヘッダーのタイトルh1>スタイル*/
19. .ヘッダー h1{
20. マージン: 0px;
色: 白;
21. font-size: xx-large; /*正確な制御はピクセルまたは em 単位で実行できます*/
22. }
23. /*ヘッダーサブタイトルのスタイル*/
24. .Header .Teaser{
25. マージン: 0px;
フォントの太さ: 太字
}
/*ヘッダーの署名行のスタイル*/
.Header .Byline{
フォント スタイル: イタリック体
フォントサイズ: 小;
31. マージン: 0px;
}
.Content{
フォントサイズ: 中;
フォントファミリー: Cambria、Cochin、Georgia、「Times New Roman」、Times、セリフ
/*左右のパディングの最大値*/
パディングトップ: 20px;
37. パディング右: 50px;
38. パディングボトム: 5px;
パディング左: 50px;
39. line-height: 120%; /*隣接する 2 つのテキスト行間の距離*/
40. }
41. .Content .LeadIn{
42. フォントの太さ: 太字
43. フォントサイズ: 大
44. フォント バリアント: 小文字
45. }
46. .Content .h2{
47. カラー: #24486C;
マージン-ボトム: 2px;
48. フォントサイズ: 中;
49. }
50. .Content p{
51. マージントップ: 0px;
}
52. .フッター{
53. テキスト配置: 中央;
54. フォントサイズ: x-small;
}
.フッター .免責事項{
フォント スタイル: イタリック体
}
.フッター p{
余白: 3px;
60. }
このようにして、スタイルシートが曲げられました。結果はどうなるか見てみましょう。以下に示すように:

HTML5 を使用してページを構築します

Web デザインでは依然として必須の要素であり、ページ上の任意のブロックにスタイルを適用できる直感的で多用途のコンテナーです。しかし、

の問題は、それ自体がページに関する情報を反映していないことです。
HTML5 でこの状況を改善するには、

をより説明的なセマンティクスを持つ要素に置き換えます。

ApocalypsePage_Revised.html では、Header と Footer および

のクラス属性が

と

に置き換えられています。

XML/HTML コード

コンテンツをクリップボードにコピー

1. ヘッダー>
2. h1>世界はどのように終わるのかh1>
3. p クラス=「ティーザー」 >私たちが知っている人生の終わりを告げるシナリオp>
4. p クラス="署名" >by Ray N. Carnationp>
5. ヘッダー>
6. ...
7. フッター>
8. p クラス=「免責事項」 >これらの終末論的な予測は、著者の見解を反映したものではありません。p>
9. p>
10. a href=「当社について。 html">会社概要a>
11. ...
12. p>
13. p>Copyright © 2014 p>
14. フッター>

もちろん、関連する ApocalypsePage_Revised.css ファイルも変更する必要があり、その中の .Header と .Footer がヘッダーとフッターに置き換えられます。

XML/HTML コード复制コンテンツ到剪贴板

1. /*ページ上部のタイトル領域のスタイル*/
2. ヘッダー {
3. 背景色: #7695FE; /*任意の色の値を使用できます*/
4. ボーダー: 細い #336699 ソリッド /*オールインワンボーダー属性*/
5. padding: 10px; /* 10 ピクセルのパディング、境界線とコンテンツの間の距離*/
6. margin: 10px; /* 10 ピクセルのマージン、境界線と周囲の要素の間の距離*/
7. text-align: center; /*ヘッダーのテキストは中央に配置されます*/
8. }
9. /*ヘッダーのタイトルh1>スタイル*/
10. ヘッダー h1{
11. マージン: 0px;
色: 白;
12. font-size: xx-large; /*正確な制御はピクセルまたは em 単位で実行できます*/
13. }
最後に、サンプル ファイルで使用する必要がある要素が 1 つあります。それは、完全な自己完結型コンテンツを表す
要素です。

要素には、タイトル、署名欄、本文などのニュースレポートまたは記事の内容を含める必要があります。

要素を追加した後の構造は次のようになります。

XML/HTML コード

コンテンツをクリップボードにコピー

1. 記事>
2. ヘッダー>
3. h1>世界はどのように終わるのかh1>
4. p クラス=「ティーザー」 >私たちが知っている人生の終わりを告げるシナリオp>
5. p クラス="署名" >by Ray N. Carnationp>
6. ヘッダー>
7. div class="コンテンツ" >
8. p>スパン クラス="LeadIn">現在span>、おそらくとても良い気分です。 結局のところ、先進国の生活は快適ですスパン クラス="style1">—スパン>おそらく有史以来、平均的な人間よりも快適です。p>
9. ...
10. div>
11. 記事>

再设计後，页面结构如下：

用 追加插图

多くのページには写真が含まれています。ただし、図 (図) と図の概念は完全には異なりますが、本文内で言及される場合があります。

一般に、図は浮遊していると考えられ、浮遊図の問題が発生する可能性もあります。次に、文章中の図を追加する HTML マークを、正文の最初の段落と第 2 段落の間の位置に、部分的に次のように記述します。 🎜>

XML/HTML コード

复制コンテンツ到剪贴板

1. ...
2. div class="コンテンツ" >
3. p>スパン クラス="LeadIn">現在スパン>、あなたは...p>
4. div class="FloatFigure" >
5. img src=「人間の頭蓋骨。 jpg" alt=「人間の頭蓋骨」>
6. p>これらの終末論的な事態が発生した場合、あなたは最後まで生き残れるでしょうか
7. シナリオは展開しますか?p>
8. div>
9. p>でも、独りよがりになりすぎないでください。 そこは...p>
10. ...

対応する样式表例:

XML/HTML コード复制コンテンツ到剪贴板

1. .FloatFigure{
2. フロート: 左;   
3. マージン: 0px 20px 0px 0px;   
4. }
5. .FloatFigure p{
6. 最大幅: 300ピクセル;   
7. フォントサイズ: 小;   
8. フォントスタイル: 斜体;   
9. margin-bottom: 5px;   
10. }

下の図はこの例の外面を示しています、插図は第一段文の後に、浮遊は後面の文本の左側、図题の文本の宽度我们制限住了、让题表示很充、

HTML5 では 1 つの

が提供されています。 元素、図题はに配置できます。 中の

元素里，经过改造，代码如下：

XML/HTML コード复制コンテンツ到剪贴板

1. figure クラス="FloatFigure" >
2. img src="人間の頭蓋骨。 jpg" alt=「人間の頭蓋骨」>
3. figcaption>もしこれらの終末論的現象が起こったら、あなたは最後まで生き残れるでしょうか
4. シナリオは展開されますか?figcaption>
5. 図>

もちろん、スタイル シートのセレクターはそれに応じて変更できます。

XML/HTML コードコンテンツをクリップボードにコピー

1. .FloatFigure{
2. フロート: 左;
マージン: 0px 20px 0px 0px;
3. }
4. .FloatFigure figcaption{
5. 最大幅: 300px;
6. フォントサイズ: 小;
フォント スタイル: イタリック体
マージン-ボトム: 5px;
8. }
10. 最後に、タイトルには画像の完全な説明が含まれているため、 要素の alt 属性を削除できます。

を使用してメモを追加します

新しい

要素は、周囲のテキストと密接に関連していないコンテンツを表します。別の関連トピックを紹介したり、本文で述べた点を説明したりできます。広告や関連コンテンツのリンクを配置するためにも使用できます。

次の例はプル引用符として使用されます。この効果を作成するには

要素を使用します。

コードの一部は次のとおりです:

XML/HTML コード

コンテンツをクリップボードにコピー

1. p>... （適切なロボットの声で）「誰ですかあなたのパパは今？」p>
3. 脇 クラス="PullQuote" >
4. img src="quotes_start. png" alt="引用">
5. 宇宙がどのように始まったのかはわかりません。そのため、おそらく今日だけで終わるわけではないとも言えません。   
6. img src="quotes_end. png" alt="引用終了">
7. 脇>
9. h2>原因不明の特異点h2>

对应の样式表内容は次のとおりです：

XML/HTML コード复制コンテンツ到剪贴板

1. .PullQuote{
2. フロート: 右;   
3. 最大幅: 300ピクセル;   
4. ボーダートップ: 薄い 黒い ソリッド。   
5. border-bottom: 厚い 黒い 実体。   
6. font-size: 30px;   
7. 行の高さ: 130%;   
8. フォントスタイル: 斜体;   
9. padding-top: 5px;   
10. padding-bottom: 5px;   
11. margin-left: 15px;   
12. margin-bottom: 10px;   
13. }
14. .PullQuote img{
15. vertical-align: bottom;   
16. }