HTMLとCSSでホームページを作る際に必要なツール

  • 2018年9月1日
  • 2020年11月5日
  • HTML&CSS

ホームページを制作するには、HTMLとCSSを勉強する必要があります。

その時に必要なソフトは、

  • テキストエディタ
  • Webブラウザ

この2つが必要になります。

HTMLとCSSは「テキストエディタ」と呼ばれる文章を書くソフトに記述してあげる必要があり、確認するには「Webブラウザ」が必要です。

通常テキストエディタには、Windowsでは「メモ帳」Macでは「テキストエディタ」というソフトが最初からパソコンの中に入っているのですが、機能が使いにくいので専用のソフトを使えるように設定しましょう。

Webサイト制作に最適なテキストエディタ

テキストエディタは種類が何種類もありまして、無料のソフトから有料のソフトまで様々です。

じゃあ無料より有料を使った方が良いのかというとそうではなく、無料でもかなり高機能で有料よりも優れていたりします。

なので、無料のエディタを使っていて本当に使いたいソフトがあった時に、そのソフトが有料だった時は乗り換えるという考えで大丈夫です。

Atomのインストール方法

テキストエディタでおすすめなのは「Atom」です。
無料で使えるし、高機能なのでこれさえ入れておけば間違いないです。

Atom公式サイト

まず公式サイトを開き、AtomをDownloadをしましょう。

そうするとパソコンにダウンロードされるので、ダウンロードしたファイルを実行するとパソコンにインストールされます。

ダウンロードとは、インターネットからパソコンにソフトを入れることです。
インストールとは、ダウンロードしたソフトをパソコンで使える状態にすることです。

インストールができたら開いくとこんな感じになります。

開いてみると分かりますが、Atomは全部英語で表示されています。

ですが、簡単に日本語に変更することができますので、使いやすいように日本語にしておきましょう。
Windowsでは、「File」から「Settings」をクリックします。
Macでは「Atom」から「Preferences」をクリックします。

そうすると画面の右側にSettingsという画面が開かれます。

そうしたら、左下に「+Install」と書かれた画面があるので選択し、入力欄に「japanese-menu」と入力しましょう。
正確に入力できていると一番上に表示されてる「Install」をクリックします。

これで日本語に変更されたはずです!

Atomの文字化けを解消する

Atomは初期設定で使っていると文字が画像のようにグチャグチャになって表示されます。それを「文字化け」と呼びます。

解消する方法は、ファイルエンコーディング(文字コード)を変更してあげる必要があります。

変更方法は先ほどの設定画面から「コア設定」→「ファイルエンコーディング」→「Japanese(Shift JIS)」に変更しましょう。

ファイルエンコーディングとは、HTMLを開いた時に指定の文字として読み込む機能のことです。
一般的には「Shift JISまたはUTF-8」が使われます。

これで文字化けが簡単に解消されます。

Web制作に最適なブラウザ

ブラウザとはインターネットを見るためのソフトです。

iPhoneなら「Safari」、Androidなら「Google Chrome 」、Windowsなら「Microsoft Edge」が初期設定で使用されているはずです。

その中でもWeb制作に最適なブラウザは「Google Chrome」の一択です。
Google Chromeであれば、画面を見ながら編集したりすることが簡単にできるからです。

Google Chromeのインストール方法

Google Chromeの公式ページに行ってダウンロードしましょう。

Google Chrome公式サイト

サイトを開いたらCHROMEをダウンロードをクリックします。

規約を読んで、同意してインストールしましょう。

ダウンロードしたら、ダウンロードしたファイルを実行して進めていけばインストールが完了します。

インストールしたら、今後は便利なのでGoogle Chromeを使うようにしてください。

最後に

「Atom」と「Google Chrome」がインストールできたら、あとはHTMLとCSSを勉強するだけです!

勉強する環境は整ったので、次はHTMLを実際に書いて見ましょう!