HTML5/CSS3の勉強

　HTML5を勉強中です、これもHTML5で作成しています（但しテンプレートを使用しています）。
　間違いがあるかも知れませんが御了承ください。

前へ
次へ

１、HTML5でサイトをつくろう

　　「HTML5でサイトをつくろう」を参照させていただきました。
html4→html5変更点
項目 html4 html5
DOCTYPE宣言 
<!DOCTYPE html PUBLIC "-//W3C//DTD 
HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
 
<!DOCTYPE html>
html要素 
<html lang="ja">
 
<html lang="ja">
<head>内
文字コード		 
<meta content="text/html;charset=utf-8" 
http-equiv="Content-Type">
 
<meta content="text/html;charset=utf-8" 
http-equiv="Content-Type">
　　又は 
<meta charset="UTF-8">
<head>内
link css例
省略可		 
<link href="common.css" 
rel="stylesheet" 
type="text/css">
 
<link href="common.css" 
rel="stylesheet">
<head>内
css		 
<style type="text/css">/*cssコード */
</style>
 
<style>/*cssコード */</style>
<head>内
javascript		 
<script 
type="text/javascript">
/* JavaScriptコード */</script>
 
<script>/*JavaScriptコード */</script>
HTML5が対応してないIEに対する対応   次項（※）参照
     

<head>内


（1）（※）HTML5が対応してないIEに対する対応

但し事前に、jsフォルダーに 「html5shiv.js」,「css3-mediaqueries.js」を貼り付けしておく（詳細はgoogleで検索）。

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->

２、HTML5への修正方法

　　「HTML5への修正方法」を参照させていただきました
  • 『type属性の初期値が「text/css」や「text/javascript」となりましたので、metaタグで記載していたstyleタイプの「Content-Style-Type」とscriptタイプの「Content-Script-Type」の記述はできなくなりました。

    そのため、以下の２つの行は削除します』との事。
    <meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

３、HTML5の基本の書き方まとめ

　　「【HTML5入門】今さら聞けない！HTML5の基本の書き方まとめ」を参照させていただきました
  • IE8以下に対応方法が分かり易く書いてあります。
  • サンプルの書き方が記してあります。

４，その他参考にしていただいた記事

５、「HTML5　廃止　変更　追加」タグ及び要素

HTML5で新しく追加された要素

  • <article>・・・自己完結する記事のオプション
  • <nav>・・・・ナビゲーションを示す
  • <section>・・一般的なセクション（部門や部分の事）
  • <aside>・・・補助的なセクション（部門や部分の事）
  • <main>・・・文章のメインコンテンツ（内容物、中身）を示す。
    １ページに１回
    但しInternet explorerは対応してない？
    (main 要素に display:block を指定する必要がある）との事。
    header,footer,nav,article,aside,の子要素の中でmainは使えない。
  • <heder>
  • <footer>
  • <figure>・・・イメージや図画などに使用する

HTML5で廃止された属性

  • <body>の中で「background=""」 は使用出来ないとの事。⇒スタイルシートで代替え。要するに<body>属性はすべて、スタイルシートで書く。
  • <div>の中で「align=""」 は使用出来ないとの事。⇒スタイルシートで代替え。
  • <h1>～<h6>の中で「align=""」 は使用出来ないとの事。⇒スタイルシートで代替え。
  • <head>の中で「profile=""」 は使用出来ないとの事。
  • <hr>の中で「width=""」 「align=""」等は使用出来ないとの事。⇒スタイルシートで代替え。
  • その他<img><li><ol><p><table><tbody><td><th><tr><ul><pre>等の属性は⇒スタイルシートで代替え。
    特に<table>関連要素は、要注意。
  • <script>「language=""」は非推奨。
  • <a>「name」は非推奨。⇒「id」属性を使用。
    ・・id属性ジャンプの書き方・・
<要素名 id="abc">
<a href="#abc">文字列<a>

    テスト例「ジャンプevent」・・・・ＯＫ
    id名の頭はアルファベットを使う事、数字は使わない。
    （nameとidの併記例）
    ●リンク先、<a name="abc" id="abc">ここがABCの位置</a>
    ●リンク元、<a href="#abc">ABCの位置へジャンプ</a>

６、sectionの使い方

参考にしていただいた記事

それによりますと、この要素の中にはh1～h6要素を使って見出しをいれる。

７，結論　

タグ 説　　明
main
  • 主要なコンテンツ部分
  • １ページに１回
article
  • その範囲がセクションの中で独立しており、完結していることを示す、（記事、論説）。
  • １ページに何度でも使える。
  • 必ずしも見出<h1>～<h6>は必要ではない。
nav
  • ナビゲーションの役目に使う
aside
  • 補足情報（関連性の低い情報）、サイドバーに使う手もある。
footer  
section
  • 章を意味する
  • その範囲が一般的な、章・節・項、などを示す。
  • 必ず見出し<h1>～<h6>が必要。
  • レイアウト目的には使用しない、レイアウト目的には<div>を使う。
html5構成委案

非常に参考になる「要素をグループ分け」というYouTube動画がありました。

ページのトップへ戻る