準備:テキストエディタとFTPツール

準備:テキストエディタとFTPツール

空間が用意されたら、実際に公開するファイルの中身を作っていくことになります。

今回は、HTMLファイルやCSSファイル、PHPファイルなどを作成していくテキストエディタと、ファイルをパソコンとサーバーでやり取りするFTPツールの紹介です。

 

Webサイトのファイル形式

事前情報として知っておくべきは、Webサイトがどのようなファイルで出来ているのかです。

専門的なことまでは書かない(書けない)ので、初心者がWebサイトを制作する上で必要な最低限のことだけ書きます。

 

Webサイトの制作で主に使われるのは、以下の3つです。

・『.html』形式のファイル

・『.php』形式のファイル

・『.css』形式のファイル

 

.html(エイチ・ティー・エム・エル)

ホームページの基本ファイルです。HTMLタグと呼ばれる記法を使い、様々な表現をします。

『HEAD』と『BODY』に分かれていて、『HEAD』には主にWebサイトの情報を、『BODY』にはサイト訪問者が実際に見る内容を記述します。

細かな表現などはHTMLタグと呼ばれる記法で括って指定します。

 

.php(ピー・エイチ・ピー)

プログラミング要素が入ったhtmlだと思ってください。

『<?php』と『?>』で括った内側では、php言語を用いてプログラミングを動かすことが出来ます。

最新のファイルを選択して読み込んだり、単純な計算を行ったりすることが出来るので、htmlで記述するよりも多くのことが出来るようになります。

動的なWebサイトを作るつもりがなければ、使えなくても構わないと思います。

私はほとんど include 用に使っています。

 

.css(カスケード・スタイル・シート / シー・エス・エス)

Webサイトの外観を変えることが出来るファイルです。

HTMLタグには様々な指定をすることが出来ますが、直接.htmlファイルに記述をすると非常にわかりにくくなってしまいます。

また、Webサイトのデザインを変更しようと思ったら、すべてのファイルを書き換えなければならず大変です。

その為、見た目に関する記述は直接.htmlファイルに書かず、.cssファイルに記述することが一般的です。

.css専用の記法があるのでhtmlタグと全く同じとはいきませんが、似たような形なのですぐに使えるようになります。

.htmlには内容を、.cssにはデザインを書くと決めれば、webサイト運用の幅がグッと広がります。



テキストエディタ

上記で挙げた3つのファイル(.html、.php、.css)は、すべてWindows標準のメモ帳で作れます。

Webサイトの制作は、パソコン一つで出来てしまうんです。

しかし見た目に分かりにくいことや、分からないタグを一つずつ調べなければならないのが面倒臭いので、Webサイトの制作にメモ帳を使うことは稀です。

これらの編集に適しているのが『テキストエディタ』と呼ばれるツールです。

いろんな種類のテキストエディタが提供されていますが、私が普段使っているのは『Atom』公式サイト)です。

.htmlや.phpはもちろん、様々なプログラミング言語に対応しており、予測入力や対応する行がわかるなど、機能面でとても重宝しています。(意味が分からなくてもスルーしてください)

日本語化のパッケージ等も出ているそうなので、そのままだと使いにくければ日本語化して使用するのが良いと思います。

 

余談ですが、昔は『TeraPad』や『サクラエディタ』、『秀丸エディタ』等を使用していました。

時代と共に開発環境が変化していますが、余りにも環境が変わると頭の中がごちゃごちゃしてしまうので注意しましょう。

 

FTPツール

FTPツールとは、作成したファイルを公開する場所に送ったり、ルールを付加したりするツールです。

自分のパソコンで作ったファイルは、まだ出荷前の状態です。

これを自分のお店に並べなければ、インターネット上に公開出来ません。

その配送の役割を担っているのがFTP(File Transfer Protocol / フィアル転送プロトコル)です。

実は、レンタルサーバーのほとんどでは管理画面などにファイルのアップロード機能などを備えています。

その為FTPツールがなくてもやり取りは可能ですが、慣れると圧倒的に効率が良くなるので持っていた方が良いです。

私は『FFFTP』(公式サイト)という、超定番のツールを使用しています。

初めのうちは設定で手間取ると思いますが、一度設定出来ればあとは末永く使っていけます。

頑張ってください!

 

テキストエディタ等の環境準備はこれにて終了です。

これでひとまず開発環境は揃いました。画像を取り扱う場合には画像編集ソフト等が必要になってきますが、その辺はいつか書くかもしれないし、書かないかもしれません。

いよいよHTMLの記述を始めていきますが、制作状況をリアルタイムで見ることが出来るように専用URLを作ります。

次回はTOPページの表示だけでも出来る状態にして、URLの告知からスタートです。

アイキャッチ画像 出展:Vodafone Germany Corporate Communications