BLOG

Mar 16, 2020

Webサイトの制作環境を整える

Webサイトの動作環境

Webサイトの制作には、まずはブラウザ、テキストエディタ、FTPクライアントを用意しなければいけません。ここでは、フリーランスでWeb制作をしている私の体験を元に、Webサイトの制作環境を整える際のお勧めや注意点なんかを解説します。

Contents

1 ブラウザ
2 テキストエディタ
3 オススメのテキストエディタ
4 FTPクライアントは？
5 自分のWebサーバーを持つと勉強になる

ブラウザ

Webブラウザーには…

Google Chrome（グーグルクローム）
Firefox（ファイヤーフォックス）
Microsoft Edge（マイクロソフトエッジ）
Internet Explorer（インターネットエクスプローラー）
Safari（サファリ）

…などがあります。
私はメインで使用しているのはMacの「Google Chrome」です。FirefoxやSafariはMac用があるので、ホームページの動作確認をすることができます。EdgeやIEはMacではできない（厳密には仮想環境でできる）ので、私は動作確認専用の安いWindowsを用意してます。ただしIEは11しか確認しません。

スマホの環境を確認するのは、最終的にはiPhoneやAndroidなどの実機で見るのが一番です。

テキストエディタ

HTMLやCSSを編集するために、まず欠かせないのがソフトウェアの開発に適した専用のテキストエディタです。ディフォルトで入っているメモ帳やテキストエディタなどは、あまり使用しない方がいいんです。色々と面倒くさかったりします。以下、テキストエディタを選ぶときの注意点…

コードの色分けはできるか
入力補完機能はあるか
日本語にも対応しているか

この辺りを重視するのがいいかと思います。快適にHTMLやCSSを書くのに、コードの色分けは必須の機能だし、タグなんかを途中まで書くと、入力候補を表示してくれる機能は便利としか言いようがありません。また、日本語に対応していない外国製のものは、コードは書けますが、ちょっと扱いにくいのでできれば避けたいところです。

オススメのテキストエディタ

選ぶときの注意点を踏まえた上で、オススメのテキストエディタを紹介いたします。それはズバリ…

Brackets

Bracketsは、Adobe社からリリースされているテキストエディタで、インストール直後からライブ・プレビューが使えちゃいます。高機能なのにシンプルで使いやすく、実際に私もWeb制作で使用しています。最初から日本語設定になっているため、初心者のコーダーの方にもオススメなんです。

また様々な拡張機能も用意されていて、さらに便利にカスタマイズできるんです。何と言っても嬉しいのは、これだけ使いやすく高機能なのに無料というところですね。遊び心をくすぐるテキストエディタ、是非お使いください。

Brackets

FTPクライアントは？

Webサイトのすべてのデータができあがったら、Webサーバーにアップして、公開しますよね。そしてデータのアップロードには、FTPクライアントを使用します。皆さん、何を使っているのか気になるところですね。ちなみに私はMacなので、Cyberduck一択です。Windows用もあります。もちろん無料です。

無料のところで他には、WinSCP（Win）やFileZilla（Win/Mac）が有名です。

自分のWebサーバーを持つと勉強になる

テキストエディタやFTPソフトを準備すれば、自分のドメインを取得し、レンタルサーバーを借りてみてください。え、高額なんじゃないかって？いえいえ、ドメインは年間1,000円程度で、レンタルサーバーも月数百円のところもあります。

自分で自由に使えるサーバーがあれば、HTMLやCSSの勉強に役立ち、さらにWeb制作に必要な知識と経験を得ることができるんです。私もかつてはそうでした。安くて良さそうなレンタルサーバーを探して実際に借りてみました。最初は遊びの延長から、この世界に入り、今ではどっぷりと浸かってしまいましたね…。

初心者の方は、さくらのレンタルサーバのスタンダードプランが私的にはオススメです。ちょっと前からかなり高速になりましたし。皆様も是非、Web制作の世界に浸かってみてはどうでしょうか。もし行き詰まったら、お気軽に当スタジオにご相談ください。