Expression WebでCSS3への導入
はじめに
Expression Web 4 Service Pack 1のリリースで、HTML 5 および CSS 3 (draft) へのサポートが追加されました。具体的に言うと、SP1は完全なHTML草案仕様書に基づく IntelliSense 、CSSプロパティパネルにおけるフルサポート、および［スタイル］ダイアログボックスでのCSSプロパティの選択のサポートが追加されます。さらに、Internet Explorer 9のサポートも追加され、その意味としてSuperPreviewとスナップショットがInternet Explorer 9を使ったプレビューページが可能となりました。
HTML 5 と CSS 3 草案機能を有効にするには、以下の操作を行います。
- ［ツール］メニューの［ページ編集オプション］をクリックします。
- ［ページ編集オプション］ダイアログボックスにて、［作成］タブをクリックします。
- ［DOCTYPE とセカンダリ スキーマ］の下、［ドキュメントの型宣言］のドロップダウンメニューから［HTML 5］を選択します。
- ［CSS スキーマ］の下、［スキーマのバージョン］ドロップダウンメニューから［CSS 3 draft］を選択します。
これがその機能を有効にする方法です。では、機能を提供するものを見てをみましょう。CSS 3は特に、CSS 2.1 を超える多数の拡張機能を提供しています。この記事では、CSS 3 で導入された新しい visual とレイアウトの機能のいくつか、そして、Expression Web がどのようにあなたのWebページにおいて手助けしてくれるのか見てみましょう。
CSS 3 のIntelliSense を使用する
Microsoft Expression Web はWeb ページまたは CSSファイルのソース コード内で直接作業するときに CSS を適用するプロセスを合理化する IntelliSense 機能を提供します。CSSのIntelliSenseは、任意のクラスセレクターまたは参照ソースを開くための外部CSSへの参照をクリックする際に有効なスタイルプロパティブロックをはじめたときに、終わり中かっこ (}) を挿入できます。IntelliSense では、入力に HTML 要素、クラス、id、プロパティ、および値をすばやく検索することもできます。たとえば、CSS セレクターをクリックし、[開始中括弧 ({}) を入力すると、IntelliSense には、アルファベット順でショートカット (自動ポップアップ) メニューのすべての利用可能なプロパティが表示されます。メニューからプロパティを選択またはプロパティを入力すると、IntelliSense は、選択したプロパティに適した値が含まれる別のショートカット メニューを表示できます。
次の表には、CSS の IntelliSense ショートカット メニューに表示されるアイコンが含まれます。
IntelliSense ショートカットメニューのアイコン アイコン 説明 - HTML 要素 セレクター
- Class セレクター
- ID セレクター- プロパティ - 要素 - カスタム要素セットのオプション - アクション
デザインビューでCSS 3機能を使用する
CSS 3 のより広く要求される機能の 1 つは、段落、見出し、テーブル、そして箇条書きリストなど、ボックススタイルの要素に角丸半径を割り当てる border-radius プロパティ です。
各ボックスの隅の半径を設定またはすべてのコーナーの 1 つの半径を割り当てることができます。また、楕円形のテキスト ボックスを生成させるためにそれぞれの角への異なる幅と高さの値を指定できます。
ボックスにドロップシャドウを追加するためにボックスをクリックします。画像エディタのエフェクトを生成することなく2½-D 外観をあなたのサイトに与えることができます。
Expression Webのデザインビュー（［スタイルの変更］ダイアログボックスのプレビューウィンドウを含む）はCSS 3の機能を正しくレンダリングされません。Expression Web内でプレビューするには、他の外部のプレビュー、CSS 3をサポートするブラウザーまたはスナップショットビュー（［パネル］メニューから［スナップショット］をクリック）で［ブラウザー］選択メニューにてInternet Explorer 9を選択してプレビューします。
ちなみに、上の図でのコードは以下の通りです。
.rounded-box {
border-radius: 150px / 50px;
border: 5px solid #FF9933;
padding: 20px;
width: 180px;
text-align: center;
box-shadow: 3px 5px #666666;
background-color: #FFFFCC;
}
私たちはたぶんCSS3の、より人気がある(そして、すべての早すぎで使用し過ぎた)特徴であると判明する能力のいくつかをチラッと紹介しました。 今度の記事では、私はフレキシブルなボックス・モデル、段組みレイアウト、移行、およびアニメーションについて取り上げるつもりです。
記事元：Expression IQ: An Introduction to CSS 3 in Expression Web
Expression Web 最新記事
- Expression Web 4でCSS 3カスタムセレクター
- Expression Web 4でCSS3ナビゲーション：続編
- Expression Web 4 SP1でCSS3ナビゲーションをデザインする
- Expression WebでCSS3への導入
- Expression Webでページ挿入機能を使ってみよう
