このチュートリアルでは、HTMLスタイルとクラススタイルを含む外部スタイルシートを作成し、それをWebサイトのページに適用します。 コーディングの知識は必要ありません。すべてのコーディングはGoLiveで自動的に処理されます。
サイトを開き、ファイル／新規スペシャル／カスケーディングスタイルシート（CSS）を選択します。 CSSエディタの右のフレームで、「詳細設定」オプションを展開し、「コメントを作成」をクリックします。 CSSエディタの「CSS定義」タブにコメントプレースホルダが挿入されます。 右のフレーム内をクリックし、「Created by」と入力し、続けて名前と現在の日付を入力します。 サイトのweb-contentフォルダにCSSファイルを保存します。
サイトの複数のページで共通のスタイルエレメントを共有する場合は、外部スタイルシートを使用します。 ページごとに内部スタイルシートを作成する場合と比べて、外部スタイルシートを参照すると、ファイルのサイズが小さくなり、１つのスタイルシートを編集するだけで複数のページを更新できます。 特定のページからサイトのweb-contentフォルダに内部スタイルシートを書き出して保存し、この内部スタイルシートに基づいて外部スタイルシートを作成することもできます。逆に、外部スタイルシートから内部スタイルシートにスタイルを読み込むこともできます。
 |
CSSエディタで新規エレメントスタイルを作成ボタンをクリックしてマウスボタンを押し下げたままにし、新規エレメントスタイルを作成メニューから「h1」を選択します。 CSSエディタの「セレクタとプロパティ」タブをクリックし、コメントフィールドにコメントを入力します。 h1（ヘッダー１）エレメントの現在のフォントサイズ、フォントの太さ、マージンの設定が表示されます。
HTMLスタイルは特定のエレメントに適用されます。そのエレメントのインスタンスがドキュメント内に複数ある場合は、すべてのインスタンスに自動的に適用されます。 OperaやMicrosoft Internet Explorer 4.0以降などの大半の新しいブラウザはCSSに対応していますが、CSSに対応していないWebブラウザではエレメントに標準のHTML書式が適用されます。
 |
CSSエディタの「フォントプロパティ」タブをクリックし、カラーボックスの右下隅をクリックして、表示されるスウォッチから色を選択します。別のスウォッチセットを使用する場合は、カラースウォッチの下のリストから選択します。 サイズメニューから「Pixel」を選択し、「サイズ」テキストボックスに「22」と入力します。 新規フォントファミリーを作成ボタンをクリックして、表示されるメニューからフォントファミリーを選択します。 h1エレメントに適用した色、サイズ、フォントが、CSSエディタの下部にあるスタイルをプレビューフレームに表示されます。 「セレクタとプロパティ」タブをクリックし、色とフォントファミリーのプロパティが追加されてフォントサイズの値が変更されたことを確認します。
CSSエディタには、GoLive（および大半のブラウザ）がサポートしているフォント、テキスト、ブロック、マージン、パディング、境界線、アウトライン、リストアイテム、背景などのすべてのスタイルプロパティが含まれています。 CSSエディタでは各プロパティを安全にテストできます。スタイルに各プロパティを適用し、スタイルをプレビューフレームでスタイルのアピアランスをプレビューしてみてください。 設定したプロパティが気に入らない場合は、編集／取り消し CSSプロパティを変更を選択します。
 |
CSSエディタの下部にある新規クラススタイルを作成ボタンをクリックし、CSSエディタの「CSS定義」タブにクラススタイルの名前を入力します。例えば、「.myclassstyle」と入力します（クラススタイル名にはスペースや特殊な記号を含めません）。
クラススタイルは、共通のHTMLエレメントを共有するすべてのインスタンスに適用せずに、ページの選択したテキストまたはオブジェクトに適用します。適用先は明示的に指定する必要があります。このチュートリアルでは、後でクラススタイルを実際に適用してみます。 テキスト内のオブジェクトに特別な書式を適用して目立つようにする場合はクラススタイルを使用します。
 |
CSSエディタの「フォントプロパティ」タブをクリックし、背景色フィールドをクリックしてクラススタイルの背景色を設定します。 カラーパレットで、カラースライダをドラッグして色を選択します。Webセーフカラーだけを使用するには、カラーパレットメニューから「Webカラーのみ」を選択します。カラースライダをドラッグすると、一番近いWebセーフカラーにスナップします。カラースライダを使用せずに、カラーパレットの最近使用した色リストから色を選択することもできます。 CSSエディタで「マージンとパディングのプロパティ」タブをクリックし、「右」と「左」のマージンテキストボックスに「15%」と入力します。 スタイルをプレビューフレームで、サンプルテキストに適用した色とマージンを確認します。
CSSエディタでは、スタイルをプレビューフレームでスタイルのプロパティをプレビューできるほかに、「ソース」タブでスタイルシートのソースコードを表示することもできます。 「ソース」タブの内容は、CSSエディタで変更を行うたびに自動的に更新されます。 「ソース」タブでテーマメニューからソースコードのテーマを選択し、さまざまな色とフォントの組み合わせでソースコードを表示できます。テーマはソースの環境設定でカスタマイズできます。 「ソース」タブでCSSをハンドコーディングすることもできます。GoLiveのコードの自動入力機能を使用すると、覚えにくいエレメントや属性を調べることなく、コードを記述できます。
 |
スタイルシートを保存し、CSS エディタを閉じます。 外部スタイルシート内のスタイルを適用する各ページをサイトで選択します（複数のファイルを選択するには、Ctrlキーを押しながら各ファイルをクリックします）。次に、CSSパレットで外部CSSに新規リンクを作成ボタンをクリックします。 CSSパレットからサイトウィンドウの「ファイル」タブの外部スタイルシートにポイント＆シュートをドラッグします。
ワンステップで、HTMLエレメントスタイルおよびクラススタイルを含むスタイルシートをWebサイトの複数のページに適用しました。 外部スタイルシートを更新して、その変更を保存するだけで、これらのページを更新して新しいスタイルを使用できます。 これらのページから外部スタイルシートの参照を削除する場合は、サイトウィンドウの「ファイル」タブでページを選択し、CSSパレットで外部スタイルシートを選択して、選択したアイテムを削除ボタンをクリックします。
 |
手順６で外部スタイルシートを適用したページのいずれかを開き、テキストのブロックを選択します。 CSSパレットの「スタイルの適用」タブで「ブロックスタイル」を選択します。または、文字／CSS スタイルを選択するか、CSSスタイルを適用ツールバーボタンをクリックして、「ブロックスタイル」を選択します。 スタイルをテキストに実際に適用する前に、効果のプレビューとスタイルのプロパティがポップアップウィンドウに表示されます。
カスケーディングスタイルシート（CSS）を使用すると、コードが簡素化され、カスタマイズとプレゼンテーションの制御の範囲が増え、サイトの管理がより容易になります。 このチュートリアルでは、GoLiveの強力なCSS機能のほんの数例を紹介しています。 CSSエディタとCSSパレットのさまざまなオプションを使用して、機能が向上したスタイルシートをサイトで試してみてください。
 |
| その他関連チュートリアルや製品情報については以下のURLをご覧ください http://www.adobe.co.jp/framemaker/ |
||
| 2002 Adobe Systems Incorporated. All rights reserved. | ||