Windowsの代表的なテキストエディタおよび開発ツール
- メモ帳
- サクラエディタ
- TeraPad(テラパッド)
- Visual Studio Code(ビジュアル スタジオ コード)
「Visual Studio Code」などのIDEと呼ばれる統合開発ツールが利用できる場合は、IDEを利用しましょう。IDEを利用すると、エラーがわかりやすいなどWebページの作成がスムーズに行えます。
4. アクティビティ① ( 4 / 10 )
アクティビティ①
これからファイルを編集してWebページを完成させていきます。
ファイル編集にはテキストエディタという、ファイルを編集するアプリケーションを利用します。
アクティビティ①では、テキストエディタの起動から、Webページの初期状態の確認を行います。
(想定時間：10分)
アクティビティ①の学習内容
- 1-1.Webページの編集ツール
- 1-2.見本を確認しましょう
- 1-3.HTML、CSSファイルをダウンロードしましょう
- 1-4.HTMLファイルを確認しましょう
- 1-5.HTMLファイルのタグの構成を確認しましょう
- 1-6.ブラウザで表示をしましょう
- 1-7.結果を確認しましょう
1-1.Webページの編集ツール
Webページを作成する場合は、HTMLファイルやCSSファイル、JavaScriptファイルを編集する必要があります。
編集するためにはテキストエディタや開発ツールが必要です。
主なテキストエディタや開発ツールには次の物があります。
macOS、Raspberry Piの代表的なテキストエディタおよび開発ツール
- テキストエディット
- Emacs(イーマックス)
- Vim(ヴィム)
- Visual Studio Code(ビジュアル スタジオ コード)
それぞれのOSで、文字を入力・編集するためのテキストエディタ(Windowsでは「メモ帳」、macOSやRaspberry
Piでは「テキストエディット」)が標準で使えます。
今回は標準のテキストエディタを使ってWebページを作成します。
1-2.見本を確認しましょう
これから作成するWebページの見本を確認しましょう。
次の「見本Webページを見る（クリックしてください）」をクリックしましょう。
完成見本
1-3.HTML、CSSファイルをダウンロードしましょう
このアクティビティでは、ある程度作成されているHTMLファイルとCSSファイルを編集し、Webページを完成させることが目的です。
「it03-11-kadai.zip」ファイル（素材データ）を下記のボタンからダウンロードしましょう。
ダウンロードが終わったら、ファイルを適当な場所に移動して展開してください。
展開すると次のようなフォルダ・ファイル構成になっています。
赤枠は、アクティビティで編集を行うファイルです。
1-4.HTMLファイルを確認しましょう
HTMLファイルの内容を確認します。ここではテキストエディタ（Windowsではメモ帳、macOSやRaspberry Piの場合はテキストエディット）で開きます。
次の手順でindex.htmlファイルを開きましょう。
注意！ ファイルをダブルクリックしないようにしましょう！！
①テキストエディタを起動する。
メモ帳やテキストエディットを起動しましょう。
②index.htmlファイルをテキストエディタにドラックします。
※Windowsでドラッグしても、うまくファイルを開けない場合は、下記をお試しください。・ファイルを選択する。
・右クリックすると表示されるメニューから「プログラムから開く」を選択する。
・「メモ帳」を選択する。
③ファイルが開かれます。
注
意
この注意は、macOSやRassberyPiで「テキストエディット」を使用している人のみ確認してください。
テキストエディットを使用してファイルを開くと、デフォルトの設定では以下のように表示されます。
このように表示された場合は、以下の設定変更を行なってください。
①テキストエディットの設定を開く。
この画面はmacOSを使用したものです。
②「開く/保存」をクリックし、「HTMLファイルを、フォーマットしたテキストではなくHTMLコードとして表示」にチェックを入れる。
③一度テキストエディットを終了し、再度HTMLファイルを開く。
1-5.HTMLファイルのタグの構成を確認しましょう
HTMLファイルの内容は次のような構成になっています。
タグがどのように記述されているか、ブロックがどこにあるかを確認しましょう。
HTMLファイルの構成
ファイルをテキストエディタで見ると、タグと文章で作られたHTMLファイルの内容を見ることができますね。
それぞれの開始タグ、終了タグ(<タグ>文章</タグ>)で囲まれたタグの範囲とその範囲が、Webページ上のどの部分なのかを確認しましょう。
1-6.ブラウザで表示をしてみましょう
提供されているHTMLはCSSが全く適用されていない状態です。
どのように表示されるか確認しましょう。
Webページの表示をしてみましょう。
HTMLファイルをWebページとして開くためにはブラウザでHTMLファイルを開きます。
ブラウザで開くためにはindex.htmlをダブルクリックします。
拡張子が「html」となっているファイルをダブルクリックするとブラウザが起動し、Webページとして表示します。
1-7.結果を確認しましょう
1-4の結果が正しい状態か確認します。
課題を行ったら課題の完成見本と結果を見比べましょう。
下記のリンクをクリックすると、課題の見本がブラウザに表示されます。
ダウンロードしたファイルをブラウザで見ると見本と同じように表示されていたと思います。
この状態から、HTMLファイルとCSSファイルを修正しWebページを完成させていきます。
次のアクティビティに進みましょう。
