Eggs of Designer

新宿在住の現役WebデザイナーがWeb・デザイン・SEO・アフィリエイト・ダイエット・生活・人生などについて気ままに語ります。

HTMLの謎①〜DOCTYPE宣言とは?〜

web制作関連

フリーランスで仕事が欲しいならここ

      2015/07/21

macbook-pro-backlit-keyboard1-800x533

ホームページ制作をするにあたって必ず耳にするのがHTMLCSSと呼ばれるプログラム言語です。世の中のWebデザイナー(コーダー)は最初の段階で上記の言語を勉強します。HTMLとCSSを理解していればホームページを制作する事が可能です。

本日はHTMLの謎という事で「DOCTYPE宣言」について紹介します。初心者の方も、深く考えた事なかった方もこれを機にマスターしちゃいましょう!

DOCTYPE宣言とは?

DOCTYPE宣言とは、その文書がどのバージョンのHTMLで、どの仕様にそって作られているのかをあらわしています。自分が作成したHTML文書が標準に従って正しく作成さていることを宣言するものです。HTML5以前はW3C(HTMLの規格を制定する機関)のもとDOCTYPE宣言文でHTMLのバージョンや文書型定義について宣言することが必須でした。※HTML5では文書型定義はなくなりました。

どこに記述するの?

DOCTYPE宣言は、ページの一番最初(<html>タグの前)に記述する必要があります。

例)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
・・・
<html>
<head>

それぞれ文書型名、外部識別子、公開識別子、システム識別子呼ばれています。

DOCTYPEの3つのタイプ

DOCTYPEには、下記の3つのタイプがあります。

  1. Strict … HTML4.01のルールに厳密かつ正確に従う指定
  2. Transitional … Strictより緩やかな指定(フレームは不可)
  3. Frameset … Transitionalにフレームを加えた指定

Strictタイプの宣言方法

■URIを含めた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
■URIを省いた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Transitionalタイプの宣言方法

■URIを含めた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
■URIを省いた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 

Framesetタイプの宣言方法

■URIを含めた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
■URIを省いた指定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
 

ブラウザの表示モード(標準モードと互換モード)

一般的なブラウザには、「標準モード」「互換モード」という2つの表示モードが備わっています。標準モードと互換モードでは、ブラウザの解釈の違いにより、表示のされ方も多少違います。この表示モードは、DOCTYPE宣言の記述に URL(URI) を含めるかどうかによって、自動的に切り替わる仕組みになっています。どのブラウザでも標準モードで表示するには、「HTML4.0以上」「システム識別子(DTDのURL)」を記述する必要があります。 「DOCTYPE宣言」そのものが無い場合は互換モードになる様です。

参考サイト

DOCTYPE宣言について

「グラフィックデザイナーのためのCSSレイアウトメモ」

終わりに

いかがでしたか?深く考えた事がなかった人もなるほど!となったのではないでしょうか?つまりはHTMLコーディングする際の一番最初のおまじない的なものと考えて良さそうですね。意味を理解する必要はないので、あ〜こんなのあったなと頭の片隅に置いといて下さい。

  関連記事

記事を人気順に並べるプラグイン!『WordPress Popular Posts』

WordPressには便利なプラグインが多数存在します。プラグインの導入によって …

WordPressの無料テンプレート「STINGER」。こんなに自由にカスタマイズ可能!

目次1 はじめに1.1 こんな意見も2 STINGERとは?2.1 STINGE …

ロゴ制作に役立つ情報。企業ロゴに隠された意味・秘密・狙い【PCメーカー編】

企業ロゴを見渡すととてもユニークな物が多いです。デザイナーはセンスだけでデザイン …

おしゃれなWEBデザインを集めた参考サイトを紹介!WEBデザインは見て勉強。

Webデザインをこれから勉強しようと思っても、実際どこから初めていいかわからない …

おすすめのフリー素材サイト(写真、画像、背景、アイコン等)を集めてみた

ホームページやフライヤー、ポスターを作成する際に必ず必要となる素材ですが、皆さん …

バナーやポスター、フライヤー・チラシなど制作におすすめの参考書はこれ

最近仕事でアフィリエイト用のバナーを制作する事が多いのですが、結構頭を使います。 …

WEBデザインに必要不可欠なAdobe Creative Cloud!まずはIllustratorやPhotoshopをマスターしよう!

WEBデザイナーを目指す方は必ず買っておくべきデザインソフトがあります。その名も …

【保存版】バナー制作の参考サイトまとめ!効果が出る・成約につながるバナー制作を

ホームページやランディングページの中身が充実していても、入り口であるバナーが微妙 …

ホームページ制作を業者に依頼する時の注意するべきポイント

Web制作を、業者に頼む人には注意するべきポイントがあります。業者に頼めばホーム …

デザインに参考になる面白い広告30選!広告はアイディアが重要!

広告はアイディアが重要です。限られた時間、スペースの中でユーザーの心に残るもので …

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA