■HTML5 ◆概要 HTMLは、Hyper Text Markup Language(ハイパーテキスト・マークアップランゲージ）の略で、リンク可能な飾りづけ文書を記述する言語である。 HTML5は、Web技術の標準化団体であるW3Cが策定を進めている次世代のHTML規格で、2012年12月にHTML5仕様策定が完了し、2014年に最終勧告が予定されている。 それでも、W3Cの勧告の有無に関わらず、各ブラウザのHTML5実装は日に日に進んでいるため、W3Cの勧告は現状追認という形態として発表されることが見込まれている。 ◆Content-Type 拡張子は、「.html」や「.htm」を用い、Content-Typeは「text/html」を用いる。 ◆DOCTYPE ファイルの先頭にこの宣言を記載する DOCTYPEは「html」となり、宣言は下記の通りになる。 大文字、小文字は区別されないので、下記の通りでも良い。 ファイルの先頭にこの宣言があるかどうかで、Webブラウザはパーサー（解析）やレンダリング（描画）モードをHTML5に対応したものに切り替えるため、必ず記載する。 ◆タグ "<"と">"で囲まれた要素の種類や構造を表すマーク。 原則として「開始タグ」と「終了タグ」の２つをセットとして扱い、「開始タグ」と「終了タグ」の間に要素のデータを格納する。 大文字、小文字は区別されないので、自由に記載しても良いが、小文字を用いるケースが多い。 半角と全角は完全に別の文字と判断されるし、タグ自体は必ず半角でなければならないので注意する。 例：〜 また、「終了タグ」の存在しないタグも存在する。 例：
、、、 この場合xml表記では、 例：
、、、 のような表記をすることが推奨されているが、HTML5においては特にこだわる必要はない。 また、xml表記では、 例：
〜
のように「終了タグ」を記載することも可能とされているが、推奨されているわけでもないので特に記載する必要はない。 更に細かくタグの効果を指定したり、体系的な指示を付け加える場合は、タグ内に「属性（アトリビュート）」をつける。 タグ内に「属性」を記載する場合は、その「属性」の前に半角スペースを加える。 例： 「属性」は多くの場合、「属性値（具体的な値）」を持ち、基本的に""（ダブルクォーテーション）で囲む。 例： ただし、「属性値」が半角の英数記号等の場合は""（ダブルクォーテーション）の省略ができる。（全角でも省略可能なブラウザが多くなったようだ） 例： ◆htmlタグとheadタグとbodyタグ HTMLが記載されるエリアは全て「htmlタグ」内（〜）とする。 この「htmlタグ」内は、head領域とbody領域に分けられる。 head領域は「headタグ」で囲い（〜）、body領域は「bodyタグ」で囲う（〜）。 例： 「htmlタグ」、「headタグ」、「bodyタグ」のいずれも省略可能。 例： DreamHopeのサイトへようこそ！！ ◆コメント ""で囲まれた範囲をcomment要素と言い、「HTMLとしてのコメント」として取り扱うことができる。 逆に言うと、StyleやJavaScriptとしては、""で囲まれた範囲をコメントとして取り扱わないということとなる。 かつてCSSやJavaScriptを用いるときに良く利用された、 や は、CSSやJavaScriptが動作しないブラウザにおいて、そのCSSやJavaScriptコードをHTMLとしてのコメントとして動作しないようにしていたのである。 HTML5においては、CSSやJavaScriptが前提となるため、このような使い方をする必要性はない。 けれど、業務においてサポートしなければならないブラウザが必ずしもHTML5に対応しているとは限らないので、ケースバイケースで記述の有無を判断する必要がある。 ◆metaタグ metaタグは「headタグ」内（～）に付加的情報の記載をする。 meta要素はプロパティとその値の指定の組み合わせで使用する。 例： ◆charset 文字エンコーディングの指定方法は要素で行う。 例： このcharsetで指定した文字コードを用いて「以降」の文字を認識していくため、charsetを指定する前に１バイト文字以外が出現しないようにする ✕悪い例： JavaScriptサンプル ・・・ 問題点：「サンプル」という日本語文字がcharsetの指定の前に出現してしまっているため文字化けを起こす可能性がある。 ◆header、nav、article、section、aside、footerタグ HTML5から導入された、それぞれの領域を表すタグ HTML4.01の時代はあらゆる要素を
で囲んでいたため、HTML全域にdivタグが氾濫し、とても読みにくいものとなっていた。 HTML5では、よく使われる（原則として文章構成要素として必須な）要素を具体的な名称タグでまとめることにより、文書の構成をわかりやすく表現することを目指した。 　header:文書のヘッダ情報（タイトル等）が含まれる領域 　nav:セクションの一つで、ナビゲーションメニュー（目次領域）が含まれる領域 　article:セクションの一つで、文書の主題たる記事が含まれる領域 　aside:セクションの一つで、補足情報（関連情報等）を表す領域 　section:ひとまとまりの文書を表す領域（タイトルがつけられるような１グループ）で汎用的なセクションとして用いる 　footer:文書のフッタ情報（著作権表記等）が含まれる領域 例：

誘導なび


誘導なびは、誘導するユーザが誘導されるユーザをナビゲーションするサービスです！

小関語録


日系ブラジル人の生徒の遅刻がひどく、小関先生は父親に電話をした。
父親は純粋なブラジル人で、どうも日本語がほとんど話せないらしい。
電話口にて「わた〜しぃ〜、にふぉんごぅ、わっかりまふぇ〜ん」という。
仕方なく、遅刻の説明は諦め、本人に電話を変わってもらい、自分で父親に説明するよう指示をした。
しばらくして、懇談のときに、その生徒の父親が来校した。
ところがなんと、驚くべきことに、その父親は普通に日本語を話すではないか！！
小関先生は日系ブラジル人の生徒を職員室に呼び出し、机をバンと叩きながら叫んだ！
「お前は、、、」
「お前は、俺の目を『ふしだら』だと思ってるのか！！」
・・・
またたく間に職員室は爆笑の渦に包まれた。。。
・・・
私は生まれて初めて、自分の「腹筋がちぎれる音」を聞いた。
◆scriptタグ scriptタグは、下記４通りのいずれかの場所に記載する。（の外でも、の下でも動いたような気がするが） 「headタグ」内（～） 「headタグ」内に「外部ファイル」がJavaScriptと指定（） 「bodyタグ」内（～） 「bodyタグ」内の「別途タグ」内（） scriptタグの属性は下記の通りとなる。 src:外部スクリプトファイルのURLを指定 async:src属性が指定されている場合、利用可能な時点でスクリプトを実行 defer:src属性が指定されている場合、HTML文書を読み込んだ時点でスクリプトを実行 type:スクリプトのMIMEタイプを指定（初期値は"text/javascript"のため、textでJavaScriptが記載されたScriptなら省略可能） charset:外部スクリプトファイルの文字エンコーディングを指定 例： ✕悪い例：

bar

問題点：bodyが読み込まれる前段階で「id="foo"」の要素の中身を参照しようとしているが、まだブラウザが知らない値なのでNullとなる。 ❍良い例

bar

解決点：body内のp要素「id="foo"」の中身が読み込まれてから参照するため、正常に出力できる ✕悪い例： ファイル名：foo.js ファイル内容：alert(document.getElementById("foo").innerHTML);

bar

問題点：bodyが読み込まれる前段階で「id="foo"」の要素の中身を参照しようとしているが、まだブラウザが知らない値なのでNullとなる。 ❍良い例 ファイル名：foo.js ファイル内容：alert(document.getElementById("foo").innerHTML);

bar

解決点：defer要素の指定があるため、body内のp要素「id="foo"」の中身が読み込まれてから参照するため、正常に出力できる