前回記事Webサイトを作ろう！【1】レンタルサーバーとドメインにて、自分の家（サイト）を建てるための土地（容量）の準備が完了したものとして、今回は数々の建材（データ）の作成と、その組み立てのための準備に入ります。
自分のパソコンの中で作ったデータを、契約したサーバー側にぺいっと放り投げればサイトが出来ます。
まずはパソコンの中でデータを組み立てるための場所と環境を作りましょう。
専用フォルダを作る
ひとまず ↓ こんな感じの構成のサイトを作る予定とします。
まずはこれから作るテキストデータや画像データを保存する場所を作りましょう。
基本的には皆さん、普段使うCドライブ内に『 website 』や『 hp 』といった分かりやすく簡単な名前で作ることが多いようです。
中には好きな食べ物の名前だったり自分の名前だったりといった方も居るので、お好みのフォルダ名でかまいません。
コンピュータ⇒ローカルディスク（C：)を開いて、余白部分で右クリック⇒【 新規作成 】⇒【 フォルダ 】を選択。
ここでは例として『 website 』フォルダを作ります。
こうして出来た『 website 』フォルダが、これから用意するサイト作成用データの保存先となります。
更に画像データやメールフォームなどは最初から複数ファイルを保存するだろうことが決まっているので、あらかじめ『 image 』や『 mailform 』などのフォルダを作っておくと良いですね。
テキストエディタをインストール
サイトを構成するテキスト（文章）や、段落構成などを表示させるための指示書がソースコード（単にコードとも）と呼ばれます。
以下は弊社のサイトのソースコードを一部抜き出したものです。
[su_box title=”ソースコード” style=”soft” box_color=”#a2dc96″ title_color=”#101110″ radius=”5″]<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis”>
<meta content=”text/css” http-equiv=”Content-Style-Type”>
<META http-equiv=”Content-Script-Type” content=”text/javascript”>
<title>パソコン修理のパソピア 【高松市～全国宅配OK】格安PC修理</title>
</head>
<body>
<p>お問合せやお見積りは</p>
<p><a href=”mailform.html” rel=”external”>パソコン修理フォーム</a>から</p>
<p>【<a href=”servicing.html”>お見積り～修理完了までの流れ</a>】</p>
<p>【<a href=”#difference”>メーカー修理との違い</a>】</p>
<br clear=left>
<div class=”syuri_image”> <a href=”#gamen”><img src=”image/syuuripict/topsyuri/shuri_gamen.gif” width=”88″ height=”88″ alt=”液晶画面バックライト故障、パネル交換”></a></div>[/su_box]
一見ややこしく見えるかもしれませんが、
・ここはページ上部の段落
・ページのタイトルはこれ
・クリックでメール作成
・ここにこの大きさの画像を入れる
といった指示をひとつずつ積み重ねているだけなのでそんなに難しいことではありません。
ちなみに記述の方法やコード例も後々ご説明します。
そんな訳で、こういったソースコードを記述しなければ何も始まらないのですが、記述はテキストが書けるもの（＝テキストエディタ）であったら何でも、
それこそ最初からOS内に存在しているメモ帳でも構いません。
ただ、メモ帳だと色分けなどが無くて確認がしづらかったりするので、より便利に使えるソースコード記述に向いたフリーソフトや商用ソフトが色々と開発されています。
有料のものとして有名なのはAdobe Dreamweaverですが、これはテキストエディタの機能だけでなく実際にどう表示されるかというテスト表示機能なども備えたとっても便利なサイト作成の総合ソフトで、そのぶんお値段もなかなかのものです。
ちょっとしたサイトを作るくらいなら特に必要ないかと思いますので、出来るだけ無料でコストを抑えていきましょう。
いくつかの無料テキストエディタをご紹介しますのでお好みのものをインストールしてみてください。
シンプルで使いやすい TeraPad
行番号表示や色分け表示にも対応しており、日本の方が開発したので
メニュー表示なども日本語でとても使いやすいテキストエディタです。
TeraPad インストールページ
Microsoftが開発した Visual Studio Express
Microsoftが開発したプログラミングソフトVisual Studioの無料版がVisual Studio Expressです。
プログラミング言語でアプリケーションを作るためのソフトですが、テキストエディタとしての機能のみを利用することもできます。
Visual Studio Expressのページからインストールしてください。
※お使いのPC環境などによっては最新のVisual Studio Express 2013がインストールできないこともあります。
その場合は旧バージョンのVisual Studio 2010 Expressをインストールしてください。
データをサーバーにアップロードするFTPソフトをインストール
横文字と英語が入り乱れて意味が分かりませんね。
要するに、サイト用に自分が作ったテキストファイルや画像ファイルを自分のパソコンの中からサーバー（Web）側にぺいっと放り投げてくれるソフトです。
こんな感じで。
基本的には同じデータが自分のパソコンの中とサーバー上にそれぞれある状態です。
こっちからサーバー上にデータを放り投げればWeb上に反映、つまりサイトとしての形になり、逆にサーバー上のデータをもらってくれば自分のパソコンにコピー保存することができます。
安全な無料フリーソフトで利用者が多いソフトは以下の2つです。
使いやすさから利用者も多い FFFTP
最初の設定さえ行えば、後は左から右にドラッグ＆ドロップですぐにファイルのアップロードが可能。
初心者さんでも使いやすいソフトだと思います。
私も最初からずっとこのソフトにお世話になっています。
FFFTP インストールページ
補足：アップロードとダウンロードの使い分け
サイト作成の際に使用するのは主にアップロード ＝ サーバーへのデータ送信です。
しかしサイトの中でリアルタイムに更新できる項目を作っているような場合には、サーバー上のデータは更新されても、自分のパソコンの中にあるのは過去のデータ、という状態になることがあるので、忘れずにサーバー上からバックアップを取っておかなければなりません。
サイト側での更新を行ったら、その都度ダウンロード保存するように気をつけましょう。
また、いざという時のためにパソコン以外のメモリやディスクにもサイトの構成データをコピーしておくと安心ですね。
Webサイトを作ろう！：シリーズ記事
【1】レンタルサーバーとドメイン
【2】必要なソフトを準備する（この記事です）
【3】ページの構成を考える
【4】テーマカラーを決める
【5】トップページと画像を用意
【6】トップページの一例
【7】HTMLソースコードの解説①
【8】HTMLソースコードの解説②
【9】複数ページを作る
【10】横並びメニューをCSSで作る
【11】縦並びメニューをCSSで作る
【12】スタイルシート（CSS）の解説
【 番外編1 】画像編集ソフト・素材サイト
【 番外編2 】商用利用OKな無料素材
「Webサイトはこうしてもらえると嬉しい」という個人的な希望
