ホームページ作成/ホームページ作成補助ソフト

無料のウェブ作成ソフトMicrosoft Expression Web 4(4ページ目)

Microsoft製のホームページ作成ソフト「Microsoft Expression Web 4」が開発終了に伴って無料公開されています。HTMLやCSSだけでなくJavaScriptやPHPも含めたソース補完機能、入力支援機能、文法チェック機能などを備えた、統合ホームページ作成フリーソフトです。この機会に使ってみてはいかがでしょうか。Windows10でも動作し、HTML5で記述することもできます。日本語版のインストール方法と各種機能をご紹介いたします。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

「Microsoft Expression Web 4」には、前ページで紹介したソースの自動補完機能以外にも、様々な機能が用意されています。

CSSソースを自力で書くことなくスタイルを一括作成

CSSソースを直接記述する際の自動補完・入力支援機能とは別に、直接CSSソースを書くことなく、ダイアログから装飾別にマウスで指定するだけで、簡単にスタイルを作成できる機能も用意されています。この機能を使えば、どの装飾がどんなプロパティ名だったのかを覚えていなくても問題ありません。その場でプレビューも表示されるため、デザインしやすいでしょう。

CSSソースを書くことなく、スタイルを一括作成できるウインドウもある

CSSソースを書くことなく、スタイルを一括作成できるウインドウもある



 

便利な編集支援機能

スニペット機能
編集領域の右上には、マウス操作で頻出要素を追加できる「ツールボックス」や、ある決まった役割のソースを簡単に入力できる「スニペット」があります。スニペット機能には、下図のようにサンプルとしていくつかが最初から登録されています。

決まったソースを登録しておき、簡単入力できるスニペット機能

決まったソースを登録しておき、簡単入力できるスニペット機能


例えば、「Box Shadow」をダブルクリックすると、「ボックスに影を付けるCSSソース」(各種のベンダープレフィックスも付いた実用的なソース)が一括入力されます。スニペットは自分で作成できるため、頻繁に入力する一連のソースを登録しておくと便利です。


 
特殊記号の簡単入力機能
ウェブ上では、Copyright記号やハートマークなど、特殊な文字を表示することもできます。その際には、「&」記号に続けてキーワードや数値を記述する「文字実体参照」・「数値文字参照」という記述方法を使います。それらをいちいち覚えていなくても、メニューから[挿入]→[記号]を選択するだけで、下図のように手軽に入力できます。

特殊記号も一覧から簡単に入力できる

特殊記号も一覧から簡単に入力できる



 
面倒な表(テーブル)ソースの簡単入力機能
表を作成する場合、table要素・tr要素・td要素など、表を構成する各種HTMLタグの入力が面倒です。メニューから[テーブル] → [テーブルの挿入]を選ぶと、下図のように表組みソースを簡単に作成できるダイアログが表示されます。これを使えば、面倒な入力の手間を省けます。

面倒なtable関連要素も簡単に入力できる

面倒なtable関連要素も簡単に入力できる



 

文法チェック・アクセシビリティチェック機能

HTMLやCSSの文法を確認したり、アクセシビリティ(閲覧・利用のしやすさ)を確認する機能も用意されています。右図は、HTMLソースの文法をチェックした結果です。エラーのある行番号と、エラー内容が詳しく日本語で表示されるため、分かりやすくて便利です。

文法チェック結果は、日本語で詳しく表示される

文法チェック結果は、日本語で詳しく表示される



 

デフォルトはXHTML1.0だが、HTML5にも設定できる

HTML5でソースを生成する

HTML5でソースを生成する

この「Microsoft Expression Web 4」が無料化されたのは2012年ということもあり、新規作成したページのHTMLは、初期設定では「XHTML1.0 Transitional」で記述されるようになっています。

しかし、これからウェブページを作るなら、XHTMLではなくHTML5で記述する方が望ましいでしょう。

以下の手順で、新規作成時にHTML5のソースを生成するよう設定できますから、ぜひ事前に設定しておくことをお勧めいたします。


 
新規作成時にHTML5のソース(ひな形)を使うように設定する手順:
  1. メニューの「ツール」から「ページ編集オプション」をクリックします。すると、下図のウインドウが表示されます。
  2. このウインドウ内には複数のタブがあり、その中に「作成」タブがあります。その中に見える「ドキュメントの型宣言」項目の値が、初期状態では「XHTML 1.0 Transitional」になっています。ここを「HTML 5」に修正して下さい。
  3. 最後に「OK」ボタンでウインドウを閉じます。
「ページ編集オプション」ダイアログでHTML5に設定を変更

「ページ編集オプション」ウインドウで設定をHTML5に変更


上記の手順で設定しておけば、次回に新規作成されるページからは、HTML5でソースが生成されるようになります。


 

作ったページが古いInternet Explorerでどう見えるのかを確認できる

「Microsoft Expression Web 4」には、現在編集中のページを古いバージョンのブラウザで表示した場合にどう見えるのかを確認できる「SuperPreview」というツールが付属しています。作成中のページだけでなく、URLを指定することでウェブ上の任意のサイトを表示確認することもできます。このツールの使い方は、記事「IE6~IE9を同時に表示確認できるMicrosoft純正ソフト」でご紹介していますので、ご参照下さい。

※ただし、このツールをWindows7以降のOSで使う場合は、IE8やIE9などでの表示確認はできない可能性があります。また、そもそもIE9以下のサポートは2017年4月時点で既に終了しています。もはやここまで古いバージョンでの表示確認は不要でしょう。

古いバージョンのブラウザでの表示確認もできる

古いバージョンのブラウザでの表示確認もできる


無料化された本格的なホームページ作成ソフト 「Microsoft Expression Web 4」

今回は、2012年の開発終了に伴って無料公開されたMicrosoft製の本格的なホームページ作成ソフト「Microsoft Expression Web 4」日本語版のインストール方法と各種機能についてを簡単にご紹介いたしました。この機会に、ぜひ試してみて下さい。なお、無料化されたバージョンでは、製品サポート等は受けられませんのでご注意下さい。また、いつまで無料公開されているかは分かりませんので、今のうちにダウンロードしておくことをお勧めいたします。

【関連記事】

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます