CodeZine(コードジン)

特集ページ一覧

Expression WebでWebサイトを作ってみよう (1)

.NET開発者のためのWebサイト制作入門(前編)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/10/22 14:00

目次

Expression Webで用意されているテンプレート

 Expression Webでは、25種類のWebサイトテンプレート、および9種類のCSSレイアウトテンプレートが用意されています。

 Webサイトテンプレートは、[ファイル]-[新規作成]-[ページ]をクリックすると表示される[新規作成]ダイアログボックスの[Webサイト]タブで選択できます。イベント、小企業サイト、組織サイト、パーソナルWebサイトなど、豊富なテンプレートが用意されています。任意のWebサイトテンプレートを利用して適宜文字などを置き換えることで、すぐにWebサイトを完成させることができます。

Expression Webで用意されている代表的なWebサイトテンプレート
 
 
 
 
 
 

 CSSレイアウトテンプレートは、同様に[新規作成]ダイアログボックスの[ページ]タブで選択できます。CSSレイアウトテンプレートを利用することで、CSSが苦手な開発者の方でも簡単にレイアウトを行うことができます。

Expression Webで用意されているCSSレイアウトテンプレート
 
 
 
 
 
 
 
 
 

スタイルシートの適用と管理

 Expression WebはWeb標準に準拠したサイト構築ツールのため、基本的に書式はスタイルシートで定義します。例えば、部分的にテキスト「赤色」を選択して、その部分の文字色を赤に変えた場合、<span class="style1">赤色</span> といった感じになり、CSSクラススタイル「.style1」が生成されます。

 また、自動生成されたスタイルが使われなくなった場合は、自動的に削除されるので、余分なスタイルシートが残ることはありません。なお、自動的に「.style1」など付けられたスタイルシートの名前は後で簡単に変更でき、変更されたスタイル名が使われた部分が自動更新されます。「スタイルシートはどうも苦手なんだけど……」という開発者にとって、Expression Webはとても使いやすいツールです。

 [スタイルの適用]作業ウィンドウを使うと、一度作成したスタイルを他の部分に適用するのも簡単です。CSSスタイルのプレビューが表示されるので、必要なスタイルをスムーズに見つけられます。スタイルを適用するには、目的の部分を選択した状態で、適用したいスタイルを選びます。

[スタイルの適用]作業ウィンドウ
[スタイルの適用]作業ウィンドウ

 また、CSSスタイルの一覧からCSSスタイルをポイントすると、そのコードがポップアップ表示されます。

任意のCSSスタイルをポイントしたときの画面
任意のCSSスタイルをポイントしたときの画面

 スタイルを修正したい場合は、▼をクリックして[スタイルの変更]を選択し、[スタイルの変更]ダイアログボックスを表示します。下部のプレビューで確認しながら、スタイルを変更することができます。

[スタイルの変更]を選択すると、
[スタイルの変更]を選択すると、
[スタイルの変更]ダイアログボックスが表示される
[スタイルの変更]ダイアログボックスが表示される

 さらに、そのスタイルが定義されているスタイルシートのコードに移動することもできます。▼をクリックして[コードに移動]を選択します。

目的のCSSスタイルのメニューから[コードに移動]を選択
目的のCSSスタイルのメニューから[コードに移動]を選択
編集ウィンドウが分割ビューに切り替わり、上部にコード部分が表示される
編集ウィンドウが分割ビューに切り替わり、上部にコード部分が表示される

 [スタイルの管理]作業ウィンドウでは、CSSスタイルの順序を変更したり、定義場所を外部CSSファイルに移動したりすることもできます。下の図のようにドラッグ操作で、作業中のページに生成されたCSSスタイルを外部CSSファイルに簡単に移動できます。さらに、スタイルシートのクラス名を変更した場合は、そのスタイルが使われている部分の名前も自動的に書き換えられるため、リンク切れの心配がありません。

スタイルを外部CSSファイルに移動する
スタイルを外部CSSファイルに移動する

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Expression Webチュートリアル

著者プロフィール

  • 小濱 良恵(コハマ ヨシエ)

    Microsoft MVP for Expression Web MSソフトの解説書やWeb記事を執筆するテクニカルライター。Expression Webの前身となるFrontPageは2000バージョンから使用しはじめ、個人サイト(www.wanichan.com) においてFrontPageや...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5