マニュアル キャンセル

カスケーディングスタイルシートについて

  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 サイトのテスト

 

CSS ルール、セレクター、継承など、CSS の基本的な概念について説明します。また、Dreamweaver で CSS を Web ページと関連付ける方法を説明します。

カスケーディングスタイルシートについて

CSS(Cascading Style Sheet:カスケーディングスタイルシート) は、Web ページでのコンテンツの外観を制御するフォーマットルールの集合です。CSS スタイルを使用してページのフォーマットを設定し、コンテンツとプレゼンテーションを分離します。ページのコンテンツ(HTML コード)は HTML ファイル自体に格納され、コードのプレゼンテーションを定義する CSS ルールは他のファイル(外部スタイルシート)または HTML ドキュメントの他の部分(通常は head セクション)に格納されます。コンテンツとプレゼンテーションを分離することにより、変更を加えたいときにすべてのページのすべてのプロパティを更新する必要がないので、共通の場所からのサイトの外観の維持が簡単におこなえるようになります。また、コンテンツとプレゼンテーションを分離することにより、HTML コードをより単純で簡潔なものにし、その結果ブラウザーのロード時間を短縮し、スクリーンリーダーを使用するユーザーなどアクセシビリティに問題のあるユーザーのナビゲーションを簡素化することができます。

CSS により、ページの外観を正確かつ柔軟に制御できるようになります。CSS を使用することで、ボールド、イタリック、アンダーライン、およびテキストの影、テキストカラーおよび背景色、リンクカラーおよびリンクのアンダーラインの設定など、特定のフォントおよびフォントサイズを含む多くのテキストのプロパティを制御することができます。CSS を使用してフォントを制御することにより、ページのレイアウトや外観をどのブラウザーでも同じように処理することができます。

テキストのフォーマットの他に、CSS を使用して Web ページ内のブロックレベルのエレメントのフォーマットや位置も制御できます。ブロックレベルのエレメントは、通常 HTML の新しい行で区切られ、視覚的にブロックとしてフォーマットされるスタンドアロンのコンテンツの断片です。例えば、h1 タグ、p タグ、div タグはすべて、Web ページにブロックレベルのエレメントを作成します。ブロックレベルのエレメントに対してマージンやボーダーを設定し、これらのエレメントを特定の場所に配置し、背景色を追加し、周囲をフロートテキストで囲むことなどができます。ブロックレベルのエレメントの操作は、CSS を使用してページをレイアウトする上での基本的な方法です。

CSS ルールについて

CSS 書式設定ルールは、セレクターと宣言の 2 つの部分(または、ほとんどの場合、宣言のブロック)で構成されます。セレクターとは、フォーマットされたエレメントを識別する用語(ph1クラス名、ID など)で、宣言ブロックは、スタイルプロパティが何であるかを定義するものです。以下の例では、h1 はセレクターであり、山カッコ({})内のすべてのコードは宣言のブロックです。

h1 { 
font-size: 16 pixels; 
font-family: Helvetica; 
font-weight:bold; 
}

個々の宣言は、プロパティ(font-family など)と値(Helvetica など)の 2 つの部分で構成されます。上記の CSS ルールでは、h1 タグに対して特定のスタイルが作成されています。このスタイルにリンクされたすべての h1 タグのテキストは、サイズが 16 ピクセル、フォントが Helvetica で、ボールドです。

ルールまたはルールの集まりから取得されたスタイルは、通常は外部スタイルシート、または HTML ドキュメントの head セクションなど、実際のテキストのフォーマットとは別の場所に保存されます。したがって、h1 タグのルールを多くのタグに一度に適用することができます(また、外部スタイルシートでは、多くの異なるページの多くのタグに一度に適用することができます)。このようにして、CSS は非常に簡単な更新機能を提供します。ある場所のルールを更新すると、定義済みのスタイルを使用するすべてのエレメントのフォーマットが新しいスタイルに自動的に更新されます。

Dreamweaver では、以下のタイプのスタイルを定義できます。

  • クラススタイルを使用して、ページ上の任意のエレメントまたは複数のエレメントにスタイルプロパティを適用することができます。

  • HTML タグスタイルは、h1 のような特定のタグのフォーマットを再定義します。h1 タグの CSS スタイルを作成または変更すると、h1 タグでフォーマットされたテキストは瞬時にすべて変更されます。

  • 高度なスタイルはエレメントの特定の組み合わせ、または CSS で可能な他のセレクターフォームのフォーマットを再定義します。例えば、セレクター td h2 は、テーブルセル内に h2 ヘッダーがある場合に常に適用されます。高度なスタイルで、特定の id 属性を含むタグのフォーマットを再定義することもできます。例えば、#myStyle で定義されるスタイルは、id="myStyle" という属性と値のペアを含むすべてのタグに適用されます。

CSS ルールは次の場所に置くことができます。

外部 CSS スタイルシート

外部の CSS(.css)ファイル(HTML ファイルではありません)に保存されている CSS ルールの集まりです。このファイルは、ドキュメントの head セクションのリンクまたは @import ルールを使用して、Web サイト内のページにリンクされます。複数のページにリンクすることも可能です。

内部(または、埋め込み)CSS スタイルシート

HTML ドキュメントの head 部分の style タグに記述される CSS ルールの集まりです。

インラインスタイル

HTML ドキュメント内の特定のタグインスタンス内で定義されます (インラインスタイルの使用はお勧めしません)。

既存のドキュメントで定義されているスタイルが CSS スタイルガイドラインに準拠していれば、Dreamweaver はそのスタイルを認識します。また、Dreamweaver は、適用されるほとんどのスタイルを直接デザインビューに表示します(ただし、ページを最も正確かつ "鮮明に" レンダリングする方法は、ブラウザーウィンドウによるドキュメントのプレビューです)。CSS スタイルの中には、Microsoft Internet Explorer、Netscape、Opera、Apple Safari、または他のブラウザーで表示が異なるものや、現在はどのブラウザーでもサポートされていないものがあります。

カスケーディングスタイルについて

カスケーディングという用語は、ブラウザーが Web ページの特定のエレメントのスタイルを最終的に表示する方法を指すものです。Web ページで表示されるスタイルは、3 つの異なるソースによって決まります。ページの作成者が作成したスタイルシート、ユーザーがカスタマイズしたスタイルの選択(ある場合)、ブラウザー自体の初期設定のスタイルです。前のトピックでは、Web ページとそのページに関連付けられたスタイルシートの両方の作成者として、Web ページのスタイルを作成する方法について説明しています。ただし、ブラウザーにも Web ページの表示方法を指定するデフォルトのスタイルシートが用意されており、ユーザーはそれらのスタイルを選択して Web ページの表示を調整することで、ブラウザーをカスタマイズすることもできます。Web ページの最終的な外観は、最適な方法で Web ページを表示できるように、これらの 3 つのソースのルールをすべて組み合わせた(カスケーディング)結果です。

共通タグである段落タグや <p> タグは、この概念を示すものです。初期設定では、ブラウザーには段落テキスト(つまり、HTML コード内の <p> タグの間に挿入されるテキスト)のフォントおよびフォントサイズを定義するスタイルシートが用意されています。例えば Internet Explorer では、段落テキストを含むすべての本文テキストは、初期設定で Times New Roman(Medium)フォントで表示されます。

ただし、Web ページの作成者であるユーザーは、スタイルシートを作成して、ブラウザーの段落フォントおよびフォントサイズの初期設定を上書きすることができます。例えば、スタイルシートで以下のルールを作成できます。

p { 
font-family: Arial; 
font-size: small; 
}

ユーザーがページを読み込むと、作成者であるユーザーが設定した段落フォントおよびフォントサイズ設定によって、ブラウザーの初期設定の段落テキスト設定が上書されます。

ユーザーはスタイルを選択して、用途に合わせた最適なブラウザー表示をカスタマイズできます。例えば、Internet Explorer でフォントが小さすぎると感じた場合、表示/文字のサイズ/最大を選択して、ページのフォントを読みやすいサイズに拡大することができます。最終的には(少なくともこの場合には)、ユーザーの選択により、初期設定のブラウザーの段落フォントおよびフォントサイズと、Web ページの作成者によって作成された段落スタイルの両方が上書きされます。

カスケードのもう一つの重要な要素に、継承があります。Web ページのほとんどのエレメントのプロパティが継承されます。段落タグは body タグから特定のプロパティを継承し、span タグは段落タグから特定のプロパティを継承します。例えば、スタイルシートに以下のルールを作成したとします。

body { 
font-family: Arial; 
font-style: italic; 
}

この場合、段落タグが body タグからこれらのプロパティを継承するため、Web ページのすべての段落テキスト(および、段落タグのプロパティを継承するテキスト)は Arial のイタリックになります。ただし、ルールをより具体的に設定して、継承による標準形式を上書きするスタイルを作成することもできます。例えば、スタイルシートに以下のルールを作成したとします。

body { 
font-family: Arial; 
font-style: italic; 
} 
p { 
font-family: Courier; 
font-style: normal; 
}

この場合、すべての本文テキストは、Courier 標準(非イタリック)で表示される段落(および、それによって継承される)テキストを除いて Arial の イタリックになります。 技術的に説明すると、段落タグは最初に body タグに設定されたプロパティを継承しますが、段落タグには独自に定義されたプロパティがあるため、継承したプロパティは無視されます。つまり、通常ページエレメントは前に記述されたプロパティを継承しますが、プロパティをタグに直接適用することにより、継承による標準形式が常に上書きされます。

上記のすべての要素の組み合わせと、CSS 仕様(特定の種類の CSS ルールに異なるウエイトを与えるシステム)などのその他の要素と CSS ルールの順序により、最終的に高い優先順位を持つ項目が低い優先順位のプロパティを上書きする複雑なカスケードが作成されます。カスケード、継承、仕様を規定するルールについて詳しくは、www.w3.org/TR/CSS2/cascade.html を参照してください。

テキストのフォーマットと CSS について

Dreamweaver の初期設定では、テキストのフォーマットには CSS が使用されます。プロパティインスペクターやメニューコマンドを使用してテキストにスタイルを適用すると、CSS ルールが作成され、現在のドキュメントのヘッドに埋め込まれます。

CSS デザイナーを使用すると、CSS ルールとプロパティを作成および編集できます。プロパティインスペクターよりも格段に強固なエディターである CSS デザイナーでは、ルールがドキュメントの先頭に埋め込まれているか、外部スタイルシートにあるかとは無関係に、現在のドキュメントで定義されているすべての CSS ルールが表示されます。Adobe では、CSS の作成と編集のプライマリツールとして、プロパティインスペクターの代わりに CSS デザイナーを使用することをお勧めします。それにより、コードが簡潔で維持しやすくなります。

CSS デザイナーについて詳しくは、CSS デザイナーを使用したページのレイアウトを参照してください。

独自に作成するスタイルやスタイルシートの他にも、Dreamweaver に付属するスタイルシートを使用して、ドキュメントにスタイルを適用することもできます。

CSS を使用してテキストをフォーマットする方法のチュートリアルについては、www.adobe.com/go/vid0153_jp を参照してください。

ショートハンド CSS プロパティについて

CSS の仕様では、ショートハンド CSS と呼ばれる簡略シンタックスを使用してスタイルを作成することができます。ショートハンド CSS では、1 つの宣言を使用して複数のプロパティ値を指定できます。例えば、font プロパティを使用して、font-stylefont-variantfont-weightfont-sizeline-heightfont-family の各プロパティを 1 行で設定できます。

ショートハンド CSS を使用する際に重要なのは、ショートハンド CSS プロパティで省略された値には初期設定値が割り当てられるという点です。したがって、同じタグに複数の CSS ルールが割り当てられている場合には、ページが正しく表示されないこともあります。

例えば、次の h1 ルールでは、長い形式の CSS シンタックスを使用しています。font-variantfont-stretchfont-size-adjust、および font-style の各プロパティは、初期設定値が割り当てられています。

h1 { 
font-weight: bold; 
font-size: 16pt; 
line-height: 18pt; 
font-family: Arial; 
font-variant: normal; 
font-style: normal; 
font-stretch: normal; 
font-size-adjust: none 
}

ショートハンドプロパティで書き換えると、同じタグは次のようになることがあります。

h1 { font: bold 16pt/18pt Arial }

ショートハンド表記を使用して記述した場合、省略した値には自動的に初期設定値が割り当てられます。上の例のショートハンドでは、font-variantfont-stylefont-stretchfont-size-adjust の各タグが省略されています。

長短の CSS シンタックス形式を使用して複数の場所でスタイルを定義した場合(例えば、HTML ページに埋め込んだスタイルと外部スタイルシートから読み込むスタイル)、ショートハンドルールで省略したプロパティが別のルールで明示的に指定したプロパティより優先される(カスケードされる)ことがあります。

こういった理由から、Dreamweaver では初期設定で長い形式の CSS 表記を使用しています。これにより、ショートハンドルールが長い形式のルールよりも優先されることによって生じる問題が回避されます。Dreamweaver で、ショートハンド CSS 表記を使用して記述した Web ページを開いても、Dreamweaver で作成する CSS ルールは長い形式になります。Dreamweaver で CSS ルールを作成および編集する方法を指定するには、編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)を選択して環境設定ダイアログボックスを表示し、「CSS スタイル」カテゴリで CSS 編集環境設定を変更します。

Dreamweaver と CSS

Dreamweaver では、様々な方法で CSS を操作できます。

  • CSS デザイナーを使用して、最小限のコーディングで CSS を構築できます。詳しくは、CSS デザイナーを使用したページのレイアウトを参照してください。
  • CSS を手作業でコーディングすることもできます。Dreamweaver のコーディング機能について詳しくは、Dreamweaver のコーディング環境を参照してください。
  • Sass、Scss、Less ファイルを使用する場合は、好みのシンタックスを使用してファイルをコーディングし、それを Dreamweaver で使用できます。詳しくは、CSS プリプロセッサーを参照してください。
アドビのロゴ

アカウントにログイン