講師だって、最初は初心者だもの[0]Visual Web Developer 2010 Express 導入!!/森和恵

投稿:  著者:  読了時間:7分(本文:約3,100文字)


はじめまして!! 森和恵と申します。
Web系セミナーの講師として壇上に立つ仕事をしております。今回、デジクリ
に記事を書かせて頂くことになりました。よろしく。

連載のタイトルは、ずっと声を大にして言いたかったことなのですが、「講師
だって、最初から何でもわかってる訳じゃない!!!」ってこと。こんなこと、
授業中には格好悪くて言えませんね。ww
ですが、新セミナーを担当する度に、ない頭をフル回転で勉強するのです。

そこで、そろそろ本格準備が必要になった「HTML5とCSS3」を勉強する過程を、
デジクリ記事にしてみようじゃないか! と思った次第にございます。今回は
準備編として、Visual Web Developer 2010 Expressというコーディングソフ
トの導入を行います。

先日参加した「CSS Nite in OSAKA, Vol.25 with Microsoft」で、
< http://osaka.cssnite.jp/cssnite-in-osaka/event-info/vol-25/1694/ >
「無料の割に、なかなか良いソフトじゃない」と思ったのがその理由です。記
事の中で、このソフトのレビューもやってみたいと思います。
では、始めましょう。



▼インストールしよう!

なにはともあれ、ソフトをインストールしましょうか。
Visual Web Developer 2010 Expressは、フリーソフト。気軽に試せます。

1)Web Platform Installer(Web PI)を使ってインストールします。
< http://www.microsoft.com/web/downloads/platform.aspx >

 |Web Platform Installer(Web PI)は、Microsoft製の開発アプリや
 |オープンソース系のWebアプリを選んでインストールできる
 |統合インストールソフトです。

2)ダウンロードした Web PI を実行。
[Webプラットフォーム]-[ツール]のカスタマイズから、
「Visual Web Developer 2010 Express」を選んでインストールします。
【画面】< http://r360studio.com/dgcr/dgcr-flag0-01.png >

 |インストールには、結構時間がかかります。
 |※ちなみに私は20分待ったところで、寝ました(笑)
 |例えば、お昼休み前にインストールして、帰ったら終わってる感じ。
 |インストール後に再起動が必要です。

3)Visual Web Developer 2010 Expressを起動。
[ヘルプ]-[製品の登録]メニューから、製品の登録をします。
【画面】< http://r360studio.com/dgcr/dgcr-flag0-02.png >

 |製品登録には、Windows Live IDが必要です。
 |30日間は登録せずに使用できます。

4)HTML5 のインテリセンス(入力補完機能)を追加するために、
「HTML 5 Intellisense for Visual Studio 2010 and 2008」をインストール
します。
< http://visualstudiogallery.msdn.microsoft.com/ja-jp/d771cbc8-d60a-40b0-a1d8-f19fc393127d >


▼最初の環境設定が肝心!

HTMLソース編集をしやすくするための環境設定を行います。もちろん、ここで
紹介した設定が絶対ではなく、あくまでも"オススメ"設定です。参考にして、
ご自分が使いやすい環境を整えてください。
※ソフトをデフォルトで使うなんて、言語道断ですヨ。

1)[ツール]-[オプション]メニューを実行します。
[全般]の「行番号」にチェックをいれます。

2)[フォントおよび色]でソースのフォント指定をします。

 |ソースコード編集に慣れてない方は、
 |自分が見やすいフォント指定で負担を減らすことが大事です。
 |個人的にお勧めは、「Meiryo UI 14pt」
 |Windowsでもアウトラインフォントで作業ができますよ。

3)[書式設定]の「入力中に属性値の引用符を挿入する」に、チェックをい
れます。

 |属性値の引用符とは、例えば「< a href="〜" >」など
 |タグの属性値を囲む"(ダブルクォーテーション)のこと。
 |HTML5から、属性の引用符の省略ができますが、
 |ソースコードの目視しやすさから引用符を着けたほうが
 |ベストと考えます。

4)[検証]のターゲットを「HTML5」に変更します。

5)[CSSスタイル]の下記項目のチェックを変更します。
「イメージにはCSSではなく幅と高さの属性を使用する」を入れる。
「スタイル生成時に短縮系のプロパティを使用する」を外す。
【画面】< http://r360studio.com/dgcr/dgcr-flag0-03.png >

 |イメージタグの幅・高さをタグ属性で
 |< img 〜 width="××" height="××" >と指定。
 |CSSのショートバンドを使用しないと指定しました。
 |ここは、好みに合わせて変更してもOK。
 |個人的にDreamweaverの初期設定と同じで使いやすいのです。


▼Webサイトの作成

Visual Web Developerでは、ファイル管理をサイト単位で行います。そのため、
最初にサイトを作成します。

1)[ファイル]-[新しいWebサイト]メニューをクリックします。

2)Visual Basicから、[ASP.NET空のWebサイト]を選びます。
Webの場所で任意の保存先フォルダを指定します。
【画面】< http://r360studio.com/dgcr/dgcr-flag0-04.png >

 |プログラム不使用の単なるWebサイトという指定がないため、
 |初期設定で必要のないファイルができないものを選びます。

3)次回起動から、[ファイル]-[新しいWebサイト]メニューを実行し、保
存先フォルダを指定してWebサイトを開いてから、制作を始めます。


......はい。今回はここまでにございます。次回からは、Visual Web Developer
2010 Expressを使って、HTML5やCSS3をいろいろと試します。
2011年1月から、隔週登場!! 致します。
どうぞよろしく。(<ゝω・)綺羅星☆

※記事へのご意見・ご要望は下記より受け付けま〜す。お手柔らかに。
< http://bit.ly/gIHFfu >


【森和恵/r360studio 〜Web系インストラクター〜】
< site: http://r360studio.com >
< twitter: http://twitter.com/r360studio >
< mail: r360studio@gmail.com >

フリーランスで活動するWeb系セミナー講師。「難しいことでも、わかり易く
伝える」をモットーに、クリエイターの立場で得た知識を制作者や講師の立場
から、皆さまに役立てていただだければ...と日々精進している。今後は、eラ
ーニングや電子出版の形式で、Web制作を学ぶための教育コンテンツに注力す
る予定。

●ちょこっと告知
1月25日に大阪で、無料Dreamweaverセミナーが開催されます。
ご都合よければ、ぜひお会いしましょう♪
< http://www.supreme-web.net/event/20110125adobe-osaka/ >