一から始めるWeb制作 #3〜Web制作に必要なソフトウェア

Visual Studio Code イメージ

テキストエディタ「Visual Studio Code」

前回は、Web制作を始める前の予備知識として、ウェブサイトの仕組みについて説明した。

今回は、Web制作を始めるための準備について、ご案内する。

とはいっても、特別新たな機器や、高価なソフトウェアを用意する必要はない。

普段使っているものやオープンソース・ソフトウェアで、すぐに始めることができる。

パソコンとネット環境

当然のことながら、パソコンがなければWeb制作はできない。

スマートフォンでは作業できないので、どんなものでも良いからパソコンを1台用意しよう。

インターネットに接続できるパソコンであればスペックは問わないが、以下に紹介するテキストエディタの中には、32-bit版のパソコンには対応していないものもあるので、注意が必要だ。

HTMLコーディングに必要な「テキストエディタ」

一から始めるWeb制作 #2〜ウェブサイトとHTML」で少し触れた通り、HTML文書はシンプルなテキストファイルでできている。

ということは、極端ではあるが、

「どのパソコンにも入っているメモ帳や、WordでもHTML文書を作ることができる」

ということ。コーディングのために、特別新たなデバイスや、高価なアプリを用意する必要はない。つまり、

「HTMLコーディングは、すぐに始められるスキル」

なのだ。

そうはいっても、実際メモ帳やWordでHTML文書を制作している人は、そう多くはないだろう。

なぜなら、コーディングに適した「テキストエディタ」という便利なアプリがあるからだ。

HTML文書は、指定されたエンコーディング(UTF-8 BOMなし:後日説明)や、指定された改行コードで書かなければならない。それを簡単に指定できるのが、テキストエディタだからだ。

また、テキストエディタの中には、コーディングをしながらブラウザで表示を確かめたりすることもできるものがある。

以下は、コーディングに便利な機能を、自分でカスタマイズして使うことができるテキストエディタだ。

Visual Studio Code

Visual Studio Codeは、Microsoftが開発し、オープンソースで提供されているテキストエディタ。頻繁にアップデートされているので、安心だ。

拡張機能というプラグインで、使いやすくカスタマイズできる。

特にLive Server Previewという拡張機能は、作成文書上で右クリックして選ぶだけで、イントラネット上に、作成中の文書がリアルタイムで表示される。画面分割して、左にHTML、右にプレビューということもでき、大変便利。

現在、筆者がメインに使用しているテキストエディタ。

対応OS: Windows / MacOS / Linux (64-bit Only)

Atom

Atomは、オープンソースのソフトウェア開発のためのプラットフォーム、Githubが開発したテキストエディタ。

使い方は、Visual Studio Codeとほぼ同様で、こちらもhtml Previewというプレビュー機能がある。対応OSもVisual Studio Codeと同様だが、Macでは落ちやすいので要注意。

対応OS: Windows / MacOS / Linux (64-bit Only)

Brackets

Bracketsは、Adobeが開発したテキストエディタ。

残念なことに、2021年9月にサポートが終了した、と思いきや、どうやら開発は続いているようだ。最新バージョンは、2021年12月にリリースされている。

使い勝手は良いのだが、重たいのでサクサク打ち込むことが難しい。

好みの問題かもしれない。

ベタ打ち派のためのシンプルエディタ

「プレビュー画面なんて必要ないよ」

という人のための、シンプルなテキストエディタは、昔から重宝されている。

例えば、

は、ちょっとした修正や、サクッと書きたい人には便利だ。

筆者も、メインはVisual Studio Codeを使いながら、ちょっとした修正にCodEditorを使っている。

FTPソフト

制作したHTML文書を、ネット上にアップロードするためのソフトウェアを、FTP(File Transfer Protocol)ソフトという。

FTPソフトも、無料でダウンロードできるものばかりなので、気に入ったものを使おう。以下、代表的なものを紹介しておく。

FFFTP

FTPソフトの定番といえば、FFFTP

しかし、Windowsのみの対応ソフトのため、他OSでは使えない。

32-bit/64-bit両方に対応しているので、Windows派におすすめのソフト。

FileZilla

Windows以外、Mac、LinuxとOSを問わないのが、FileZilla

公式サイトは英語のみだが、しっかり日本語にも対応している。

筆者もFileZillaを使用しており、簡単で使いやすさを実感している。

Cyberduck

MacOSでのFTPソフトのイメージが強いCyberduckだが、Windowsでも使える。残念ながら、Linuxには対応していない。

シンプルな画面は、初心者向きで使いやすそうだ。

まとめ

まだ、具体的なコーディングについて触れてはいないが、これでWeb制作を始める準備はできた。

Web制作には

  • パソコン
  • テキストエディタ
  • FTPソフト

があれば、すぐに始められる。さらに、テキストエディタとFTPソフトは、オープンソース・ソフトウェアが充実しているので、パソコンがあれば、初期投資は必要ない。

次回は、HTMLの基本の「き」、具体的なコーディングについて説明しよう。

【本で学習したい人はコレ】

コメント