このシリーズの4番目のパートでは、web要素のサイズの計算方法について説明します。さらに、CSSを使用して、ページ上の要素およびテキストに一般的なレイアウトおよびスタイリングを適用する方法についても説明します。
5496-create-first-website_1408x792

注意:

このダウンロードには、このチュートリアルシリーズで使うCreative Cloudライブラリおよびプロジェクトファイル一式が含まれます。パート1で使用した開始ファイルでそのまま作成を続行するか、ダウンロードしたファイルから、前パートの完了時のファイルをご利用ください。

入門

このチュートリアルシリーズのパート4では、Dreamweaver 2015でシンプルでレスポンシブなwebサイトを作成する方法について説明します。ここまでの3つのパートでは、Dreamweaverでサイトを定義し、HTMLの論理構造を使用して2つのページを作成しました。図1は、ブラウザーにindex.htmlを読み込んだ場合のホームページの状態を示しています。

fig01
図1. 機能的だが魅力に欠けるBayside Beat webサイトのホームページ

このチュートリアルシリーズの残りのパート(最終パートを除く)では、CSSの使用と、画像の追加により、見栄えのしないページをシンプルながらもエレガントなデザインに変更します。このパートでは、幅と高さの計算の単純化、フォントの変更、そしてCSSデザイナーを使用した基本的なスタイルの作成方法について説明します。

幅と高さの計算を単純化するためのスニペットの作成

CSSでは、すべての要素がボックスとして扱われます。一般にデフォルトのCSSボックスモデルでは、要素の幅(width)と高さ(height)は要素自体にのみ適用されます。要素のコンテンツの周囲に追加したパディング(padding)は、計算には組み込まれません。同様にボーダーも計算には組み込まれません。そのため、要素の幅を250px、高さを100pxと宣言し、各サイドに20pxのパディングを追加して、さらに5pxの境界を追加すると、全体の幅は300px、高さは150pxとなります(図2を参照)。

fig02
図2. CSSボックスモデルはパディングとボーダーを幅と高さの追加分として扱う

そのため、ピクセルとパーセント値の寸法を組み合わせて使用する場合は特に、計算が困難になることがあります。パディングとボーダーは、要素のサイズに本来含まれる部分であると考えることができます。ページレイアウトをコントロールしやすくするために、多くのプロのwebデザイナーはスタイルシートの先頭に、要素の幅と高さにパディングとボーダーを含めるように定める2つの簡単なスタイルルールを追加します。このルールは非常に役立ちます。Dreamweaverのスニペットパネルでルールを保存しておけば、他のwebサイトのスタイルにも挿入できます。

  1. ドキュメントウィンドウでindex.htmlを開き、関連ファイルツールバーでresponsive.cssをクリックして(図3を参照)、分割ビューで外部スタイルシートを開きます。
fig03
図3. 関連ファイルツールバーを使用して現在のページに関連付けられたファイルのコードを表示
  1. コード内をクリックし、行2に空白行を作成して、/*幅と高さの計算を簡易化*/と入力します。CSSでは/*と*/に挟まれた文字はコメントとして扱われるため、入力したテキストは単にコードの内容を表すリマインダーの役割を果たします。

  2. 新しい行を作成し、htmlに続けて開き波括弧({)を入力します。スタイルルールは、1つのセレクターに続けて波括弧で囲んだプロパティまたは値のペアを入力して構成します。最も単純なタイプのセレクターは、山括弧なしのHTMLタグです。どのwebページでも最上位の要素は<html>であるため、htmlはページ内のすべての要素に影響するCSSセレクターです。

  3. 波括弧の直後でEnterキーまたはReturnキーを押します。次の行へインデントされ、CSSプロパティのコードヒントがポップアップ表示されます。boxと入力します。入力するにつれて、コードヒントがフィルタリングされ、すべての有効なプロパティから一致するテキスト(プロパティ名の途中の文字も含む)が検索されます(図4を参照)。
fig04
図4. コードヒントですばやくコードビューを編集
  1. 必要なプロパティがbox-sizingであるとします。矢印キーまたはマウスを使用して、コードヒント内でそのプロパティを選択し、EnterキーまたはReturnキーを押します。プロパティ名が自動補完され、最後にコロン(:)が付加されます。コードヒントが再度ポップアップ表示されます。コードを読みやすくするには、スペースを1つ追加した後、リストからborder-boxを選択し、行の最後にセミコロン(;)を付加します。
  2. 次の行に、閉じ波括弧(})を入力して、スタイルルールの定義を完了させます。

  3. 次の行で、以下のスタイルルールを作成します。
*, *:before,
*:after {
    box-sizing: inherit;
}

    ここではグループセレクターと呼ばれるものを使用します。このグループセレクターは、コンマで区切った3つのセレクターで構成され、同じスタイルを全体に適用するために使用します。アスタリスク(*)は単独で汎用セレクターであるため、すべての要素に適用できます。他の2つのセレクターは、擬似要素と呼ばれるものを使用します。

    このスタイルルールの詳細は上級者向けの内容です。webデザイン学習のこの段階で理解しておく必要があるのは、そのルールが指示どおりにジョブを実行する点についてのみです。重要なのは、正しく入力することです。box-sizingプロパティに続くコロンの後にスペースを入力することはできますが、*:before*:afterのコロンの前後にスペースを入力することはできません。

  1. スニペットパネル(デザインワークスペースのファイルパネルにドッキングされている)を開き、CSS_Snippetsフォルダーを選択します(図5を参照)。
fig05
図5. 既に再利用可能なコードスニペットが選択されているスニペットパネル
  1. コードビューで、作成したコメントと2つのスタイルルールを選択し、右クリックして、コンテキストメニューから「新規スニペットを作成」を選択します(図6を参照)。
fig06
図6. スタイルルールをスニペットパネルに保存

    スニペットダイアログボックスが開き、コードの挿入欄に選択したコードが表示されています。

  1. 「名前」フィールドにBox-sizing: border-boxと入力します。「説明」に幅と高さに、paddingとborderを含めると入力します。「スニペットの種類」で「ブロックの挿入」ラジオボタンを選択します。「プレビュータイプ」はデフォルトの「コード」のままにしておきます。パネルが図7のようになります。
fig07
図7. box-sizingコードをスニペットとして保存
  1. OK」をクリックしてスニペットを保存します。スニペットパネルでCSS_Snippetsフォルダーを選択したため、新規スニペットは自動的に同じフォルダーに保存されます。

スタイルシートにこのスニペットを組み込むと、全体の寸法に影響することなく、要素のパディングとボーダーを調整できます。

スニペットはCreative Cloudと同期できます。スニペットの使用方法について詳しくは、オンラインドキュメントを参照してください。

Adobe Edge Web Fontsのインストール

欧文フォントの場合、ブラウザーではデフォルトで、(文字のストロークの終端に装飾的なラインが付けられる)セリフフォントであるTimesまたはTimes New Romanが使用されます。CSS font-familyプロパティを使用してフォントを選択できますが、通常、選択できるフォントはサイトを表示するために使用しているデバイスで使用可能なフォントに制限されます。ページとともにダウンロードしたwebフォントを使用すると、この制限が適用されません。Dreamweaver内からは、Adobeがホストする多数の無料webフォントにアクセスできます。最初に、Dreamweaver内でそれらのフォントを有効にする必要があります。

  1. 修正/フォントを管理を選択して、図8に示すパネルを開きます。
fig08
図8. フォントを管理パネルから様々なフォントにアクセス可能
  1. Source Sans Proというフォントを探しているとします。検索フィールドに名前の入力を開始すると、3つのオプションが表示されます。中央のフォントSource Sans Proをクリックします。チェックマークは、フォントが選択されていることを示します(図9を参照)。
fig09
図9. 関連フォントのファミリーに属するSource Sans Pro

    Source Sans Proはサンセリフフォントです。つまり、文字のストロークの終端に装飾的なラインは付きません。Source Sans ProとSource Serif Proは、サンプルを見ればその違いが明確にわかります。

  1. Adobe Edge Web Fontsは、使用許諾契約書に同意すれば無料で使用できます。パネルの下部にあるリンクをクリックすると、利用条件が表示されます。

  2. 利用条件に同意したら、「完了」をクリックします。

Edge Web Fontsが個人の設定フォルダーにインストールされ、Dreamweaverで作成するすべてのサイトで使用できるようになります。

CSSデザイナーを使用してページに基本的なスタイルを追加

コードヒントを使用すると、コードビューでスタイルルールをすばやく作成できる点については、既に説明しました。Dreamweaverにはさらに、CSSデザイナーというパネルがあり、これを使用すると、ライブビューで変更状態を確認しながらページのスタイルを設定できます。このセクションでは、CSSデザイナーを使用して、基本的なスタイルをresponsive.cssに追加し、それらのスタイルがindex.htmlへどう反映されるかを確認します。

  1. ドキュメントウィンドウでindex.htmlを開き、「ライブ」ボタンをクリックすると、ペイン全体にライブビューが表示されます。

  2. 画面の右側にあるパネルグループ(前のセクションで使用したスニペットパネルにドッキングされている)からCSSデザイナーのタブをクリックして開きます。CSSデザイナーは4つのペイン(「ソース」、「@メディア」、「セレクター」、「プロパティ」)で構成されています(図10を参照)。
fig10
図10. 1つの場所でスタイルを作成および管理できるCSSデザイナー

CSSデザイナーのレイアウトはデフォルトで2カラム構成で、プロパティペインがデザインワークスペースの右側に表示されます。小型のモニターを使用する場合は、パネルグループの端を内側にドラッグすると、1カラムレイアウトに変更できます。

スタイルルールを新規作成するときには、通常、パネル上部にある「すべて」ボタンが選択されている状態にしておきます。

各ペインの役割は次のとおりです。

  • ソース:現在のページ内のすべてのスタイルの取得元がリストされます。これは、responsive.cssなどの外部スタイルシートである場合があり、ページにブロックとして埋め込まれているか、動的にリンクされています。

  • @メディア:各種ソースで使用されたメディアクエリーがリストされます。このペインについては、パート7で詳しく説明します。

  • セレクター:選択したソース内のすべてのCSSセレクターがリストされます。大きなスタイルシートの場合は、上部にある検索フィールドでセレクターを検索すると便利です。

  • プロパティ:セレクターのプロパティと値を定義します。「セットを表示」チェックボックスがオンになっている場合は、設定したプロパティのみがペインに表示されます。チェックボックスをオフにした場合は、レイアウト、テキスト、ボーダーおよび背景にもっともよく使用されるプロパティが50個程度リストされます。
  1. CSSデザイナー上部の「すべて」ボタンが選択されていることを確認します。

    ソースペインでresponsive.cssを選択します。

    @メディアペインはパート7まで必要ないため、セレクターペインの上端を上方向にドラッグして閉じます。

    セレクターペインに、作成済みのセレクターがリストされています。最後のセレクター(#wrapper)にはまだスタイルが設定されていません。セレクターを新規作成すると、別のセレクターが選択されていなければ、必ずスタイルシートの一番下に挿入されます。スタイルは論理順に並べておくことをおすすめします。「*, *:before, *:after」を選択し、プロパティペインの右上にある「セットを表示」チェックボックスをオフにします。

  2. セレクターペインの左上にあるプラスボタンをクリックすると、新しいセレクターが作成されます。ライブビューで現在選択されている内容にもとづいて、セレクターの名前が提案されます。提案された名前を無視し、bodyと入力します。EnterキーまたはReturnキーを押して、変更を確認します。新しいセレクターをハイライトして(図11を参照)、プロパティペインでプロパティ値を設定することで、ページ内のすべての項目に影響するスタイルルールを作成できます。
fig11
図11. ページ本文にスタイルを適用するためのプロパティの設定準備
  1. 上部にある「レイアウト」セクションに、マージンプロパティを設定するためのビジュアルツールが表示されます。ここではこのツールは使用せず、「ショートハンドを設定」をクリックして、編集可能なフィールドを開き、0と入力します。EnterキーまたはReturnキーを押して、編集を確認します。

    デフォルトのマージン8pxを要素から削除すると、ライブビューの表示内容がわずかに左上に移動することがわかります。

    プロパティペインのmarginプロパティが太字で表示され、このプロパティが設定されたことが示されます。また、ビジュアルツールで各サイドの値が0に設定されています(図12を参照)。
fig12
図12. すべてのサイドで0に設定されているマージンプロパティ
  1. プロパティペインの上部にあるテキストアイコン をクリックして、テキストプロパティのセクションに移動します。最初にリストされているcolorプロパティは、テキストのカラーを設定します。このプロジェクトのすべてのカラーは、パート1でインストールしたCCライブラリ内にあります。

  2. CCライブラリパネルはCSSデザイナーにドッキングされているため、「CCライブラリ」タブをドラッグしてパネルグループから切り離します。これにより、ドキュメントウィンドウ上にフローティングした状態になります。

  3. colorプロパティに適用するカラーをクリックし、カラーピッカーを開きます。

  4. 右下の「Hex」ボタンが選択されていることを確認します。これにより、すべてのブラウザーでサポートされている16進表記を使用してカラーが設定されます。

    カラーピッカーの右下にあるスポイトツールを選択し、CCライブラリパネルでライトグレーのカラースウォッチからカラーをサンプリングします(図13を参照)。これにより、カラーが#4B4B4Bに設定されるため、白地に黒というコントラストのはっきりした色合いより優しめの色合いになります。

fig13
図13. スポイトツールを使用してカラーをサンプリングする

    カラーピッカーの外側をクリックして閉じます。

  1. font-familyの右側をクリックして、一般的に使用されるフォントスタックのメニューを開きます。既にインストールしてあるAdobe Edge Web Fontsを選択します。一番下にリストされているsource-sans-proがこのフォントに該当します(図14を参照)。
fig14
図14. 一般的なフォントスタックの下にリストされているwebフォント

    フォントスタックには、一般的に使用されるフォントが設定順にリストされます。ユーザーのデバイスで最初のフォントを使用できない場合、ブラウザーは2番目のフォントを試行し、適切なフォントが見つかるまで順次試行します。

    Edge Web Fontsを選択すると、font-familyに加えて、font-styleプロパティおよびfont-weightプロパティの値が自動的に設定されます。さらに、関連ファイルツールバーに新しいファイル(source-sans-pro:n2,n4:default.js)が表示され、ソースペインに読み取り専用ソースが(場合によっては複数)表示されます。新しいファイルと読み取り専用ソースは、Adobeサーバーから動的にフォントを読み込みます。これらのフォントは編集できません。

  1. font-styleの値(normal)には問題はありませんが、font-weightの値(200)は本来はextra-lightの幅値です。

    200をクリックして、フォントの太さを選択できるメニューを開き、normalの値である400を選択します(図15を参照)。
fig15
図15. Adobe Edge Web Fontsでの数値を使用したフォント幅の指定

    font-weightプロパティは、100(light)~900(heavy)の数値(100段階で増加)で設定するか、normal(400に相当)、bold(700)、bolder、lighterのいずれかのキーワードを使用して設定します。Edge Web Fontsは必ず数値で指定します。使用可能な値はフォントによって異なります。図15に示すように、source-sans-proでは100、500、800がサポートされません。

  1. font-sizeの横をクリックすると、フォントに適用できる単位とキーワードのメニューが開くため、emを選択します(図16を参照)。
fig16
図16. font-sizeプロパティの単位としてemを選択

    ライブビューに何も表示されなくなりました。ここで皆さんにお伝えしたいのは、『The Hitchhiker’s Guide to the Galaxy』の表紙の言葉「Don’t panic!(あわてないで)」です。

    単位を選択すると、値が0に設定されます。emは、現在のフォントの高さにもとづくプロポーショナルな単位であるため、0に設定すると、テキストが表示されなくなります。

    単に1と入力すれば、テキストは再び表示されます。bodyスタイルルールで値を1emに設定すると、段落およびリスト項目にブラウザーのデフォルト値、つまり通常は16pxが使用されます。

  1. プロパティペインの上部にある背景アイコンをクリックして、背景プロパティに移動します。

  2. 今回は、カラーピッカーを使用してbackground-colorプロパティを設定する代わりに、CCライブラリパネルで薄青色のカラースウォッチをクリックします(図17を参照)。そうすると、16進表記のカラーがクリップボードにコピーされます。
fig17
図17. CCライブラリパネルのカラースウォッチをクリックして16進値をコピー

    background-colorに適用するカラーの右側をクリックすると、編集可能なフィールドが開きます。値をペーストして、EnterキーまたはReturnキーを押して変更を確認します。これにより、ページの背景が薄青色になります。

  1. プロパティパネルの右上にある「セットを表示」チェックボックスをオンにして、ページ本文に設定したすべてのCSSプロパティを確認します(図18を参照)。
fig18
図18. 「セットを表示」チェックボックスをオンにしてセレクターのスタイル定義を確認

CSSデザイナーで直接プロパティを設定

CSSデザイナーの各種セクションに共通しているプロパティを選択すると、CSSに対する理解を深めることができます。CSSについて既によくご存じの場合は、プロパティと値の設定方法のみを習得することができます。この操作は、プロパティペインの下部にある「その他」セクションでおこないます。コードヒントを使えば、入力をスピーディーにおこなえます。それでは操作を試してみましょう。この操作を初めておこなう場合でも、以下の手順に従って確実に操作を実行できます。

  1. CSSデザイナーの上部にある「すべて」ボタンが選択されていること、およびソースペインでresponsive.cssが選択されていることを確認します。必要に応じて、プロパティペインの右上にある「セットを表示」チェックボックスをオフにします。

  2. セレクターペインで#wrapperを選択します。ハッシュはそれがIDセレクターであることを示すため、スタイルルールはIDがwrapperである項目に適用されます。該当項目がリストに含まれていない場合は、セレクターペインの左上にあるプラスボタンをクリックし、入力フィールドに#wrapperと入力することで作成できます。

    このセレクターにはスタイルが設定されていないため、プロパティペインには、「その他」が表示されるとともに、プロパティと値を追加するための2つの入力フィールドが表示されます。

  3. プロパティを追加」フィールド内をクリックし、widthと入力します。入力するにつれて、一致するプロパティがコードヒントに表示されます。widthがハイライトされたら、Tabキーを押すか、EnterキーまたはReturnキーを押して、選択します。

  4. 2番目のフィールドがハイライトされます。100%と入力し、EnterキーまたはReturnキーを押します。これにより、wrapperが全画面で表示されます。

  5. wrapperの表示範囲を狭めるために、別のプロパティmax-widthを追加し、その値を1000pxに設定します。

  6. wrapperを中央揃えするため、marginプロパティを追加し、その値を0 autoに設定します。これにより簡単に、上下のマージンをなしに、左右のマージンを自動に設定することができます。ドキュメントウィンドウが1000px(max-widthの値)より広い場合は、ページコンテンツがライブビューの中央に表示されます。

  7. background-colorプロパティを追加し、その値をwhiteに設定します。これは、すべてのブラウザーで認識されるカラーキーワードです。この時点で、プロパティペインには#wrapperセレクターのスタイル定義が4つリストされています(図19を参照)。
fig19
図19. プロパティペインの「その他」セクションでスタイルルールを直接作成可能
  1. ファイル/すべての関連ファイルを保存を選択し、作業内容を保存します。ページのスタイルを設定しているときには、定期的にこの操作をおこなってください。

これで、白地の背景の中央にテキストが表示されます。ドキュメントウィンドウの幅が1000pxより広い場合は、本文の薄青色の背景が両端に表示されます。ページの上部には不自然な隙間があり、テキストはwrapperの<div>の左に詰まって表示されています。これらの問題についてはパート5で取り上げます。ここではまず、webページのピクセル測定値について説明しておきます。

ピクセルと高密度ディスプレイ

ピクセルとは、コンピューターディスプレイを形成する小さなドットのことです。初期のwebでは、1pxは1つのドットと同じサイズでした。技術が進歩するにつれ、ドットのサイズは徐々に小さくなりました。CSSはこの変化を予想していました。単位として使用されるピクセルは、デバイスの画面で使用される物理的なピクセルのサイズに依存しません。そのため、wrapper <div>の最大幅として1000pxを設定した場合、旧型のモニターでも最新の高密度ディスプレイでもほぼ同じサイズで表示されるのです。

次のステップ

サイトの外観は徐々に改善されてきましたが、まだ対処すべきことは数多くあります。次のステージ「パート5:要素の周囲のパディングを調整し、画像をレスポンシブにする」では、上下左右に生ずるスペースの問題を解決し、レスポンシブな画像でページを装飾します。

01/13/2020

提供元:David PowersTom Alex Buch

このページは役に立ちましたか。