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の無料テンプレート「STINGER」。こんなに自由にカスタマイズ可能!

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

2015年初売り福袋合戦!正月特設サイトでWebデザインを学ぼう!

2014年ももうすぐ終わりですが何も思い起こす事はありませんか?大掃除や年末ジャ …

Illustratorが無料!?イラストレーターの機能を持ったフリーソフトまとめ

イラスト作成ソフトは、写真やイラストなどを編集しポスターや名刺、フライヤーような …

話題のLINEクリエイターズスタンプを作ってみた【その4】

LINEスタンプの記事は以前にも紹介(参考)しておりますが今回も僕が作成したLI …

【配色】おすすめ配色ツール・カラーチャートで美しい色選択を!

Webデザイナーとしてホームページやバナーなどを制作しているのですが、どうしても …

ホームページ制作の流れって?(前編)

ホームページ作成にあたって、お客様との間で必ず打ち合わせを行います。大体のホーム …

【参考】Webデザイナーのポートフォリオサイト!転職に活かせるポートフォリオを大公開

今回の記事はWebデザイナーを目指している方、Webデザイナー職に転職を考えてい …

当サイト経由でホームページ、フライヤー制作の受注が入った。

「メディアサイトを立ち上げて良かったこと、悪かったこと」でも触れましたがサイト運 …

デザイナーは参考にしよう!オシャレな年賀状まとめ【企業編】

さて、今年も残すところ1ヶ月を切りました。皆さんの2014年はどんな年でしたか? …

Message

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

CAPTCHA