マニュアル キャンセル

Dreamweaver でのコーディングについて

  1. Dreamweaver ユーザーガイド
  2. はじめに
    1. レスポンシブ web デザインの基本
    2. Dreamweaver の新機能
    3. Dreamweaver を使用した web 開発 - 概要
    4. Dreamweaver / よくある質問
    5. キーボードショートカット
    6. Dreamweaver の必要システム構成
    7. 機能の概要
  3. Dreamweaver と Creative Cloud
    1. Dreamweaver 設定と Creative Cloud の同期
    2. Dreamweaver での Creative Cloud ライブラリ
    3. Dreamweaver での Photoshop ファイルの使用
    4. Adobe Animate と Dreamweaver の操作
    5. ライブラリから web 用に最適化された SVG ファイルを抽出する
  4. Dreamweaver のワークスペースとビュー
    1. Dreamweaver ワークスペース
    2. ビジュアル開発のための Dreamweaver ワークスペースの最適化
    3. ファイル名またはコンテンツに基づいたファイルの検索 | Mac OS
  5. サイトの設定
    1. Dreamweaver サイトについて
    2. ローカルバージョンのサイトの設定
    3. Publishing server への接続
    4. テストサーバーの設定
    5. Dreamweaver サイトの設定の読み込みおよび書き出し
    6. リモートサーバーからローカルサイトのルートに既存の web サイトを取り込む
    7. Dreamweaver のアクセシビリティ機能
    8. 詳細設定
    9. ファイル転送に関するサイト環境設定の設定
    10. Dreamweaver でのプロキシサーバー設定の指定
    11. Dreamweaver 設定と Creative Cloud の同期
    12. Dreamweaver での Git の使用
  6. ファイルの管理
    1. ファイルの作成およびオープン
    2. ファイルとフォルダーの管理
    3. サーバーからのファイルの取得とサーバーへのファイルの送信
    4. ファイルのチェックインとチェックアウト
    5. ファイルの同期
    6. ファイルの違いの比較
    7. Dreamweaver サイト内のファイルおよびフォルダーのクローク
    8. Dreamweaver サイトでのデザインノートの有効化
    9. Gatekeeper の脆弱性の悪用を防ぐ
  7. レイアウトとデザイン
    1. レイアウト用ビジュアルエイドの使用
    2. CSS を使用したページのレイアウトについて
    3. Bootstrap を使用したレスポンシブな web サイトのデザイン
    4. Dreamweaver でのメディアクエリーの作成と使用
    5. テーブルを使用したコンテンツの表示
    6. カラー
    7. 可変グリッドレイアウトによるレスポンシブデザイン
    8. Dreamweaver 内の Extract
  8. CSS
    1. カスケーディングスタイルシートについて
    2. CSS デザイナーを使用したページのレイアウト
    3. Dreamweaver での CSS プリプロセッサーの使用
    4. Dreamweaver で CSS スタイルの環境設定を行う方法
    5. Dreamweaver での CSS ルールの移動
    6. Dreamweaver でのインライン CSS の CSS ルールへの変換
    7. Div タグの操作
    8. 背景へのグラデーションの適用
    9. Dreamweaver での CSS3 移行効果の作成および編集
    10. コードのフォーマット
  9. ページコンテンツとアセット
    1. ページプロパティの設定
    2. CSS 見出しプロパティおよび CSS リンクプロパティの設定
    3. テキストの操作
    4. テキスト、タグ、属性の検索と置換
    5. DOM パネル
    6. ライブビューでの編集
    7. Dreamweaver でのドキュメントのエンコード
    8. ドキュメントウィンドウでのエレメントの選択および表示
    9. プロパティインスペクターでのテキストプロパティの設定
    10. web ページのスペルチェック
    11. Dreamweaver での区切り線の使用
    12. Dreamweaver でのフォントの組み合わせの追加と変更
    13. アセットを使用した作業
    14. Dreamweaver での日付の挿入と更新
    15. Dreamweaver でのお気に入りアセットの作成と管理
    16. Dreamweaver でのイメージの挿入と編集
    17. メディアオブジェクトの追加
    18. Dreamweaver でのビデオの追加
    19. HTML5 ビデオの挿入
    20. SWF ファイルの挿入
    21. オーディオエフェクトの追加
    22. Dreamweaver での HTML5 オーディオの挿入
    23. ライブラリ項目の操作
    24. Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
  10. リンクおよびナビゲーション
    1. リンクおよびナビゲーションについて
    2. リンク
    3. イメージマップ
    4. リンクのトラブルシューティング
  11. jQuery Widget と効果
    1. Dreamweaver での jQuery UI Widget と Mobile Widget の使用
    2. Dreamweaver での jQuery 効果の使用
  12. web サイトのコーディング
    1. Dreamweaver でのコーディングについて
    2. Dreamweaver のコーディング環境
    3. コーディングの環境設定
    4. コードカラーリングのカスタマイズ
    5. コードの記述と編集
    6. コードヒントとコード補完機能
    7. コードの折りたたみと展開
    8. スニペットでコードを再利用する
    9. 構文チェックコード
    10. コードの最適化
    11. デザインビューでのコードの編集
    12. ページのヘッドコンテンツの操作
    13. Dreamweaver でのサーバーサイドインクルードの挿入
    14. Dreamweaver でのタグライブラリの使用
    15. Dreamweaver へのカスタムタグの読み込み
    16. JavaScript ビヘイビアーの使用(基本操作)
    17. JavaScript に組み込まれているビヘイビアーの適用
    18. XML および XSLT について
    19. Dreamweaver でのサーバーサイド XSL 変換の実行
    20. Dreamweaver でのクライアントサイド XSL 変換の実行
    21. Dreamweaver での XSLT の文字エンティティの追加
    22. コードのフォーマット
  13. 製品間ワークフロー
    1. Dreamweaver への拡張機能のインストールと使用
    2. Dreamweaver のアプリ内アップデート
    3. Dreamweaver での Microsoft Office 文書の挿入(Windows のみ)
    4. Fireworks および Dreamweaver による作業
    5. Contribute を使用した Dreamweaver サイトでのコンテンツの編集
    6. Dreamweaver と Business Catalyst の統合
    7. パーソナライズされた電子メールキャンペーンの作成
  14. テンプレート
    1. Dreamweaver テンプレートについて
    2. テンプレートおよびテンプレートから作成されたドキュメントの認識
    3. Dreamweaver テンプレートの作成
    4. テンプレート編集可能領域の作成
    5. Dreamweaver でのリピート領域およびテーブルの作成
    6. テンプレートの任意の領域の使用
    7. Dreamweaver での編集可能なタグ属性の定義
    8. Dreamweaver でネストされたテンプレートを作成する方法
    9. テンプレートの編集、更新、削除
    10. Dreamweaver での xml コンテンツの書き出しおよび読み込み
    11. 既存のドキュメントでのテンプレートの適用または削除
    12. Dreamweaver テンプレートでのコンテンツの編集
    13. Dreamweaver でのテンプレートタグのシンタックスルール
    14. テンプレート領域のハイライト表示の環境設定
    15. Dreamweaver でテンプレートを使用する利点
  15. モバイルとマルチスクリーン
    1. メディアクエリーの作成
    2. モバイルデバイス向けのページ方向の変更
    3. Dreamweaver を使用したモバイルデバイス向けの web アプリの作成
  16. 動的サイト、ページおよび web フォーム
    1. web アプリケーションについて
    2. アプリケーション開発のためのコンピューター設定
    3. データベース接続のトラブルシューティング
    4. Dreamweaver での接続スクリプトの削除
    5. 動的ページのデザイン
    6. 動的コンテンツソースの概要
    7. 動的コンテンツのソースの定義
    8. ページへの動的コンテンツの追加
    9. Dreamweaver での動的コンテンツの変更
    10. データベースのレコードの表示
    11. Dreamweaver でのライブデータの入力とトラブルシューティング
    12. Dreamweaver でのカスタムサーバービヘイビアーの追加
    13. Dreamweaver を使用したフォームの作成
    14. フォームを使用したユーザーからの情報の収集
    15. Dreamweaver での ColdFusion フォームの作成と有効化
    16. web フォームの作成
    17. フォームエレメントの HTML5 サポート強化
    18. Dreamweaver を使用したフォームの開発
  17. アプリケーションのビジュアル開発
    1. Dreamweaver でのマスターページと詳細ページの作成
    2. 検索ページと結果ページの作成
    3. レコード挿入ページの作成
    4. Dreamweaver でのレコードの更新ページの作成
    5. Dreamweaver でのレコード削除ページの作成
    6. Dreamweaver での ASP コマンドによるデータベースの修正
    7. 登録ページの作成
    8. ログインページの作成
    9. 許可されたユーザーのみがアクセスできるページの作成
    10. Dreamweaver を使用した ColdFusion のフォルダーの保護
    11. Dreamweaver での ColdFusion コンポーネントの使用
  18. web サイトのテスト、プレビュー、パブリッシュ
    1. ページのプレビュー
    2. 複数のデバイスでの Dreamweaver web ページのプレビュー
    3. Dreamweaver サイトのテスト
  19. トラブルシューティング
    1. 修正された問題
    2. 既知の問題

 

 

Web サイト作成に使用される各種コーディング言語の、Dreamweaver でのサポート状況について説明します。

フル機能の Web サイトを設計・開発するために使用される最もポピュラーなプログラミング言語は、フロントエンドについては HTML、HTML5、および CSS で、バックエンドについては、PHP、JavaScript、Java、および jQuery です。

Web サイト全体の外観(フォントや色など)のデザインには、CSS を使用できます。その後、HTML を使用して、画像、テキスト、ビデオ、フォーム、およびその他のコンテンツ要素を挿入し、1 つの Web ページにまとめます。

CSS と HTML を使用して構築できるのは、静的サイトです。ただし、ほとんどの Web サイトでは、何らかのインタラクション(顧客にフォームへの情報入力を求めたり、支払い処理を求めるなど)を行ったり、すべての Web サイト データを保管するためのデータベースを使用する必要が生じます。

これらのバックエンド通信チャンネルを作成するには、データベースと通信するサーバーサイドプログラミング言語(PHPなど)が必要になります。

Dreamweaverでサポートされているプログラミング言語

Adobe Dreamweaver には、テキストの編集機能だけでなく、コードヒントなど、次の言語でのコーディングを支援する各種の機能が備わっています。

  • HTML
  • PHP
  • CSS
  • JavaScript

上記以外の言語(Perl など)は、Dreamweaver の言語固有のコーディング機能ではサポートされていません。例えば、Perl ファイルを作成して編集することは可能ですが、Perl のコードヒントは使用できません。

自動コード修正

指定した基準に従って手入力のコードを自動的にクリーンアップするためのオプションを Dreamweaver で設定できます。ただし、コード書き換えオプションを有効にするか、コードを変更するアクションを実行しない限り、コードが書き換えられることはありません。例えば、「ソースフォーマットの適用」コマンドを使用しない限り、Dreamweaver は、ユーザーが記述した空白や属性の大文字小文字を変更しません。

これらのコード書き換えオプションの一部は初期設定で有効になっています。

Dreamweaver の Roundtrip HTML 機能により、オリジナルの HTML ソースコードのコンテンツと構造を維持したまま、テキストベースの HTML エディターと Dreamweaver を交互に切り替えて、両アプリケーションで同じドキュメントを編集できます。これらの機能は、以下のとおりです。

  • サードパーティ製のテキストエディターを使用して、現在のドキュメントを編集します。

  • 初期設定では、無効なコードであっても、別の HTML エディターで作成または編集したコードが Dreamweaver で変更されることはありません。ただし、コード書き換えオプションを有効にしている場合はこの限りではありません。

  • Dreamweaver で認識されないタグ(XML タグなど)は、それらのタグを検証する基準がないため、修正されません。認識されないタグが別のタグの上にオーバーラップした場合(例えば、<MyNewTag><em>text</MyNewTag></em>))、Dreamweaver はそのタグをエラーとしてマークしますが、コードは書き換えられません。

  • コードビューで無効なコードを黄色でハイライト表示するように Dreamweaver を設定することもできます。ハイライト表示されたセクションを選択すると、プロパティインスペクターにエラーの修正方法が表示されます。

XHTML コード

Dreamweaver では、大半の XHTML 要件を満たすように、新しい XHTML コードの生成や既存の XHTML コードのクリーンアップが行われます。また、その他の XHTML 要件に対応するために必要なツールも用意されています。

注意:

一部の要件は、HTML の各種バージョンの要件と同じです。

以下の表に、Dreamweaver で自動的に満たされる XHTML 要件を示します。

XHTML 要件

Dreamweaver で行われる処理

ドキュメントには、ルートエレメントの前に DOCTYPE 宣言が必要です。この宣言は、XHTML 用の 3 つの DTD(Document Type Definition)ファイル(Strict、Transitional、または Frameset)のいずれかを参照する必要があります。

XHTML DOCTYPE を XHTML ドキュメントに追加します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

または、XHTML ドキュメントにフレームセットがある場合は次のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

ドキュメントのルートエレメントは html にしてください。また、html エレメントは XHTML 名前空間を明示する必要があります。

namespace 属性を html エレメントに追加します。

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

標準ドキュメントには、headtitle、および body 構造エレメントが必要です。フレームセットドキュメントには、headtitle、および frameset 構造エレメントが必要です。

標準ドキュメントには、headtitle、および body エレメントが含まれています。フレームセットドキュメントには、headtitle、および frameset エレメントが含まれています。

ドキュメントのすべてのエレメントは、適切にネストされる必要があります。

<p>This is a <i>bad example.</p></i> <p>This is a <i>good example.</i></p>

正しくネストされたコードを生成します。また、XHTML をクリーンアップするときに、Dreamweaver によって生成されていないコードのネストを訂正します。

すべてのエレメントおよび属性名は、小文字にする必要があります。

生成される XHTML コードの HTML エレメントおよび属性名を小文字にします。また、タグおよび属性の大文字/小文字の設定にかかわらず、クリーンアップ時に小文字にします。

DTD で EMPTY と宣言されているエレメントを除き、すべてのエレメントには終了タグが必要です。

生成するコードに終了タグを挿入します。また XHTML クリーンアップ時に終了タグを挿入します。

空のエレメントには終了タグを付けるか、開始タグの末尾を /> にする必要があります。例えば、<br> は無効です。正しい形式は、<br></br> または <br/> です。空のエレメントは以下のとおりです。areabasebasefontbrcolframehrimginputisindexlinkmeta、および param

XML をサポートしていないブラウザーとの下位互換性のためには、/> の前にスペースが必要です。例えば、<br /> とする必要があり、<br/> ではありません。

生成するコードの空のタグに、終了スラッシュの前にスペースを入れて空のエレメントを挿入します。また、XHTML クリーンアップ時にも同様の操作を行います。

属性を省略して短くすることはできません。例えば、<td nowrap> は無効です。正しい形式は、<td nowrap="nowrap"> になります。

この要件は次の属性に適用されます。checkedcompactdeclaredeferdisabledismapmultiplenoresizenoshadenowrapreadonly、および selected

生成するコードに、完全な属性値のペアを挿入します。また XHTML クリーンアップ時に同様の処理を行います。

注意:HTML ブラウザーが HTML 4 をサポートしていない場合は、完全なフォームで記述されていても、これらのブール値の属性が認識されないことがあります。

すべての属性値は、引用符で囲む必要があります。

生成するコードの属性値を引用符で囲みます。また、XHTML クリーンアップ時に同様の処理を行います。

以下のエレメントには、id 属性と name 属性が必要です。aappletformframeiframeimg、および map。例えば、<a name="intro">Introduction</a> は無効です。正しい形式は、

<a id="intro">Introduction</a> または <a id="section1" name="intro"> Introduction</a> です。

name 属性および id 属性を同じ値に設定する必要があるのは、name 属性がプロパティインスペクターで設定されたとき、Dreamweaver によってコードが生成されたとき、および XHTML をクリーンアップするときです。

列挙型の値を持つ属性の場合、この値は小文字にする必要があります。

列挙型の値は、指定された使用可能な値のリストから得られる値です。例えば、align 属性には、centerjustifyleft、および right の値を使用できます。

生成するコードの列挙型の値を小文字にします。また、XHTML クリーンアップ時に同様の処理を行います。

すべての script および style エレメントには、type 属性が必要です。

HTML 4 以降は type 属性が script エレメントに必須の属性です(HTML 4 以降、language 属性は推奨されなくなりました)。

type 属性および language 属性を、生成するコードの script エレメントに設定します。また、type 属性を style エレメントに設定します。XHTML クリーンアップ時にも同様の処理を行います。

すべての img エレメントおよび area エレメントに alt 属性が必要です。

生成するコードのこれらの属性を設定します。また、XHTML クリーンアップ時に同様の処理を行い、alt 属性のないものをレポートします。

正規表現

正規表現とは、テキスト内の文字の組み合わせを表すパターンのことです。コードの検索に正規表現を使用すると、例えば「var」で始まる行や、数値を含んだ属性値など、概念的な検索対象を指定できます。

以下の表は、正規表現の特殊文字、その意味、および使用例を示しています。この表のいずれかの特殊文字を含むテキストを検索するには、その特殊文字の前にバックスラッシュを付けてエスケープします。例えば、some conditions apply* というフレーズからアスタリスク(*)を検索する場合の検索パターンは、apply\* のようになります。アスタリスクをエスケープしないと、「apply」にアスタリスクが 1 つ付いているパターンではなく、「apply」の出現箇所(および「appl」、「applyy」、「applyyy」などの出現箇所)がすべて検索されてしまいます。

文字

意味

^

入力または行の始め

^T は、「This good earth」の「T」を検索しますが、「Uncle Tom’s Cabin」の「T」は無視します。

$

入力または行の終わり

h$ は、「teach」の「h」を検索しますが、「teacher」の「h」は無視します。

*

直前の文字の 0 回以上の繰り返し

um* は、「rum」の「um」、「yummy」の「umm」、および「huge」の「u」を検索します。

+

直前の文字の 1 回以上の繰り返し

um+ は、「rum」の「um」および「yummy」の「umm」を検索しますが、「huge」の場合は無視します。

?

直前の文字を 0 回または 1 回(直前の文字がオプションであることを示す)

st?on は、「Johnson」の「son」、「Johnston」の「ston」を検索しますが、「Appleton」や「tension」の場合は無視します。

.

新行(改行)以外のすべての単一文字

.an は、「bran muffins can be tasty」の「ran」および「can」を検索します。

x|y

x または y

FF0000|0000FF は、bgcolor=”#FF0000” の「FF0000」および font color=”#0000FF” の「0000FF」を検索します。

{n}

直前の文字の n 回繰り返し

o{2} は、「loom」の「oo」および「mooooo」の最初の 2 つの「o」を検索しますが、「money」の場合は無視します。

{n,m}

直前の文字の最低 n 回、最高 m 回の繰り返し

F{2,4} は、「#FF0000」の「FF」および「#FFFFFF」の最初の 4 つの「F」を検索します。

[abc]

カッコ内に含まれる文字 1 つ。ハイフンを使って、特定範囲の文字を指定([a-f] と [abcdef] は同じ)

[e-g] は、「bed」の「e」、「folly」の「f」、「guard」の「g」を検索します。

[^abc]

カッコ内に含まれない文字 1 つ。ハイフンを使って、特定範囲の文字を指定([^a-f] と [^abcdef] は同じ)

[^aeiou] は、「orange」の「r」、「book」の「b」、「eek!」の「k」を最初に検索します。

\b

語境界(スペース、改行など)

\bb は、「book」の「b」を検索しますが、「goober」や「snob」の「b」は無視します。

\B

語境界以外のすべて

\Bb は、「goober」の「b」を検索しますが、「book」の「b」は無視します。

\d

数字 1 文字([0-9] と同じ)

\d は、「C3PO」の「3」および「apartment 2G」の「2」を検索します。

\D

非数字 1 文字([^0-9] と同じ)

\D は、「900S」の「S」および「Q45」の「Q」を検索します。

\f

用紙送り

\n

改行

\r

キャリッジリターン

\s

スペース、タブ、用紙送り、改行を含むホワイトスペース 1 つ

\sbook は、「blue book」の「book」を検索しますが、「notebook」の場合は無視します。

\S

非ホワイトスペース 1 つ

\Sbook は、「notebook」の「book」を検索しますが、「blue book」の場合は無視します。

\t

タブ 1 つ

\w

下線を含む、英数字 1 つ([A-Za-z0-9_] と同じ)

b\w* は、「the barking dog」の「barking」および「the big black dog」の「big」と「black」を検索します。

\W

非英数字の 1 つ([^A-Za-z0-9_] と同じ)

\W は、「Jake&Mattie」の「&」および「100%」の「%」を検索します。

Ctrl + Enter または Shift + Enter(Windows)、Control + Return、Shift + Return、または Command + Return(Mac OS)

改行文字。正規表現を使用しない場合に改行文字を検索するときは、「ホワイトスペースの違いを無視」をオフにしてください。この検索では、一般の意味の改行ではない特定の文字が検索されます。例えば、<br> タグや <p> タグは無視されます。デザインビューでは、改行文字は改行ではなくスペースとして表示されます。

カッコで正規表現内をグループ分けし、後で参照できるように区別します。その後で、「置換」フィールドで $1、$2、$3 などを使用して、1 番目、2 番目、3 番目、およびそれ以降のカッコのグループを参照します。

注意:

「検索」ボックスでは、$1、$2、$3 ではなく \1、\2、\3 を使用して、正規表現内のカッコのグループを参照します。

例えば、(\d+)\/(\d+)\/(\d+) を検索し、それを $2/$1/$3 で置換すると、スラッシュで区切られた日付の日、月が入れ替わるので、アメリカ式とヨーロッパ式の日付を変換することができます。

サーバービヘイビアーコード

Dreamweaver では、動的ページの開発時にサーバービヘイビアーパネルからサーバービヘイビアーを選択すると、適切なコードブロックがページに挿入され、そのサーバービヘイビアーが機能するようになります。

このコードブロック内のコードを手動で変更すると、該当するサーバービヘイビアーをバインディングやサーバービヘイビアーなどのパネルを使用して編集することはできなくなります。Dreamweaver は、ページコード内の特定のパターンに基づいてサーバービヘイビアーを検出し、サーバービヘイビアーパネルに表示します。コードブロック内のコードがなんらかの形で変更されると、Dreamweaver ではサーバービヘイビアーを検出できなくなり、したがってサーバービヘイビアーパネルに表示できなくなります。しかしその場合でも、サーバービヘイビアーはページ内に残り、Dreamweaver のコーディング環境で編集できます。

 Adobe

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン