このシリーズの4番目のパートでは、webページ上の要素のサイズの計算方法について説明します。さらに、CSSを使用して、ページ上の要素およびテキストに一般的なレイアウトおよびスタイルを適用する方法についても説明します。
必要な情報
このダウンロードには、このチュートリアルシリーズで使うCreative Cloudライブラリおよびプロジェクトファイル一式が含まれます。パート1で使用した開始ファイルでそのまま作成を続行するか、ダウンロードしたファイルから、前パートの完了時のファイルをご利用ください。
はじめに
このチュートリアルシリーズのパート4では、Dreamweaver でCSSの基本的なスタイルを作成する方法について説明します。ここまでの3つのパートでは、Dreamweaverでサイトを定義し、HTMLの論理構造を定義して2つのページを作成しました。図1は、ブラウザーにindex.htmlを読み込んだ場合のホームページの状態を示しています。
このチュートリアルシリーズの残りのパート(最終パートを除く)では、CSSの使用と、画像の追加により、見栄えのしないページをシンプルながらもエレガントなデザインに変更します。このパートでは、幅と高さの計算の単純化、フォントの変更、そしてCSSデザイナーを使用した基本的なスタイルの作成方法について説明します。
幅と高さの計算を単純化するためのスニペットの作成
CSSでは、すべての要素がボックスとして扱われます。一般にデフォルトのCSSボックスモデルでは、要素の幅(width
)と高さ(height
)は要素自体にのみ適用されます。要素のコンテンツの周囲に追加したパディング(padding
)は、計算には含みません。同様にボーダーも計算には含みません。そのため、要素の幅を250px、高さを100pxと宣言し、各サイドに20pxのパディングを追加して、さらに5pxの境界を追加すると、全体の幅は300px、高さは150pxとなります(図2を参照)。
そのため、ピクセルとパーセント値の寸法を組み合わせて使用する場合は特に、計算が困難になることがあります。パディングとボーダーは、要素のサイズに本来含まれる部分であると考えることができます。ページレイアウトをコントロールしやすくするために、多くのプロのwebデザイナーはスタイルシートの先頭に、要素の幅と高さにパディングとボーダーを含めるように定める2つの簡単なスタイルルールを追加します。このルールは非常に役立ちます。Dreamweaverのスニペットパネルでルールを保存しておけば、他のwebサイトのスタイルにも挿入できます。
- ドキュメントウィンドウでindex.htmlを開き、関連ファイルツールバーでresponsive.cssをクリックして(図3を参照)、分割ビューで外部スタイルシートを開きます。
- コード内をクリックし、行2に空白行を作成して、/*幅と高さの計算を簡易化*/と入力します。CSSでは/*と*/に挟まれた文字はコメントとして扱われるため、入力したテキストは単にコードの内容を表すリマインダーの役割を果たします。
- 新しい行を作成し、htmlに続けて開き波括弧({)を入力します。スタイルルールは、1つのセレクターに続けて波括弧で囲んだプロパティと値のペアを入力して構成します。最も単純なタイプのセレクターは、HTMLタグです。どのwebページでも最上位の要素は
<html>
であるため、html
はページ内のすべての要素に影響するCSSセレクターです。
- 波括弧の直後でEnterキーまたはReturnキーを押します。波括弧のペアが作成されるとともに次の行へインデントされ、CSSプロパティのコードヒントがポップアップ表示されます。boxと入力します。入力するにつれて、コードヒントがフィルタリングされ、すべての有効なプロパティから一致するテキスト(プロパティ名の途中の文字も含む)が検索されます(図4を参照)。
- 必要なプロパティが
box-sizing
であるとします。矢印キーまたはマウスを使用して、コードヒント内でそのプロパティを選択し、EnterキーまたはReturnキーを押します。プロパティ名が自動補完され、最後にコロン(:)とスペースが付加されます。コードヒントが再度ポップアップ表示されます。リストからborder-box
を選択し、行の最後にセミコロン(;)を付加します。 - 閉じ波括弧( } )の下に新しい行を作成し、以下のスタイルルールを作成します。
閉じ波括弧(})は自動的に入力されているため、これでスタイルルールの定義が完了しました。
*, *:before, *:after { box-sizing: inherit; }
- スニペットパネル(デザインワークスペースのファイルパネルにドッキングされている)を開き、CSS_Snippetsフォルダーを選択します(図5を参照)。
これはグループセレクターと呼ばれるものです。このグループセレクターは、コンマで区切った3つのセレクターで構成され、同じスタイルを全体に適用するために使用します。アスタリスク(*)はすべての要素に適用される汎用のセレクターで、全称セレクターと呼ばれています。他の2つのセレクターは、擬似要素と呼ばれるものです。
このスタイルルールの詳細は上級者向けの内容です。webデザイン学習のこの段階で確認しておくべきことは、ルールに入力した通りにレイアウトが行われるかどうかです。重要なのは、正しく入力することです。例えば、box-sizing
プロパティに続くコロンの後にスペースを入力することはできますが、*:before
と*:after
のコロンの前後にスペースを入力することはできません。
- コードビューで、作成したコメントと2つのスタイルルールを選択し、右クリックして、コンテキストメニューから「新規スニペットの作成」を選択します(図6を参照)。
- 「名前」フィールドにBox-sizing: border-boxと入力します。「説明」に「幅と高さに、paddingとborderを含める」と入力します。「スニペットの種類」で「ブロックの挿入」ボタンを選択します。「プレビュータイプ」はデフォルトの「コード」のままにしておきます。パネルが図7のようになります。
スニペットダイアログボックスが開き、コードの挿入欄に選択したコードが表示されています。
- 「OK」をクリックしてスニペットを保存します。スニペットパネルでCSS_Snippetsフォルダーを選択したため、新規スニペットは自動的に同じフォルダーに保存されます。
スタイルシートにこのスニペットを組み込むと、全体の寸法に影響することなく、要素のパディングとボーダーを調整できます。
スニペットはCreative Cloudと同期できます。スニペットの使用方法について詳しくは、オンラインドキュメントを参照してください。
Adobe Edge Web Fontsのインストール
ブラウザーはそれぞれに設定されたデフォルトのフォントで文字を表示します。CSS font-family
プロパティを使用してフォントを選択できますが、通常、選択できるフォントはサイトを表示するために使用しているデバイスで使用可能なフォントに制限されます。ページとともにダウンロードしたwebフォントを使用すると、この制限が適用されません。Dreamweaver内からは、Adobeがホストする多数の無料webフォントにアクセスできます。最初に、Dreamweaver内でそれらのフォントを有効にする必要があります。
- ツール/フォントを管理を選択して、図8に示すパネルを開きます。
- Source Sans Proというフォントを探しているとします。検索フィールドに名前の入力を開始すると、候補となるフォントに絞り込まれます。Source Sans Proをクリックします。チェックマークは、フォントが選択されていることを示します(図9を参照)。
- Adobe Edge Web Fontsは、使用許諾契約書に同意すれば無料で使用できます。パネルの下部にあるリンクをクリックすると、利用条件が表示されます。
- 利用条件に同意したら、「完了」をクリックします。
Source Sans Proはサンセリフフォントです。つまり、文字のストロークの終端に装飾的なラインは付きません。Source Sans ProとSource Serif Proは、サンプルを見ればその違いが明確にわかります。
Edge Web Fontsが個人の設定フォルダーにインストールされ、Dreamweaverで作成するすべてのサイトで使用できるようになります。
CSSデザイナーを使用してページに基本的なスタイルを追加
コードヒントを使用すると、コードビューでスタイルルールをすばやく作成できる点については、既に説明しました。Dreamweaverにはさらに、CSSデザイナーというパネルがあり、これを使用すると、ライブビューで変更状態を確認しながらページのスタイルを設定できます。このセクションでは、CSSデザイナーを使用して、基本的なスタイルをresponsive.cssに追加し、それらのスタイルがindex.htmlへどう反映されるかを確認します。
- ドキュメントウィンドウでindex.htmlを開き、「ライブ」ボタンをクリックすると、ペイン全体にライブビューが表示されます。
- 画面の右側にあるパネルグループ(前のセクションで使用したスニペットパネルにドッキングされている)からCSSデザイナーのタブをクリックして開きます。CSSデザイナーは4つのペイン(「ソース」、「@Media」、「セレクター」、「プロパティ」)で構成されています(図10を参照)。
パネルの境界をドラッグして広げるとCSSデザイナーのレイアウトを2カラム構成にすることができ、プロパティペインがデザインワークスペースの右側に表示されます。小型のモニターを使用する場合は、パネルグループの端をドラッグして縮めると、1カラムレイアウトに変更できます。
スタイルルールを新規作成するときには、通常、パネル上部にある「すべて」ボタンが選択されている状態にしておきます。
各ペインの役割は次のとおりです。
- ソース:現在のページ内のすべてのスタイルの取得元がリストされます。これは、responsive.cssなどの外部スタイルシートである場合があり、ページにブロックとして埋め込まれているか、動的にリンクされています。
- @Media:各種ソースで使用されたメディアクエリーがリストされます。このペインについては、パート7で詳しく説明します。
- セレクター:選択したソース内のすべてのCSSセレクターがリストされます。大きなスタイルシートの場合は、上部にある検索フィールドでセレクターを検索すると便利です。
- プロパティ:セレクターのプロパティと値を定義します。「セットを表示」チェックボックスがオンになっている場合は、設定したプロパティのみがペインに表示されます。チェックボックスをオフにした場合は、レイアウト、テキスト、ボーダーおよび背景にもっともよく使用されるプロパティが50個程度リストされます。
- CSSデザイナー上部の「すべて」ボタンが選択されていることを確認します。
ソースペインでresponsive.cssを選択します。
@Mediaペインはパート7まで必要ないため、セレクターペインの上端を上方向にドラッグして閉じます。
セレクターペインに、作成済みのセレクターがリストされています。最後のセレクター(#wrapper)にはまだスタイルが設定されていません。セレクターを新規作成すると、別のセレクターが選択されていなければ、必ずスタイルシートの一番下に挿入されます。スタイルは論理順に並べておくことをおすすめします。「*
,*:before
,*:after
」を選択し、プロパティペインの右上にある「セットを表示」チェックボックスをオフにします。
- セレクターペインの左上にあるプラスボタンをクリックすると、新しいセレクターが作成されます。ライブビューでいずれかのコンテンツを選択していれば、それにもとづいてセレクターの名前が提案されます。ここでは、bodyと入力します。EnterキーまたはReturnキーを押して、変更を確認します。新しいセレクターを選択して(図11を参照)、プロパティペインでプロパティに対応する値を設定することで、ページ内のすべての項目に影響するスタイルルールを作成できます。
- 上部にある「レイアウト」セクションに、マージンプロパティを設定するためのビジュアルツールが表示されます。ここではこのツールは使用せず、「ショートハンドを設定」をクリックして、編集可能なフィールドを開き、0と入力します。EnterキーまたはReturnキーを押して、編集を確認します。
デフォルトで設定されていたマージン(8px)が削除されライブビューの表示内容がわずかに左上に移動することがわかります。
プロパティペインのmargin
プロパティが太字で表示され、このプロパティが設定されたことが示されます。また、ビジュアルツールで各サイドの値が0に設定されています(図12を参照)。
- プロパティペインの上部にあるテキストアイコン をクリックして、テキストプロパティのセクションに移動します。最初にリストされている
color
プロパティは、テキストのカラーを設定します。このプロジェクトのすべてのカラーは、パート1でインストールしたCCライブラリ内にあります。
color
プロパティのカラーボックスをクリックし、カラーピッカーを開きます。
CCライブラリパネルはCSSデザイナーにドッキングされているため、「CCライブラリ」タブをドラッグしてパネルグループから切り離します。これにより、ドキュメントウィンドウ上にフローティングした状態になります。
右下の「Hex」ボタンをクリックして選択します。これにより、すべてのブラウザーでサポートされている16進表記を使用してカラーが設定されます。
カラーピッカーの右下にあるスポイトツールを選択し、CCライブラリパネルでライトグレーのカラースウォッチからカラーをサンプリングします(図13を参照)。これにより、カラーが#4B4B4Bに設定されるため、白地に黒というコントラストのはっきりした色合いより優しめの色合いになります。
font-family
の右側をクリックして、一般的に使用されるフォントスタックのメニューを開きます。既にインストールしてあるAdobe Edge Web Fontsを選択します。一番下にリストされているsource-sans-pro
がこのフォントに該当します(図14を参照)。
カラーピッカーの外側をクリックして閉じます。
font-style
の値(normal)には問題はありませんが、font-weight
の値(200)は本来はextra-lightの幅値です。
200をクリックして、フォントの太さを選択できるメニューを開き、normalの値である400を選択します(図15を参照)。
フォントスタックには、一般的に使用されるフォントが設定順にリストされます。ユーザーのデバイスで最初のフォントを使用できない場合、ブラウザーは2番目のフォントを試行し、適切なフォントが見つかるまで順次試行します。
Edge Web Fontsを選択すると、font-family
に加えて、font-style
プロパティおよびfont-weight
プロパティの値が自動的に設定されます。さらに、関連ファイルツールバーに新しいファイル(source-sans-pro:n2:default.js)が表示されます。ライブビュー内をクリックすると、ソースペインに読み取り専用ソースが表示されます。新しいファイルと読み取り専用ソースは、Adobeサーバーから動的にフォントを読み込みます。これらのフォントは編集できません。
font-size
の横をクリックすると、フォントに適用できる単位とキーワードのメニューが開くため、emを選択します(図16を参照)。
font-weight
プロパティは、100(light)~900(heavy)の数値(100段階で増加)で設定するか、normal(400に相当)、bold(700)、bolder、lighterのいずれかのキーワードを使用して設定します。ただし、Edge Web Fontsは必ず数値で指定します。使用可能な値はフォントによって異なります。図15に示すように、source-sans-pro
では100、500、800がサポートされません。
- プロパティペインの上部にある背景アイコンをクリックして、背景プロパティに移動します。
- 今回は、カラーピッカーを使用して
background-color
プロパティを設定する代わりに、CCライブラリパネルで薄青色のカラースウォッチをクリックします(図17を参照)。そうすると、16進表記のカラーがクリップボードにコピーされます。
ライブビューに何も表示されなくなりました。ここで皆さんにお伝えしたいのは、『The Hitchhiker’s Guide to the Galaxy』の表紙の言葉「Don’t panic!(あわてないで)」です。
単位を選択すると、値が0に設定されます。emは、現在のフォントの高さにもとづくプロポーショナルな単位であるため、0に設定すると、テキストが表示されなくなります。
単に1と入力すれば、テキストは再び表示されます。body
スタイルルールで値を1emに設定すると、段落およびリスト項目にブラウザーのデフォルト値、つまり通常は16pxが使用されます。
- プロパティパネルの右上にある「セットを表示」チェックボックスをオンにして、ページ本文に設定したすべてのCSSプロパティを確認します(図18を参照)。
background-color
に適用するカラーの右側をクリックすると、編集可能なフィールドが開きます。値をペーストして、EnterキーまたはReturnキーを押して変更を確認します。これにより、ページの背景が薄青色になります。
CSSデザイナーで直接プロパティを設定
CSSデザイナーの各種セクションに共通しているプロパティを選択すると、CSSに対する理解を深めることができます。CSSについて既によくご存じの場合は、プロパティと値の設定方法のみを習得することができます。この操作は、プロパティペインの下部にある「その他」セクションでおこないます。コードヒントを使えば、入力をスピーディーにおこなえます。それでは操作を試してみましょう。この操作を初めておこなう場合でも、以下の手順に従って確実に操作を実行できます。
- CSSデザイナーの上部にある「すべて」ボタンが選択されていること、およびソースペインでresponsive.cssが選択されていることを確認します。必要に応じて、プロパティペインの右上にある「セットを表示」チェックボックスをオフにします。
- セレクターペインで
#wrapper
を選択します。ハッシュはそれがIDセレクターであることを示すため、スタイルルールはIDがwrapper
である項目に適用されます。#wrapperを作成していない場合は、セレクターペインの左上にあるプラスボタンをクリックし、入力フィールドに#wrapper
と入力することで作成できます。
このセレクターにはスタイルが設定されていないため、プロパティペインには、「その他」が表示されるとともに、プロパティと値を追加するための2つの入力フィールドが表示されます。
- 「
プロパティを追加
」フィールド内をクリックし、widthと入力します。入力するにつれて、一致するプロパティがコードヒントに表示されます。widthがハイライトされたら、Tabキーを押すか、EnterキーまたはReturnキーを押して、選択します。
- wrapperの表示範囲を狭めるために、別のプロパティ
max-width
を追加し、その値を1000pxに設定します。
- wrapperを中央揃えするため、
margin
プロパティを追加し、その値を0 autoに設定します。これにより簡単に、上下のマージンをなしに、左右のマージンを自動に設定することができます。ドキュメントウィンドウが1000px(max-width
の値)より広い場合は、ページコンテンツがライブビューの中央に表示されます。
background-color
プロパティを追加し、その値をwhiteに設定します。これは、すべてのブラウザーで認識されるカラーキーワードです。この時点で、プロパティペインには#wrapper
セレクターのスタイル定義が4つリストされています(図19を参照)。
2番目のフィールドがハイライトされます。100%と入力し、EnterキーまたはReturnキーを押します。これにより、wrapperが全画面で表示されます。
- ファイル/すべての関連ファイルを保存を選択し、作業内容を保存します。ページのスタイルを設定しているときには、定期的にこの操作をおこなってください。
これで、テキストが入力された白地の背景の領域がドキュメントの左右中央に表示されました。ドキュメントウィンドウの幅が1000pxより広い場合は、本文の薄青色の背景が両端に表示されます。ページの上部には不自然な隙間があり、テキストはwrapperの<div>
の左に詰まって表示されています。これらの問題についてはパート5で取り上げます。ここではまず、webページのピクセル測定値について説明しておきます。
ピクセルと高密度ディスプレイ
ピクセルとは、コンピューターディスプレイを形成する小さなドットのことです。初期のwebでは、1pxは1つのドットと同じサイズでした。技術が進歩するにつれ、ドットのサイズは徐々に小さくなりました。CSSはこの変化を予想していました。単位として使用されるピクセルは、デバイスの画面で使用される物理的なピクセルのサイズに依存しません。そのため、wrapper <div>
の最大幅として1000pxを設定した場合、旧型のモニターでも最新の高密度ディスプレイでもほぼ同じサイズで表示されるのです。
サイトの外観は徐々に改善されてきましたが、まだ対処すべきことは数多くあります。次のステージでは、上下左右に生ずるスペースの問題を解決し、レスポンシブな画像でページを装飾します。