カスケーディングスタイルシート(CSS)の基本と、DreamweaverでCSSを適用し、webページのスタイルを設定するためのツールについて説明します。
what-is-css_1408x792

Dreamweaverは、webデザイナーがCSSを簡単に取り扱えるように設計されていますが、効果的に使用するには、CSSの十分な理解が不可欠です。このチュートリアルでは、CSSの基本を確認し、DreamweaverでCSSデザイナーツールのスタイル設定機能を使用して、有効なCSSを作成する方法を説明します。

サンプルプロジェクトの使い方

このチュートリアルに沿って作業を進めるには、Intializrにある作成済みのページをご利用ください。Initializrは、webデザインプロジェクトを作成するためのサイトです。コンテンツ、スタイル設定、ナビゲーション要素を含む基本的なHTML、CSS、JavaScriptファイルで構成されたプロジェクトを作成できます。

  1. ブラウザーでinitializr.comを開き、HTML5 Initializrプロジェクトを開始します。
  2. 「Responsive」ボタンをクリックし、「Mobile-first Responsive」と「Modernizr」のチェックをオンに、その他のオプションをすべてオフにします(図1参照)。

注意:レスポンシブプロジェクトには、CSSを使ったデザインの考え方がわかる初期設定のレイアウト、CSSファイル、その他のファイルが含まれます。

図1. Initializrプロジェクトを作成する際のオプション設定
図1. Initializrプロジェクトを作成する際のオプション設定
  1. ZIPファイルをダウンロードし、コンピューターでフォルダーを展開します。
  2. Dreamweaverを起動します。
  3. Dreamweaverでindex.htmlを開きます。

注意: Dreamweaverの最新版をご利用ください。Dreamweaverが最新版かどうかは、Creative CloudデスクトップアプリケーションのAppsタブをクリックして確認します(図2参照)。

図2. Creative Cloudデスクトップアプリケーションでの最新版の表示
図2. Creative Cloudデスクトップアプリケーションでの最新版の表示
  1. 分割ビューに切り替え、ライブビューで出力を確認しながら、同時にソースコードも表示します。
  2. 注意:このチュートリアルでは、分割ビューでライブビューを表示し、ドキュメントツールバーでは、「main.css」を開いて作業します(図3参照)。こうすると、CSSデザイナーでの設定が即座に有効なCSSに変換されるのがコードビューでわかります。

図3. ドキュメントツールバーで「main.css」を選択、分割ビューでライブビューを表示
図3. ドキュメントツールバーで「main.css」を選択、分割ビューでライブビューを表示

CSSの基本

インターネット初期の時代は、HTMLでページの構造を定義し、スタイルはHTMLタグの属性で定義していました。このため、webデザイナーはスタイルのルールを各ページに記述し、また同じページの中でも何度も繰り返さなければならず、サイトの更新とメンテナンスに手間がかかりました。

この問題を解決するために開発されたのが、スタイル情報をHTMLと切り離し、別にルールとして定義するCSSです。これを使用することで、スタイルの整理と更新を一元管理し、容易に再利用できるようになりました。しかし、当初はレイアウトの多くをHTMLでおこない、CSSの利用は限定的で、サイズ、カラーなどの基本的な視覚的属性のみをおこなう程度でした。

それが現在では、各項目の外観、ページ上の配置から、基本的な2Dおよび3Dアニメーションに至るまでCSSで設定できます。HTMLを使用する主な目的は、各項目が何であるか(段落、見出し、DIVと呼ばれるコンテナ)を定義することであり、HTMLマークアップで表示される要素の順序にかかわらず、CSSだけでページの外観と操作性を変更できます。画面のサイズや向きに応じて、スタイルや外観を調整することも可能です。

DreamweaverでCSSデザイナーを使用する    

DreamweaverのCSSデザイナーツールではビジュアルインターフェイスを使用して、ページ内またはリンク先の外部CSSファイルでスタイルを追加、変更、削除できます。CSSデザイナーの概要については、CSSによるスタイル設定をご覧ください。

注意:ページ内で直接スタイルを定義することも可能です。内部スタイルシートと呼ばれ、ヘッダー内の<style>ブロック、または個々のタグにインラインスタイルを設定できます。しかし、再利用しやすい外部スタイルシートにリンクする方法を推奨します。

以下の手順で、CSSデザイナーのレイアウトと位置をカスタマイズし、基本機能の使い方を確認してください。

  1. CSSデザイナーパネルをすべて表示するには、右上のドロップダウンをクリックし、「拡張」表示に変更します。。
  2. 注意:「ファイル」パネルをたたむあるいは閉じると、CSSデザイナーパネルを広く使えます。

図4. 拡張表示したCSSデザイナー
図4. 拡張表示したCSSデザイナー
  1. CSSデザイナーでは、新しいCSSファイルを作成することも、既存のファイルにリンクすることも簡単にできます。ソースパネルのプラス(+)ボタンをクリックすれば、スタイルシートとwebページを関連付けるオプションを確認できます。Escキーを押して、オプションを非表示にします。
  2. サンプルドキュメントには、normalize.min.cssとmain.cssという2つの外部CSSファイルが入っています(図5参照)。

図5. CSSソースとwebページを関連付ける方法
図5. CSSソースとwebページを関連付ける方法
  1. main.cssをクリックします。スタイルシートで定義されたセレクターがセレクターペインに表示されます。

CSSのカスケード    

CSSのカスケードとは、CSSで特定の要素に複数のプロパティが定義されている場合、または複数の場所にある同じ要素にスタイルが適用されている場合に、webブラウザーがその要素に適用するスタイルを選択する手順のことです。カスケードの仕組みについては、Cascading – What Does it Mean?(カスケードの意味)を参照してください。

初期設定のフォントのプロパティを指定する

カスケードの仕組みを説明するため、ドキュメント全体に適用される初期設定のフォント、フォントサイズ、フォントカラーを設定します。テキストを含む各HTML要素に対してルールを作成することも可能ですが、この方法では同じ記述を何度も繰り返すことになり、間違いが生じやすくなります。CSSのカスケードを使用すれば、初期設定のテキストスタイルがHTMLページ全体または本文に適用され、優先設定がない限り、そのページ内のすべてに初期設定のスタイルが継承されます。

  1. CSSデザイナーのソースパネルで、main.cssをクリックします。

  2. セレクターリストの「html」をクリックします。

  3. プロパティパネルのテキスト(T)アイコンをクリックします。テキストのカラーが「#222」(黒)に設定されていることを確認します。
  4. colorプロパティは上位の要素(この場合は、html)で定義され、その中のほとんどの要素に継承(カスケード)されます。

  5. カラーピッカーで新しいカラーを選択し、どのように変わるか確認してください(図6参照)。
  6. 段落要素と見出し要素も新しいカラーに変わりました。これは、html要素からその中の要素にカスケードされるからです。見出しの白い文字が変わっていないことに注目してください。これは、見出し要素独自のテキストカラーが定義されていて、HTMLタグから継承されたカラーよりも優先されるためです。

図6. html要素に加えた変更がその中の要素にカスケードされる
図6. html要素に加えた変更がその中の要素にカスケードされる
  1. カラーを元の「#222」に戻します。

複数の場所からCSSプロパティを指定する

1つまたは複数のCSSファイルにより複数のルールが同一の要素に適用されるときも、カスケードが機能します。例えば、main.cssで段落要素を青に設定するには、CSSコードで以下のように記述します。

p {color: blue;}

normalize.min.cssで段落のフォントサイズを10ピクセルに設定するには、以下のように記述します。

p {font-size:10px;}

2つのルールは別々のCSSファイルで定義されていますが、どちらも同じ段落テキストに適用され、青字の10ピクセルとなります。

CSSカスケードルールについて、詳しくはCSS Specificity: Things You Should Know(CSSの特定性:基本事項)をご覧ください。CSSルールが競合したときの解決方法などが記載されています。

セレクターの使用

CSSセレクターは、その名のとおり、CSSルールによりスタイルが適用されるHTML要素を選択(検索)するものです。要素(あるいはタイプ)、class、idなどのセレクターがよく使用されます。

要素(タイプ)セレクター

要素(タイプ)セレクターは、ドキュメント内で指定されたタイプのHTML要素をすべて検索します。区切り線(HTML5タグではテーマの区切りとして定義)の既存の要素セレクターを編集し、セレクターの働きを確認しましょう。

  1. index.htmlで<hr>タグを追加します。分割ビューを選択し、headerブロックの次行、38行目に<hr>を追加します。既存のスタイルシートでは、hr要素が1ピクセルのグレーの線に設定されています。

  2. CSSデザイナーのソースパネルでmain.cssを選択し、hrセレクターを見つけます(検索フィールドを使用すると、セレクターパネルの結果表示を絞り込めます)。

  3. hr」をクリックし、「セットを表示」のチェックをオンにして、適用されているスタイルのプロパティのみを表示します。
    • height: 1px
    • display: block
    • margin: 1 em(上下)
    • border-top: #ccc

 

  1. プロパティウィンドウの「border」セクションまでスクロールし、上ボーダーのcolorセレクターをクリックします。スポイトツールを使用して、見出しのオレンジ色を選択します(図7参照)。
図7. 上ボーダーのカラーを設定する
図7. 上ボーダーのカラーを設定する

ドキュメントツールバーでmain.cssを選択し、ライブビューでプレビューします。また、分割ビューで<hr>要素がオレンジ色に変わったことも確認します(図8参照)。

図8. オレンジ色の<hr>要素に更新されたページ
図8. オレンジ色の<hr>要素に更新されたページ

コードビューを見ると、CSSデザイナーで変更したルールがCSSコードにも反映されています。

hr { 	
   display: block; 	
   height: 1px; 	
   border-left: 0; 	
   border-right: 0; 	
   border-bottom: 0; 	
   border-top: 1px solid #EC6433; 	
   margin: 1em 0; 	
   padding: 0; 
}

クラスセレクター

クラスセレクターは任意のHTML要素に適用できます。これを使用するには、CSSファイルでクラスセレクターを定義し、そのクラス名の先頭にピリオドを付けます。次にクラス属性とピリオドなしのCSSクラス名を使用して、そのクラスをHTML要素に割り当てます。

CSSクラス

.intro {
   color: #ccc;
   font-size: 10px;
}

HTMLタグ

<p class="intro">

サンプルプロジェクトで、クラスセレクターを確認してみましょう。

  1. CSSデザイナーのセレクターパネルで、.header-containerクラスを選択します。

  2. 「セットを表示」がオンになっていることを確認し、このクラスに定義されているborder-bottomの3つのプロパティを表示します。
    • width: 20px
    • style: solid
    • color: #e44d26
  1. ナビゲーション項目と記事の見出し(article header)間の区切り線をプレビューし、それに対応するCSSコードをコードビューで確認します(図9参照)。header下部に濃いオレンジ色のボーダーが設定されています。
.header-container {
    border-bottom: 20px solid #e44d26;
}
図9. CSSデザイナーでスタイル設定したheader-containerのCSSコード
図9. CSSデザイナーでスタイル設定したheader-containerのCSSコード
  1. 一方、上記のクラスでは設定されていない、明るいオレンジがheader-containerの背景色に設定されています。

  2. セレクターパネルで、.header-container, .footer-container, .main asideを見つけます。クラス名が一部しか表示されない場合は、その上にマウスポインターを置くと、ツールチップにクラス名がすべて表示されます(図10参照)。
図10. セレクターにポインターを置く
図10. セレクターにポインターを置く

CSSデザイナーで選択したプロパティをCSSコードにすると以下のようになります。

.header-container,
.footer-container,
.main aside {
    background: #f16529;
}

共通のプロパティを持つ複数のセレクターを組み合わせた例を示しました。header-containerfooter-containermain aside(これは「子孫セレクター」と呼ばれるものですが、詳細は後述します)の各セレクターはすべて背景が明るいオレンジ色で共通しています。一般的に、複数のセレクター間で同じプロパティを共有する要素は結合した方が効率よくCSSをメンテナンスできます。

IDセレクター

IDセレクターはページ内のHTML要素1つのみに対応します。名前は固有にします。これを使用するには、CSSファイルでIDセレクターを定義し、セレクター名の先頭にハッシュタグ(#)を付けます。次に、以下のように、ID属性とハッシュタグなしのCSS名参照を使用して、そのセレクターをHTML要素に割り当てます。

<div id="main"></div>

CSSでこの要素をスタイル設定する場合は、IDセレクターを使用して以下のように記述します。

#main {
    background: #f16529;
}

注意: サンプルプロジェクトには、IDセレクターは設定されていません。

一般的に、IDセレクターは1ページに1要素のみのスタイル設定に使用し、クラスセレクターは複数の要素に同じスタイルを適用する場合に使用します。両者の違いは、The Difference Between ID and Class(IDとクラスの違い)に詳しく記載されています。

子孫と子セレクター

子孫セレクターと子セレクターは非常によく似ていますが、重要な違いがあります。この違いを理解するために、まずサンプルファイルの子孫セレクターをご覧ください。

  1. セレクターパネルで「nav a」を選択し、「セットを表示」がオンになっていることを確認します。

  2. 設定済みのプロパティを、CSSデザイナーとコードビューのCSSコードで比較してください(図11参照)。
図11. ナビゲーション要素に使用するCSSプロパティの選択
図11. ナビゲーション要素に使用するCSSプロパティの選択

対応するCSSのコードビューは以下のとおりです。

nav a {
    display: block;
    margin-bottom: 10px;
    padding: 15px 0;

    text-align: center;
    text-decoration: none;
    font-weight: bold;

    color: white;
    background: #e44d26;
}

この例では、<nav>要素の子孫であるすべての<a>要素が選択されます。HTMLページの構造は、ドキュメントオブジェクトモデル(DOM)により要素のツリーとして定義されます。ツリーでは、別のHTML要素内にあるHTML要素はすべて子孫と見なされます。サンプルHTMLの27行目から33行目をご覧ください。

<nav>
    <ul>
        <li><a href="#">nav ul li a</a></li>
        <li><a href="#">nav ul li a</a></li>
        <li><a href="#">nav ul li a</a></li>
    </ul>
</nav>

上のHTMLでは、<nav>要素の子孫として、<ul><li><a>の3つのHTML要素があります。

上記の子孫セレクタは、階層の深さにかかわらず、<nav>要素の下にあるいずれの<a>要素に対してもスタイルを適用します。

これに対して、子セレクターが選択するのは、1階層下の子のみです。上の例を子孫セレクターではなく、子セレクターを使用して記述すると、以下のようになります。

nav > a {
    ...
}

上のHTML例では、子セレクターはどの要素にも適用されません。<a>要素が<nav>要素の直下にないからです。これを以下のように変更すれば、適用されます。

nav > ul {
    ...
}

<ul>要素は<nav>要素の直下にある(別のタグが途中に入らない)ため、この子セレクターが要素に適用されます。

子孫セレクターと子セレクターは効率が悪く、表示を遅くさせるので、できるだけ使用を避けることを推奨します。非効率的なCSSが多用されていると、ブラウザーでページが表示されるまでに時間がかかります。

*セレクター

アスタリスク(*)はすべての要素に適用されるユニバーサルセレクターです。単独で使用するとページ内のすべての要素と一致します。以下の画像は、メディアクエリーを使用してユニバーサルセレクターを印刷用のスタイルシートに適用した例です(図12参照)。

図12. サンプルプロジェクトのユニバーサルセレクター
図12. サンプルプロジェクトのユニバーサルセレクター

このCSS例では、印刷用にすべての要素の背景色とドロップシャドウをなくし、テキストカラーを黒に変更しています。

* {
    background: transparent !important;
    color: #000 !important; /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
 }

注意:!important宣言により、そのCSSルールが最優先になります。この宣言について詳しくは、When Using !important is the Right Choice(!importantをいつ使用するか)を参照してください。

ユニバーサルセレクターを子孫セレクターとして組み合わせることができます。次の例では、CSSでmainクラスが適用された要素内にあるすべての要素を選択できます。

.main * {
    ...
}

擬似クラスと擬似要素

擬似クラスは、セレクターに追加して要素の状態を指定できる特殊なキーワードです。例えば、a:hoverのセレクターのスタイルは、(<a>タグの)要素(この例ではリンク)セレクターで定義されていますが、要素にマウスをポイントしたときにのみ適用されます。

サンプルプロジェクトでページ上のリンク(<a>タグ)をスタイル設定する擬似クラスを示します(図13参照)。最もよく使用される例です。

図13. CSSデザイナーによる疑似クラスプロパティの設定
図13. CSSデザイナーによる疑似クラスプロパティの設定

対応するCSSをコードビューで確認してください。

nav a:hover,
nav a:visited {
    color: white;
}

nav a:hover {
    text-decoration: underline;
}

最初のセレクターが<a>タグを<nav>の中から検索します。状態はポイントと閲覧(閲覧はクリック後のリンク)の両方です。これでテキストカラーが白に設定され、初期設定のリンクスタイルよりも優先されます。2つ目のセレクターが<a>タグを<nav>の中から検索します。状態はポイントで、下線を設定します。初期設定のリンクには下線がなく、マウスをポイントすると、下線が表示されます。

:hover:visited以外にも、疑似クラスは多数あります。MDNの全リストをご覧ください。要素グループの中から特定の要素のみを選択する疑似クラスもあります。サンプルページで例を示します。

nav li:first-child a {
    margin-left: 0;
}

nav li:last-child a {
    margin-right: 0;
}

この例では、疑似クラスが要素の一覧から特定の要素を指定しています。最初のセレクターが最初の<li><nav>の子要素)を検索し、左マージンを適用します。2つ目のセレクターが最後の<li><nav>の子要素)に右マージンを適用します。

その他のセレクター

ここでは、よく使用されるセレクターのみを紹介しています。ここでは取り扱っていませんが、隣接(兄弟)セレクター、正規表現、not()を使用する複雑なセレクターもあります。使用可能なその他のセレクターについては、The 30 CSS Selectors You Must Memorize(覚えるべき30のCSSセレクター)を参照してください。

メディアクエリーとは

メディアクエリーを使用すると、モバイルデバイス、タブレット、デスクトップコンピューターなど、様々な出力とデバイスタイプ用にスタイルを定義できます。ここでは、メディアクエリーを簡単に紹介します。詳しくは、Introduction to Media Queries(メディアクエリーの概要)を参照してください。

メディアクエリーの先頭は常に@mediaです。その後に続く部分には、メディアタイプとメディア特性がありますが、実際のコードでは、2つのうち一方のみをもちいることが多いです。

最初の部分がメディアタイプです。メディアタイプには様々なものがありますが、最も一般的なのが、screenとprintです。screenメディアタイプは、コンピューター画面を対象とし、printメディアタイプは印刷ページを対象とします(webページを印刷したときの出力が最適化されます)。

注意:メディアクエリー情報を追加するには、CSSデザイナーの@Mediaパネルを使用します。

以下の手順でこのプロジェクトに含まれるメディアクエリーを選択し、CSSデザイナーとコードビューでプロパティを確認しましょう。

  1. CSSデザイナーの@Mediaパネルで、printを選択します。
  2. ユニバーサルセレクター ( * ) をクリックして、そのプロパティを表示します。
図14. CSSデザイナーのメディアクエリー
図14. CSSデザイナーのメディアクエリー
  1. printメディアクエリーの他のセレクターもクリックして、そのプロパティを表示します。

main.cssファイルのメディアタイプのみを使用したメディアクエリーの例を示します。この例では、printメディアタイプを使用しています。

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }
}

メディアクエリーではその他のCSSルールも定義します。この例では、読みやすく印刷できるように、要素の背景色とシャドウを解除するユニバーサルセレクターが指定されています。印刷スタイルシートには、リンクのURLなど、印刷ページでは非表示の情報を表示するいくつものオプションがあります。printメディアクエリーのCSSファイル例をご覧ください。

a[href]:after {
    content: " (" attr(href) ")";
}

メディアクエリーの次のパートは、任意の数のメディア特性を示す構文です。式がtrueであれば、メディアクエリーとそのCSSルールが適用されます。メディア特性のプロパティは多岐に及びますが、実際によく使用されるのは画面サイズに基づくものです。事実、画面サイズに関連するメディアクエリーが、CSSによりページのレイアウトを変更し、デスクトップ、タブレット、スマートフォンなどの異なる画面サイズに対応するレスポンシブwebデザインの基礎となっています。

main.cssの式を示します。

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }
}

このメディアクエリーは、メディアタイプとメディア特性の2部構成です。「1,140ピクセルを超える画面のみ」に適用されることを意味します。つまり、メディアクエリー内にネストされたルールは、印刷時には適用されず、スマートフォンやタブレットなどの小さい画面にも適用されません。「only」というキーワードで、メディア特性を指定したメディアクエリーをサポートしていない(screenとprintのメディアタイプのみをサポートする)古いブラウザーを、メディアクエリー内にネストしたスタイルの適用対象から除外しています。

CSSを使用したレイアウトと配置  

ここでは、レイアウトと配置の方法について簡単に説明します。CSSによるレイアウトと配置の基本については、Learn CSS Layout(CSSによるレイアウトを学ぶ)を参照してください。

CSSデザイナーには、レイアウトと配置を視覚的に定義できるビジュアルインターフェイスがあります。例えば、main.cssのnav aルールでは、以下のようにマージンと余白の設定結果が表示されます(図15参照)。

図15. CSSデザイナーに表示されるマージンと余白の設定
図15. CSSデザイナーに表示されるマージンと余白の設定

レイアウトと配置について詳しくは、ボックスモデルの理解をご覧ください。

次のステップ

CSSの基本を確認し、DreamweaverでのCSSの読み方と変更方法を説明しました。さらに詳しい説明が記載されたその他のリソースもありますので、参考にしてください。

Mozilla Developer Network(MDN)はwebの開発に役立つ優れたリソースです。CSSについては、Learn CSS(CSSを学ぶ)に詳しくまとめられています。QuirksModeのCSS selectors(CSSセレクター)には、各ブラウザーでサポートしているセレクタータイプが記載されています。疑似クラスについて詳しくは、How to Use CSS Pseudo-Classes(CSS疑似クラスの使い方)Learning to Use the :before and :after Pseudo-Elements in CSS(CSSの:beforeと:after疑似要素を学ぶ)を参照してください。

01/13/2020
Brian Rinaldi
このページは役に立ちましたか。