ホームページを作る際に必要なソフトはこれだけ

これだけ知っておけばOK。ホームページ制作に必要なツール

本記事では「ホームページ制作に必要なツールは何か」をご紹介したいと思います。

最小限に考えれば、最初は本当に少なくて済みます。

そこからご自分のレベルやスタイルに応じて利用するツールを追加・変更するだけです。

ツールの基本的な使い方を知っていれば、Wordpressでも他のCMSでも十分に応用が効きますからね。

まずはPCを1台

まずは当然ながらPC「パソコン」ですよね。MAC・Windowsどちらでも構いません。

まずは基本中の基本となるHTMLファイルでできたホームページ（以下HTMLサイトとします）を軸にお話します。

WordpressなどのCMSと違い、HTMLファイルはPC上で表示を確認しながら作る事ができる点が大きいですよね。

Wordpressの制作データを事前チェックするためには、PC内にテスト環境を構築する必要があります。

ツールの事を知る前に、HTMLサイトを構成するファイルについて解説します。

HTMLファイルはゼロから準備できる

HTMLサイトはHTMLファイルで構成されています。

HTMLファイルは厳密に言うと、拡張子が「.html」になっているファイルの事を指します。

逆言えば拡張子を.htmlにすると、ファイルがHTMLファイルに成り変わる訳です。

ではこの拡張子を使って、何もない状態からHTMLファイルを作ってみたいと思います。

拡張子について

まず拡張子について、もう少し詳しく解説します。

パソコン上のファイルには全て拡張子という名前がつく

例えばWordファイルであれば「.docx」、テキストファイルであれば「.txt」などが拡張子ですね。

この拡張子により、ファイルの種類が区別されている訳です。

この拡張子は通常「非表示」になっているので、普段は目にしないかも知れません。

しかし見えていないだけで、拡張子はファイル名の後ろに必ず付いています。

拡張子の表示の仕方

下記の様に「ファイル名拡張子」チェックを付けると（Windows10の場合）、拡張子が表示されます。

今までファイル名のみだったのが、拡張子まで表示されるようになったはずです。

拡張子名を変更してファイルを作る

ではテキストファイルの「.txt」の部分を「.html」に変えて保存してみて下さい。

そのファイルのアイコンが違うもの（HTML用）になるはずです。

これでHTMLファイルを作る事ができました。

基本は手元のファイルを複製する

この様に拡張子を変える事で、HTMLファイルは作り出せることがわかりました。

しかし基本的には、既にHTMLファイルやCSSファイルを持っている場合がほとんどですよね。

わざわざ拡張子を変えなくても、HTMLファイルをコピーすれば事足ります。

今回は、一応そういった作り方もできる事を紹介しただけです。

必要なのはメモ帳ソフト

ここで重要な大前提となる事があります。

それはHTMLファイルは全て、その中身をテキストファイルで開く事ができるという事です。

HTMLファイルの中身（以下：ソースコード）は、ファイルを右クリックして「プログラムの選択」からメモ帳ソフトを選択すれば開きます。

HTMLファイルの更新はテキストファイルでおこなう

ソースコードを開いた時、HTMLファイルの中身が「テキストファイル」として表示されます。

後は中身のテキストやコード部分を変更して上書き保存するだけなのです。

つまり「メモ帳」などテキスト更新できるツールがあれば、WEBページの更新ができる事になりますね。

CSSファイルも同様

cssファイルも先ほどのHTMLファイルと同じ考え方で作れます。

テキストファイルの拡張子「.txt」を「.css」に変更すれば、cssファイルになってくれます。

日頃見えていないだけで、CSSファイルの拡張子は「.css」なのですね。

CSSファイルもメモ帳で開ける

CSSも右クリックからメモ帳を選択して、テキストファイルで開く事ができます。

つまりメモ帳さえあれば、HTML・CSSの中身を編集する事ができる訳ですね。

画像やその他ファイルを操作するツールも必要にはなりますが、基本はメモ帳ソフトで賄えると思って下さい。

ホームページファイルをインターネット上にアップするソフトなども必要になります。

全てはテキスト編集ソフトがあればOK

ソースコードはテキストファイル編集ソフトで開く

どんなに複雑なシステムを使ったサイトであっても仕組みは一緒です。

ホームページである限り、HTMLソースとCSSのコードを開く機会が必ず存在します。

新規で一から構築するサイト制作はもちろん、他人が作ったサイトを修正・更新する場合も同様です。

メモ帳などのテキスト編集ソフトを利用する事になるのです。

Wordpressも同じです。

Wordpressは「テーマ」と呼ばるファイル構成により、サイトデザインが構築されています。

テーマの構成ファイルであるphpファイルも、メモ帳ソフトで編集できます。

徐々にプログラミング言語（HTMLやphp）を覚えていけば、どんなサイトでも制作・更新ができるようになるのですね。

あわせて読みたい関連記事

みんなしている事は同じ

レベル1の人でもレベル100の人でもやっている事は同じです。

開発者は常により便利に、かつ効率よく作業を進めたいと考えています。

その結果、メモ帳ソフトではなく別の便利なソフトやツールが利用されているだけなのです。

一つ一つ手作業は骨が折れる

例えば、同じ修正を100か所でしなければならなくなった時、一括でその変更ができないかと思案しますよね。

当然メモ帳だと100回繰り返す必要があります。もちろんミスもしやすいでしょう。

そうしなくて済むよう、専用の別ツール・ソフト等が採用される訳です。

開発者や用途に応じて使用ソフトは千差万別

時間の経過とともに、その人にあったツールが利用され、結果使われるソフトが多岐にわたってきます。

世の中には様々な制作ソフトやツールが存在しますが、行き着く場所は一つです。

逆に言えば、更新さえできればどんなソフトを使ってても構わないと言えるでしょう。

おすすめテキストファイル編集ソフト

ここでおすすめの無料で使えるテキスト編集ソフト（テキストエディタ）を2つご紹介します。

テキストエディタは下に紹介するソフト以外にもたくさんあります

自分が使いやすいと思うものを探してみて下さいね。

サクラエディタ

サクラエディタは、多くのプログラム形式（C++、Java、COBOL、 HTML、CSS）等に対応したテキストエディタです。

その魅力は多彩な機能設定にあり、豊富な機能を備えています。

主な特徴ある機能

「設定」→「共通設定」→「タブバー」→「タブバーを表示する」を選択することにより、タブ形式で利用する事も可能です。

複数のファイルを開いて編集するのに大変便利です。

Brackets

Bracketsは、JavaScript、HTML、CSSを編集するためのオープンソースのテキスエディタです。

オープンソースという利点を生かした多彩なプラットフォームでコード共有ができることから、ウェブ開発者に人気のエディタです。

主な特徴ある機能

変更した箇所をすぐにブラウザで確認できる「ライブプレビュー」が有名です。

カーソルを画像ファイル名の文字列にのせると該当画像がポップアップする「ホバービュー」も便利です。

初心者がスムーズに作業を進められる便利機能があります。

コードを折りたためる機能もついているため作業がしやすいでしょう。

一押し人気コーナー紹介