Adobe
サインイン 注文状況 マイアカウント
インデックスへ戻る

リソース
bullet 印刷用
簡素化されたCSS
page 1 2 3
CSS(カスケーディングスタイルシート)を使用すると、Webページのレイアウトと書式を全面的に制御できます。 Adobe® GoLive® CSでは、必要な機能を一体化したCSSエディタを使用してCSSスタイルを簡単に作成して適用できます。CSSエディタでは、スタイルシート、スタイル、スタイルプロパティを1つのウィンドウで簡単に作成できます。
このチュートリアルでは、HTMLスタイルとクラススタイルを含む外部スタイルシートを作成し、それをWebサイトのページに適用します。 コーディングの知識は必要ありません。すべてのコーディングはGoLiveで自動的に処理されます。
main
外部スタイルシートを作成

サイトを開き、ファイル/新規スペシャル/カスケーディングスタイルシート(CSS)を選択します。 CSSエディタの右のフレームで、「詳細設定」オプションを展開し、「コメントを作成」をクリックします。 CSSエディタの「CSS定義」タブにコメントプレースホルダが挿入されます。 右のフレーム内をクリックし、「Created by」と入力し、続けて名前と現在の日付を入力します。 サイトのweb-contentフォルダにCSSファイルを保存します。

サイトの複数のページで共通のスタイルエレメントを共有する場合は、外部スタイルシートを使用します。 ページごとに内部スタイルシートを作成する場合と比べて、外部スタイルシートを参照すると、ファイルのサイズが小さくなり、1つのスタイルシートを編集するだけで複数のページを更新できます。 ページの内部スタイルシートをサイトのweb-contentフォルダに書き出して保存し、この内部スタイルシートに基づいて外部スタイルシートを作成することもできます。逆に、外部スタイルシートから内部スタイルシートにスタイルを読み込むこともできます。

step01_int
HTMLスタイルを作成

CSSエディタで新規エレメントスタイルを作成ボタンをクリックしてマウスボタンを押し下げたままにして、新規エレメントスタイルを作成メニューから「h1」を選択します。 CSSエディタの「セレクタとプロパティ」タブをクリックし、コメントフィールドにコメントを入力します。 h1(ヘッダー1)エレメントのフォントサイズ、フォントの太さ、マージンの現在の設定が表示されます。

HTMLスタイルは特定のエレメントに適用されます。そのエレメントのインスタンスがドキュメント内に複数ある場合は、すべてのインスタンスに自動的に適用されます。 OperaやMicrosoft Internet Explorer 4.0以降などの大半の新しいブラウザはCSSに対応していますが、CSSに対応していないWebブラウザではエレメントに標準のHTML書式が適用されます。

step02_int
HTMLスタイルのプロパティを定義

CSSエディタの「フォントプロパティ」タブをクリックし、カラーボックスの右下隅をクリックして、表示されるスウォッチから色を選択します。別のスウォッチセットを使用する場合は、カラースウィッチの下のリストから選択します。 サイズメニューから「Pixel」を選択し、「サイズ」テキストボックスに「22」と入力します。 新規フォントファミリーを作成ボタンをクリックして、表示されるメニューからフォントファミリーを選択します。 h1エレメントに適用した色、サイズ、フォントが、CSSエディタの下部にあるスタイルをプレビューフレームに表示されます。 「セレクタとプロパティ」タブをクリックし、色とフォントファミリーのプロパティが追加されてフォントサイズの値が変更されたことを確認します。

CSSエディタには、GoLive(および大半のブラウザ)がサポートしているフォント、テキスト、ブロック、マージン、パディング、境界線、アウトライン、リストアイテム、背景などを含むすべてのスタイルプロパティが含まれています。 CSSエディタでは各プロパティを安全に実験できます。スタイルに各プロパティを適用し、スタイルをプレビューフレームでスタイルのアピアランスをプレビューしてみてください。 設定したプロパティが気に入らない場合は、編集/取り消し CSSプロパティを変更を選択します。

step03_int
トップへ戻る
next