WEB・モバイル専門 人材派遣・紹介(関東/関西/東海)
WEBデザイナー、ディレクター、ネットショップ運営スタッフなどWEBモバイル業務専門の求人情報サイト
職種別 求人情報
Webディレクター
Webデザイナー
htmlコーダー
ネットショップ運営
リスティング運営業務
携帯サイト運営
WEB系一般事務
その他
特集




Profile
森@和恵
r360studio
フリーランスで活動する関西のWebクリエーター。サイトの企画・デザインから制作までをこなします。Web技術に関する講習会やセミナーの講師としても活動しています。Webサイトを作るのも、話すことも大好き。「難しいことでも、わかり易く伝える」をモットーに、クリエーターの立場で得た知識を制作者や講師の立場から、皆さまに役立てていただだければ…と日々精進しています。

Dreamweaver MX 2004 ACI (Adobe認定トレーナー)
そしてmixiやってます。中毒っぽいです。(笑)

最新の記事
FireworksCS3になってどう変わったか?- 其のイチ -
DreamweaverCS3になってどう変わったか?- まとめ
DreamweaverCS3になってどう変わったか?- 其のゴ -
DreamweaverCS3になってどう変わったか?- 其のヨン -
DreamweaverCS3になってどう変わったか?- 其のサン -
DreamweaverCS3になってどう変わったか?- 其のニ -
DreamweaverCS3になってどう変わったか?- 其のイチ -
いよいよ登場!Adobe CS3
HTML文書をXHTML文書に変換するには?
XHTML文書を作る
全ての記事を見る

スタッフ紹介

スタッフコラム

ノウハウコラム


現場で使える Dreamweaver & Fireworks
Webサイト制作の現場ですぐに使えるDreamweaver 8 と Fireworks 8 のテクニックやホットトピックをご紹介します。
XHTML文書を作る

今回のねらい


そろそろ、Webサイトをスタイルシートレイアウトにしたいなぁというあなた。スタイルシートレイアウトで使われるソースコードは、XHTMLとCSSだということをご存知ですか?Web制作の現場では、HTMLからXHTMLへと移行してきているのです。
HTMLの上位バージョンとしてW3Cにより勧告されたXHTML。そのため、XHTMLの基本的な部分はHTMLとさほど違いはありません。ですが、細かなルールが変更されているため実際の制作を行う場合には変更点を留意する必要があります。
Dreamweaver8では、はじめからXHTML文書としてページを作成すれば、記述ルールの違いを気にすることなくHTMLの時と同じようにコーディングすることができます。


今回は、XHTML文書でページを新規作成する場合に必要なことをご紹介します。


ページの新規作成


XHTML文書としてページを作成するには、文書のドキュメントタイプをXHTMLに指定します。




  1. [ファイル]−[新規]を実行します。

  2. [新規ドキュメント]ダイアログボックスで、カテゴリから[基本ページ]、基本ページから[HTML]を選択します。

  3. [新規ドキュメント]ダイアログボックスで、ドキュメントタイプ(DTD)を選択します。現在使用されているドキュメントタイプ(DTD)で最も一般的な「XHTML 1.0 Transitional」を選択します。

  4. [作成]をクリックします。



ドキュメントタイプとは?

ドキュメントタイプとは、その文書が使用するマークアップ言語の種類とバージョンを宣言するもので、文字型定義とも呼ばれます。<!DOCTYPE〜から始まり、言語を使用する前に記述されます。XHTML1.0のドキュメント宣言には、Strict(厳密型)・Transitional(移行型)・Frameset(フレーム設定型)の3種類があります。現時点では、非推奨とされているタグの使用が認められているTransitional(移行型)を使用するWebサイトが一般的です。


ソースコードの確認と追加


作成された文書のソースコードを確認しましょう。また、追加した方がよいコードを記述しましょう。




  1. タイトルバーに(XHTML)と表示されていることを確認します。(この文書がXHTML文書になっているかどうかをタイトルバーで確認することができます。)

  2. ドキュメントツールバーで[コード]をクリックします。


  3. ドキュメントツールバーの表示オプションから、[ワードラップ]と[行番号]にチェックをいれます。


  4. 1行目は、ドキュメントタイプ宣言です。XHTML バージョン1.0 Transitional(移行型)が宣言されています。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  5. 2行目はhtml要素です。xmlns属性で名前空間が指定されています。

    <html xmlns="http://www.w3.org/1999/xhtml">

  6. 2行目に言語指定を追加します。XHTML 文書としては、xml:lang属性で指定すればよいのですが、HTML文書との互換のためにlang属性も指定します。値に指定したjaとは日本語という意味です。
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">



XML宣言について

本来、XHTML文書では、先頭に<?xml〜から始まるXML宣言が必要ですが、XML宣言を行うとInternet Explorer6.0が互換モードで表示されるようになるために記述を省きます。互換モードでは、CSSが文法通りに正しく解釈されずにブラウザでの表示がくずれてしまうというトラブルを起こすためです。現時点では、通常のWebサイトのページでXML宣言がないことでのトラブルは起きないと考えられるので、省いても問題はありません。


環境設定


[環境設定]でドキュメントタイプの初期設定をすることができます。初期設定をしたドキュメントタイプが、新規ページを作成する時に使用されますので、毎回ドキュメントタイプを選ぶ必要がなくなります。




  1. [編集]−[環境設定]メニューを実行します。

  2. [新規ドキュメント]カテゴリを選択します。

  3. [初期設定ドキュメントタイプ]を選択します。
    現在使用されているドキュメントタイプ(DTD)で最も一般的な「XHTML 1.0 Transitional」を選択します。



ファイルの拡張子

Dreamweaver8では、[環境設定]-[初期設定ドキュメントタイプ]カテゴリの「デフォルトの拡張子」で、作成するファイルの拡張子をあらかじめ設定しておくことができるようになりました。


r360studioからのお知らせ



  • 次回は、「HTML文書をXHTML文書に変換するには?」をお届けする予定です。

  • Webサイト制作の現場では、欠かせない存在のブログツールMovableType。MovableTypeのデザインカスタマイズにもDreamweaverが生かせるってご存知ですか?この度、m-schoolさんで「Dreamweaver & Movable Typeによる Webサイト構築の基本」講座を担当します。

  • Mixiやってます。マイミク募集中です!同じ趣味の方、志しの方、マイミク申請くださいませ。

    http://mixi.jp/show_friend.pl?id=60060

お仕事を探す
東京神奈川埼玉千葉 大阪京都奈良兵庫 愛知静岡岐阜

スタッフ登録する
  非公開案件も多数あります。
  登録後にお仕事を探される場合は、まずは登録面接会予約をしてください。
 登録面接会予約 登録から契約までの流れ 派遣スタッフ登録特典

お仕事ランキング

直近のWEBデザイナー


→スケジュール一覧はこちら

新着情報

2012/05/04

コラム更新−【トントンのネットショップ運営繁盛講座】【コンバージョンUP】動画の検討

2012/04/04

コラム更新−【トントンのネットショップ運営繁盛講座】【顧客維持】顧客とネットショップとの人間関係の構築

2012/03/30

コラム更新−【目指せイラストレーターマスターっ!】【チラシに使う写真作成方法:グラデーション】

2012/03/02

コラム更新−【トントンのネットショップ運営繁盛講座】【顧客導線】新たな用途に着目する

2012/02/29

コラム更新−【目指せイラストレーターマスターっ!】【スタンプ風画像を作ってみよう!】

2012/02/06

コラム更新−【トントンのネットショップ運営繁盛講座】【コンテンツ】キーワードの本質

2012/01/31

コラム更新−【目指せイラストレーターマスターっ!】【円グラフを作ろう!】

2012/01/06

コラム更新−【トントンのネットショップ運営繁盛講座】【顧客間コミュニケーション術】

2011/12/29

コラム更新−【目指せイラストレーターマスターっ!】【円グラフを作ろう★】

2011/12/02

コラム更新−【トントンのネットショップ運営繁盛講座】【集客】広告対象の考察

2011/11/30

コラム更新−【目指せイラストレーターマスターっ!】【ラスタライズ】→【モザイク】をやってみよう!

2011/11/04

コラム更新−【トントンのネットショップ運営繁盛講座】【コンテンツ】キーワードの本質

2011/10/31

コラム更新−【目指せイラストレーターマスターっ!】 簡単!線路を作ろう♪

2011/10/08

コラム更新−【トントンのネットショップ運営繁盛講座】【集客】ネットショップYouTube支店

2011/09/02

コラム更新−【トントンのネットショップ運営繁盛講座】【新展開】成熟期における新展開法

2011/08/01

コラム更新−【トントンのネットショップ運営繁盛講座】【選ばれる】Google+1

2011/07/30

コラム更新−【目指せイラストレーターマスターっ!】 【3D効果】立体的なマーブル・ボタン♪

2011/07/01

コラム更新−【トントンのネットショップ運営繁盛講座】スタッフ紹介ページの重要性

2011/06/30

コラム更新−【目指せイラストレーターマスターっ!】葉っぱを使ったデザイン

ご気軽にお問い合わせください。QRコードには、サポタントのTEL/FAX/E-Mailが入っています

/ プライバシーマーク:17000123(03)

サポタント株式会社は、2006年11月、プライバシーマーク使用許諾事業者として認定されました。