みなさん。こんにちは。
クレールです。
久しぶりに更新しますね・・・・すいません。
この講座を読んでいただいている方は過去のブログを読み返して復習などを
して頂ければ幸いに思います。
ホームページ作成 HTML・CSS入門
さて、前回はメモ帳でhtml作成をしました。
今回は、htmlやプログラムを開発するために、必要なツールの導入をしたいと思います。
ホームページビルダー、Dreamweaver(ドリームウィーバー)などの専用ソフトを使用してもいいですが
結構なお金がかかります（5万円くらいかな・・・）ので、Eclipse(イクリプス)といったフリーの開発ツールを
紹介、導入したいと思います。
まずは、こちら→Pleiades - Eclipse プラグイン日本語化プラグイン から「 Eclipse 3.7 Indigo Pleadies All in One 」を選択します。
下記のような画面になりましたら、一番右にある赤枠のphpを選択します。
後で記述しますが、html講座が終わりましたら、phpプログラム講座を行いますので
そのために、phpを選択します。
クリックしましたら、下記のような画面が出力されますので、「 ok 」を選択して
ダウンロード開始です。
お使いのパソコン、インターネット環境によってはダウンロードに時間がかかります。
終わりましたら、ダウンロードしたジップフォルダを適当な場所に保存します。
ここでは 「 C：￥ 」直下(スタートメニュー → マイコンピュータ → ローカルディスク )にジップフォルダを移動します。
できましたら、そのジップフォルダを解凍します。
これにも少々時間が掛かりますので待ちましょう。
ダウンロードしていると思いますので、その間はhtmlについて少し説明もれがありましたので
説明したいと思います。
前回にｈｔｍｌの種類があることを説明しましたが、今新しいhtmlバージョンがHTML5です。
HTML5以前までは<!DOCTYPE >にそのバージョンを記述していましたがHTMｌ5からは <!DOCTYPE html>と短縮されてますのでだいぶ楽になりますね。
CSSのバージョンも今はCSS3となって新たな機能などが追加されているようです。
ホームページ作成 HTML・CSS入門
言語は常に進化をしています。
覚えたばかりの言語もバージョンが新しくなれば使えなくなっているかもしれません。
WEBデザイナーやプログラマーなどを仕事にしている方は常に情報収集し、日々進化していると思います。
今回のこの講座ブログを読んで頂いて、WEBデザイナーやプログラマーとして手に職を持っていく方々はどんどん追及して下さい。
あ、でも無理ない程度にお願いします。
そろそろ解凍も終わった頃かと思いますので、進めます。
解凍したフォルダを開くと「 eclipse 」フォルダと「 xampp 」フォルダの2つあると思います。
まずは、サーバー設定を行います。
①xamppフォルダを開きます。
②setup_xampp.batをクリックします。実行すると下記の画像のようにコマンドプロンプト画面（黒い）が出力されます。
③ ②の状態でxamppフォルダのxampp-controlをクリックして起動します。
④コントロールパネル画面が表示されますので項目の一番上 Apache の Startボタンをおします。
押しましたら、Apacheの横に Runningと表示されたらOKです。
⑤最後に http://localhost/xampp/ でアクセスしてください。下記の画面が表示されたらOKです。
これでサーバーの設定は完了です。
コマンドプロンプト(黒いやつね)を閉じてください。
ホームページを作成するにあたり実際にブラウザで確認する必要があります。
かといっていきなりレンタルサーバーなど使用しては費用がもったいないのでローカルネットワークでの確認ができるように設定を行いました。
ですのでご自分のパソコンで作成したホームページは見れても他のパソコンからは見られないのでご理解下さい。
次は「 Eclipse 」の操作方法です。
①eclipseフォルダを開きます。その中に丸い形ででeclipseと記述があるアイコンをクリックしましょう。
②実行しましたら、下記の画面が表示されると思います。赤枠のワークスペースは、作成したファイルを保存する場所をして出来ます。今後はphp言語も使用するので必ず、xamppフォルダの中のhtdocsフォルダに保存するように指定ます。
そうでないと、ローカルサーバーで確認が出来ないためです。
③保存先指定が終わりましたら、「 OK 」を押して完了です。これで作成が可能になります。下記のような画面になると思います。これがhtmlやプログラム開発する環境開発ツールです。
できましたでしょうか？
今回はここまでです。
次回は、このEclipseを使用しての制作を行いますので
Eclipseが使用できるようにしておいて下さい。
ではまた、次回まで
クレールです。
久しぶりに更新しますね・・・・すいません。
この講座を読んでいただいている方は過去のブログを読み返して復習などを
して頂ければ幸いに思います。
ホームページ作成 HTML・CSS入門
さて、前回はメモ帳でhtml作成をしました。
今回は、htmlやプログラムを開発するために、必要なツールの導入をしたいと思います。
ホームページビルダー、Dreamweaver(ドリームウィーバー)などの専用ソフトを使用してもいいですが
結構なお金がかかります（5万円くらいかな・・・）ので、Eclipse(イクリプス)といったフリーの開発ツールを
紹介、導入したいと思います。
まずは、こちら→Pleiades - Eclipse プラグイン日本語化プラグイン から「 Eclipse 3.7 Indigo Pleadies All in One 」を選択します。
下記のような画面になりましたら、一番右にある赤枠のphpを選択します。
後で記述しますが、html講座が終わりましたら、phpプログラム講座を行いますので
そのために、phpを選択します。
クリックしましたら、下記のような画面が出力されますので、「 ok 」を選択して
ダウンロード開始です。
お使いのパソコン、インターネット環境によってはダウンロードに時間がかかります。
終わりましたら、ダウンロードしたジップフォルダを適当な場所に保存します。
ここでは 「 C：￥ 」直下(スタートメニュー → マイコンピュータ → ローカルディスク )にジップフォルダを移動します。
できましたら、そのジップフォルダを解凍します。
これにも少々時間が掛かりますので待ちましょう。
ダウンロードしていると思いますので、その間はhtmlについて少し説明もれがありましたので
説明したいと思います。
前回にｈｔｍｌの種類があることを説明しましたが、今新しいhtmlバージョンがHTML5です。
HTML5以前までは<!DOCTYPE >にそのバージョンを記述していましたがHTMｌ5からは <!DOCTYPE html>と短縮されてますのでだいぶ楽になりますね。
CSSのバージョンも今はCSS3となって新たな機能などが追加されているようです。
ホームページ作成 HTML・CSS入門
言語は常に進化をしています。
覚えたばかりの言語もバージョンが新しくなれば使えなくなっているかもしれません。
WEBデザイナーやプログラマーなどを仕事にしている方は常に情報収集し、日々進化していると思います。
今回のこの講座ブログを読んで頂いて、WEBデザイナーやプログラマーとして手に職を持っていく方々はどんどん追及して下さい。
あ、でも無理ない程度にお願いします。
そろそろ解凍も終わった頃かと思いますので、進めます。
解凍したフォルダを開くと「 eclipse 」フォルダと「 xampp 」フォルダの2つあると思います。
まずは、サーバー設定を行います。
①xamppフォルダを開きます。
②setup_xampp.batをクリックします。実行すると下記の画像のようにコマンドプロンプト画面（黒い）が出力されます。
③ ②の状態でxamppフォルダのxampp-controlをクリックして起動します。
④コントロールパネル画面が表示されますので項目の一番上 Apache の Startボタンをおします。
押しましたら、Apacheの横に Runningと表示されたらOKです。
⑤最後に http://localhost/xampp/ でアクセスしてください。下記の画面が表示されたらOKです。
これでサーバーの設定は完了です。
コマンドプロンプト(黒いやつね)を閉じてください。
ホームページを作成するにあたり実際にブラウザで確認する必要があります。
かといっていきなりレンタルサーバーなど使用しては費用がもったいないのでローカルネットワークでの確認ができるように設定を行いました。
ですのでご自分のパソコンで作成したホームページは見れても他のパソコンからは見られないのでご理解下さい。
次は「 Eclipse 」の操作方法です。
①eclipseフォルダを開きます。その中に丸い形ででeclipseと記述があるアイコンをクリックしましょう。
②実行しましたら、下記の画面が表示されると思います。赤枠のワークスペースは、作成したファイルを保存する場所をして出来ます。今後はphp言語も使用するので必ず、xamppフォルダの中のhtdocsフォルダに保存するように指定ます。
そうでないと、ローカルサーバーで確認が出来ないためです。
③保存先指定が終わりましたら、「 OK 」を押して完了です。これで作成が可能になります。下記のような画面になると思います。これがhtmlやプログラム開発する環境開発ツールです。
できましたでしょうか？
今回はここまでです。
次回は、このEclipseを使用しての制作を行いますので
Eclipseが使用できるようにしておいて下さい。
ではまた、次回まで