HTMLとCSSの学習を始める前に [ブラウザとテキストエディタ]のインストール

2020年4月28日

HTMLとCSSについて学ぶには、実際に学習ができる環境が必要です。

本記事では、そのために必要なツールと設定の方法を解説しています。

記事内で紹介するツールは全てWindows・Macの両方に対応しています。

こんな人に向けて書いています

  • HTML・CSSをこれから始める
  • 何が必要なのか分からない
  • オンラインサービスで練習したことはあるけど、自分で1から作るとなると良く分からない

結論から言うと、HTML/CSSの学習に必要なものはこちらです。

 

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

  

それでは早速、具体的な方法を見ていきましょう。

  

準備①:テキストエディタのインストール

HTML、CSSを実際に書くためのツールです。

無料で使えて機能・デザイン共に申し分ないAtomがおすすめです。

Atomをインストールする

Atomをダウンロード

「Download」をクリックします。

インストールが完了するとAtomが自動的に起動し、以下の「Welcome Guide」の画面が表示されます。

Welcome GuideがAtom起動時に毎回表示される必要はないので、

「Show Welcome Guide when opening Atom」のチェックを外しておきましょう。

ちなみに、Welcome Guideを使いたい時は

「Help」→「Welcome Guide」

で再度表示させることが出来ます。

Atomを日本語表記にする

Atomのパッケージ(拡張機能)を追加することで、日本語表記に変えることも出来ます。

主な手順は以下です。

  1. Settingsタブを開く
  2. Japanese-menuのインストール

Settingsタブの表示

  • Windows:「File」→「Settings」
  • Mac:「Atom」→「Preference」
Macの場合

Japanese-menuのインストール

「+Install」をクリックすると、以下の入力画面が開きます。

「Japanese-menu」と検索し、Installボタンを押して完了です。

他のパッケージも、同様の手順で追加することが出来ます。

  

準備②:Webブラウザのインストール

実際の表示のされ方を確認するためのツールです。

おすすめはGoogle Chromeです。

Google Chromeをダウンロード

「Chrome をダウンロード」をクリックしてインストーラをダウンロードし、インストーラを起動してインストールします。

基本的には画面の表示通りにやっていけば大丈夫です。

もし、難しいことがあればヘルプも参照してみてください。

学習スタート!

以上!

これでHTML/CSSを始めるための準備は完了です🎉

次号からは実際に、HTML・CSSについても触れていきます😄