HTML でのスタイルの使用例

このセクションでは、HTML タグでスタイルを使用する例を示します。まずスタイルシートを作成し、その中で一部のビルトインタグにスタイルを設定して、独自のスタイルクラスをいくつか定義します。その後、HTML 形式のテキストを含んでいる TextField オブジェクトにこのスタイルシートを適用します。

任意のテキストエディタまたは CSS エディタで新規ファイルを作成します。

このファイルに次のスタイルシート定義を追加します。

p {
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    display: inline;
}

a:link {
    color: #FF0000;
}

a:hover{
    text-decoration: underline;
}

.headline {
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px;
    font-weight: bold;
    display: block;
}

.byline {
    color: #666600;
    font-style: italic;
    font-weight: bold;
    display: inline;
}

このスタイルシートでは、<p> と <a> という 2 つのビルトイン HTML タグに対して、これらのタグのすべてのインスタンスに適用されるスタイルを定義しています。さらに、特定の段落とテキスト範囲に適用される .headline と .byline という 2 つのスタイルクラスを定義しています。

このファイルを html_styles.css として保存します。

テキストエディタまたは HTML エディタで新規テキストファイルを作成し、myText.htm という名前で保存します。

ファイルに次のテキストを追加します。

<p class='headline'>Flash adds advanced anti-aliasing rendering technology!</p><p><span class='byline'>San Francisco, CA</span>--Adobe Inc. announced today a new version of Flash that features a brand new font rendering technology called Advanced Anti-Aliasing, most excellent at rendering small text with incredible clarity and consistency across platforms. For more information, visit the <a href='http://www.adobe.com'>Adobe Flash web site.</a></p>

メモ

このテキストストリングをコピー & ペーストする場合、テキストストリングに改行が追加されたときには必ず削除してください。

Flash オーサリングツールで新規 Flash ドキュメントを作成します。

タイムライン内で ([ウィンドウ]-[タイムライン])、レイヤー 1 の最初のフレームを選択します。

[アクション] パネルを開き ([ウィンドウ]-[アクション])、[アクション] パネルに次のコードを入力します。

this.createTextField("news_txt", 99, 50, 50, 450, 300);
news_txt.border = true;
news_txt.html = true;
news_txt.multiline = true;
news_txt.wordWrap = true;

// 新しいスタイルシートと LoadVars オブジェクトを作成する
var myVars_lv:LoadVars = new LoadVars();
var styles:TextField.StyleSheet = new TextField.StyleSheet();

// ロードする CSS ファイルとテキストファイルの場所
var txt_url:String = "myText.htm";
var css_url:String = "html_styles.css";

// onLoad ハンドラを定義し、CSS ファイルをロードする
styles.onLoad = function(success:Boolean):Void {
    if (success) {
        /* スタイルシートのロードが正常に完了した場合は、 
            それをテキストオブジェクトに割り当て、 
            その HTML テキストをテキストフィールドに割り当てる。 */
        news_txt.styleSheet = styles;
} else {
        trace("Unable to load CSS file.");
    }
};
styles.load(css_url);

// onData ハンドラを定義し、表示するテキストをロードする
myVars_lv.onData = function(src:String):Void {
    if (src != undefined) {
        news_txt.htmlText = src;
    } else {
        trace("Unable to load HTML file");
    }
};
myVars_lv.load(txt_url);

メモ

この ActionScript では、外部ファイルからテキストをロードしています。外部データをロードする方法については、イメージ、サウンドおよびビデオの操作.を参照してください。

このファイルを、手順 3 で作成した CSS ファイルと同じディレクトリ内に news_html.fla という名前で保存します。

[制御]-[ムービープレビュー] を選択し、HTML テキストにスタイルが自動的に適用されることを確認します。

HTML でのスタイルの使用例

HTML をスタイルシートでフォーマットするには :