エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

HTMLとCSSの学習に必要な準備まとめ【ツールとオススメの教材など】

HTMLとCSSの学習に必要なツールと、オススメの教材をまとめました。

  1. テキストエディタの準備
  2. WEBブラウザの準備
  3. オススメ教材の確認

という順番で紹介していきます。

 

HTMLとCSSの学習に必要なツールまとめ

HTMLとCSSの学習に必要なツールはこの2つだけです。

  1. テキストエディタ
  2. Webブラウザ

HTMLとCSSを学びたい人の多くは、ウェブサイトを作りたいはず。

 

ウェブの仕組みは簡単で、「Webブラウザで、HTMLファイル(&CSSファイル)にアクセスすると表示される」だけです。

そのHTMLファイル(&CSSファイル)を作るのに、テキストエディタを使います。

 

【1】テキストエディタを準備する

テキストエディタはHTMLとCSS(プログラミング言語)を書くのに使うパソコンに入れる道具(ソフトウェア)です。

テキストエディタのオススメソフトウェア

テキストエディタのオススメはこの2つです。

  1. SublimeTextEditor3【とりあえず試す人向け】
  2. VisualStudioCode【本気でやりたい人向け】

どちらも無料で、簡単に使えます。

迷ったら、VisualStudioCodeにしておいたほうが後々便利です。

 

SublimeTextEditorのインストール方法

とりあえず試しにやってみたい人は「SublimeTextEditor」がオススメです。

準備方法は簡単です。

  1. Download - Sublime Textにアクセスする
  2. 自身のパソコン(MacかWindowsか)に合わせてダウンロードする
  3. ダウンロードしたファイルを開いてインストールする
  4. 黒背景の画面が立ち上がる

ちなみにWindowsの方は自身のパソコンが32bitか64bitか調べた上でダウンロードしましょう(簡単です)

» 参考:リコー | パソコンの OS とビット数の確認方法 (Windows XP/Vista/7/8/8.1/10)

 

VisualStudioCodeのインストール方法

本格的にやりたい人は「VisualStudioCode」がオススメです。

準備方法は簡単です。

  • Visual Studio Code - Code Editing. Redefinedにアクセスする

  • 「Download for ~~」に合わせてダウンロードする
  • ダウンロードしたファイルを開いてインストールする
  • 黒背景の画面が立ち上がる

 

【2】WEBブラウザを準備する

WEBブラウザはテキストエディタで作ったファイルを表示するためのソフトウェアです。

書いたHTMLファイルのソースコードをブラウザが勝手に読み取って、良い感じに表示してくれます。

代表的なWebブラウザの例は以下の通り

  • Internet Exploler
  • Edge
  • Safari
  • Firefox
  • Google Chrome

1番のオススメは「GoogleChrome」でして、ウェブサイトづくりに必要な機能が色々と入っています。

 

Google Chromeのインストール方法

Google Chromeのインストール方法は以下の通り

  1. Chrome ウェブブラウザにアクセスする

  2. 「Chromeをダウンロード」を選択する
  3. 順次クリックしていってインストールする(全部YESで大丈夫)

これで完了です。

あとは、GoogleChromeを起動して、GoogleやYahooのトップページが開ければOKです。

 

【3】HTML&CSS学習にオススメの教材

HTML&CSS学習にオススメの教材を紹介します

HTML&CSS学習教材(無料のWEBサービス)

まず試しにHTML&CSS学習をしてみたいなら、無料の教材でOKです。

1番簡単なのは、Progateというウェブサービスです。

prog-8.com

 

まずは「HTML&CSS初級編」をやってみることをオススメします。

※中級編の途中からは課金が必要になります(月額1000円程度)

 

ちなみに私自身もProgateから始めて、サイト制作のスキルを身に着けていきました。

www.engineer-step.com