特集

Webデザインやhtml制作に関連する事、最近話題になっているサイトなどをピックアップし、お届けします。

Back Number

今更聞けないWebのギモン!!~DOCTYPE宣言文って何?~

2012年04月05日
今更聞けないWebのギモン!!~DOCTYPE宣言文って何?~

Webページを作成する際に最初に記述する「DOCTYPE宣言文」。
何のためにあるものなのか、理解できていますか?

07

2012年07月17日
気になるWebの動向!~HTML5とCSS3って何が違うの?~

最近よく耳にするHTML5とCSS3は今までのHTMLやCSSと何が違うの?
新たに勉強し直さなければいけないの?

06

2012年07月17日
既存サイトから学ぶWebデザインのコツ ~グローバルナビゲーション~

ユーザがストレスを感じることなく、目的のページにたどり着く為には、どのような事に注意すべきでしょうか。

index_img

2012年09月11日
レイアウトの基本1 ~「整列」~

今回は、Webページをデザインする際に気をつけなければならないレイアウトの基本、「整列」についてご紹介します。

知っておきたい!基本のショートカット ~Photoshop編~

2013年02月12日
知っておきたい!基本のショートカット ~Photoshop編~

今回はよく使うと思われるショートカットをまとめてみました。 普段何気なく使っている人も、まだ知らない便利なショートカットがあるかも?

レイアウトの基本2~繰り返し~

2013年03月08日
レイアウトの基本 2 ~繰り返し~

レイアウトの基本1 ~整列~ に引き続き、第2弾!Webだけでなく、デザインする際の基本である「繰り返し」についてご紹介いたします。

レイアウトの基本3 近接

2013年07月05日
レイアウトの基本 3~「近接」~

レイアウトの基本 第3弾!今回は「近接」についてです。近接とは簡単に言うと、近づける事。これをちょっと気にするだけで直感的にわかりやすいデザインになります。

index_img

2013年07月12日
レイアウトの基本4 ~「関係性」~

関係している物は近づける。関係していない物は遠ざける。
今回は、前回の「近接」の補足になる「関係性」について紹介します。

index

2013年07月12日
夏向けイラスト素材

デジナーレカフェからの御中元!
夏向けのイラストやアイコンの素材を無料でプレゼント。

index_img

2013年07月19日
レイアウトの基本 5 ~白黒配置で目的を明確にする~

レイアウトの基本5は「白黒配置で目的を明確にする」です。
今回は、伝える目的を明確にするレイアウトの方法について、説明したいと思います。

index_img

2013年08月02日
今更聞けないWebのギモン!! ~そもそもHTMLって何?~

言葉は知っていても、何をするのか?何が出来るのか?正体は何?と言う人のために、今回は実はとっても身近なHTMLについて、出来るだけわかりやすい解説で説明したいと思います。

index_img

2013年08月07日
暑中見舞いを作ろう! イラレで作る暑中見舞いレシピ

イラストレータで作るポストカード。
今回は暑中見舞いを作って、皆に送ってしまおうという企画です。

特集一覧ページを見る

Special 特集

catch_balloon

2018年11月13日
【フリー素材】手書きふきだし素材スペシャル Ver.1

今回は3種類の手書きのふきだしです。シンプルで幅広く使えるので、制作物のちょっとしたアクセントにどうぞ。ふきだしの手書き…

Interview インタビュー

index

2014年10月15日
イラストレーターを目指し活動中!~後編~

※今回は少し趣旨を変えて、織田さんのイラストをページにちりばめました。 学校で広告を学び、色々やってみたくなった。 ─ …

Seminar セミナー

短時間で学ぶInDesign初心者講座
2018年11月20日(火) 16:00-18:30

デザイン

InDesign

Technic テクニック

catch_file_034

2018年11月06日
Photoshopブラシを使った簡単な雲の描き方

写真やイラストに雲を描き足したいけど、どうやって描くのか分からない… そんなお悩みに答えます! Step1 雲を描く下準…

Books オススメ書籍

レイアウト、基本の「き」

2018年08月28日
レイアウト、基本の「き」
  • デザイン

デザイン初心者向けのレイアウトの本 初歩的なレイアウトの基礎を 理論的なしっかりとした説明を元に、豊富な図案で説明 全部…

Award アワード

「海の日」ポスターコンクール
2018年12月5日(水) 締め切り

Webページを作成する際に最初に記述する「DOCTYPE宣言文」。
何のためにあるものなのか、理解できていますか?

DOCTYPE宣言文って何?

新人デザイナー 佐藤(以下、佐藤):田中ディレクター、HTMLの一番最初に書いてある英文って何なんですか?

ディレクター 田中(以下、田中)DOCTYPE宣言文のことかな?
HTMLのバージョンや仕様が書かれているやつ?

佐藤:HTMLにバージョンなんてあるんですか?

田中:あるよ。HTML5って聞いたことない?

佐藤:あぁ、最近よく聞きますね!

田中:そのHTML5の前に、いくつかのバーションがあるんだ。

佐藤:へぇ、そうだったんだ。HTMLの仕様っていうのはなんですか?

田中:HTMLでのタグや属性などのルールなどを定義しているものだよ。
例えば「リンクにはa要素を使う」というようなルールだね。

佐藤:それは誰が定義しているんですか?

田中W3Cという機関が管理しているんだ。

佐藤:なるほど。その仕様にも種類があるんですか?

田中:仕様にそって「厳格な書き方」「少し緩い書き方」「少し緩い書き方でフレームを使用する」の3種類かな。
厳格な書き方は大変だから、「少し緩い書き方」を定義する事が多い。

佐藤:へぇ、じゃあ最初の英文では、HTMLのバーションと書き方について宣言しているんですね。

田中:そうだね。あとは書き方によってブラウザの表示モードが変わったりもするよ。

佐藤:表示モード?

田中:ブラウザの表示の仕方には大きく分けて「標準モード」と「互換モード」2つのモードがあるんだ。

佐藤:表示モードが違うとどうなるんですか?

田中:CSSで指定した時の表示方法が変わってくる。
CSSでデザインをするなら、仕様通りに正しく表示される「標準モード」を使った方が良いね。

佐藤:うーん、なるほど・・・。

田中:詳しくは「DOCTYPE スイッチ」と検索すると出てくると思うよ。

佐藤:分かりました!

まとめ

DOCTYPE宣言文では、使用するHTMLのバーション、仕様を宣言します。
書き方によって、ブラウザの表示モードを切り替えます。

さらに詳しく!HTMLの仕様の種類って?

DTD(Document Type Definition)、日本語にすると文書型定義といい、HTMLで使用することができるタグや属性、要素の配置に関するルールなどを定義しているものです。以下の3つの種類があります。

Strict DTD
HTML4.01本来の記述に厳格に従う。非推奨の要素やフレームを使うことが出来ません。
記述例
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
Transitional DTD
要素の位置など比較的甘い記述ができますが、フレームを使うことが出来ません。
現在最も一般的に使われているバージョンです。
記述例
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
Frameset DTD
Transitional DTDにフレームの使用を加えた宣言です。
記述例
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
さらに詳しく!互換モードと標準モード

主に2種類、FirefoxやSafariなどの一部ブラウザでは3種類のモードがあり、ブラウザでの表示の仕方が異なります。

互換モード(後方互換モード)
過去のバージョンのブラウザと互換性のある表示モード。
文法ミスはある程度許容され、ブラウザがうまくカバーして表示されます。
ただし、HTMLやCSSを正しく書いていてもブラウザ独自の解釈で表示され、文字サイズやレイアウトなどが制作者の意図と異なってしまう場合があります。
標準モード(標準仕様準拠モード)
文法ミスが無視されますが、標準仕様通りにHTML,CSSを書けば正しく表示されます。
Web標準でWebページを表示したい場合はこのモードを使用します。
準標準モード
標準モードの表示をベースに互換モードにも配慮し、なるべく昔のWebページの表示も崩さないように考えられたモードです。
Firefox、Safariなど一部のブラウザに搭載されています。
記事担当者のコメント
英文でとっつき難いイメージのあるDOCTYPE宣言文ですが、使用するHTMLに合わせて適切なDOCTYPE宣言文を指定することによって、ブラウザが仕様通りにHTMLを解釈してくれます。
コーディングの際のトラブルを防ぐ事が出来ますので、正しく理解しておきたいですね。