HTML・CSSの開発環境を整えよう【便利なテキストエディタについても解説】 | WEBCAMP NAVI
【5月枠も残りわずか】転職保証コース

HTML・CSSの開発環境を整えよう【便利なテキストエディタについても解説】

SHARE

HTMLとCSSでWebサイトを作るには、

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

こちらの二つのツールが必要です。

今回の記事では、テキストエディタ、ブラウザの準備の方法について解説していきます。
手順を写真を用いながら解説していきますので、初心者の方でも安心して開発環境を整えることができます。

これを読めば全て完了するので、一緒に準備をしていきましょう！！

１、テキストエディタを用意しよう！

まず、テキストエディタをインストールしていきます。

テキストエディタは、HTML・CSSのコードを書くために必要になります。

今回は初期設定がほぼ不要で、初心者でも使いやすい「Sublime text」のインストール方法をご紹介します！

STEP.1
Sublime Textのダウンロードページにアクセスする

まずこちらのページから、Sublime textのダウンロードページにアクセスします。

STEP.2
ダウンロードを開始する
 
お使いのパソコンがMacなら「OS X」、Windowsなら「Windows」（パソコンが64bitなら「Windows 64bit」）をクリックして、ダウンロードを開始しましょう。
STEP.3
インストールを完了させる

Macでは「.dmg形式」、Windowsでは「.exe形式」のファイルがダウンロードされています。

それぞれのファイルをクリックして、インストールを開始して下さい。

インストールが終了したら、Sublime textを開きましょう！

このようにSublime Textが表示されたらOKです！
STEP.4
実際にHTMLを書いていく

これで準備は完了です！実際にHTMLを書いていきましょう！！

 

２、ブラウザを用意しよう！

次に、ブラウザを準備していきましょう！

ブラウザでは、テキストエディタで記入したコードが実際にどのように表示されるかを確認する事ができます。

今回は、Webサイトを制作していくのに便利な機能（・検証機能でエラーなどがないか確認できる・レスポンシブでどう表示されるかを見れる等）が使える【Google Chrome】のインストール方法をご紹介します！

 

STEP.1
Sublime TextのGoogle Chromeのサイトにアクセスする。

まず、こちらのGoogle Chromeのサイトにアクセスします。

サイトにアクセスしたら、「Chromeをダウンロード」というボタンを押してください。

STEP.2
利用規約に同意

ダウンロードボタンを押すと、利用規約が表示されます。「同意してインストール」というボタンを押しましょう。

（Google ChromeはMac、Windows両方に対応していますので、お使いのパソコンに対応したページが表示されます。）

STEP.3
ファイルを開く

Windowsの方は、ダウンロードが終了した際に自動でGoogle Chromeが開きます。

Macの方は、ファイルをアプリケーションへ移動させましょう！

「googlechrome.dmg」というファイルを開き、Chromeのアイコンをドラッグ&ドロップしてアプリケーションフォルダに移動しましょう！
完了！

Chromeのインストールは完了です！

おすすめのテキストエディタを紹介

テキストエディタには、たくさんの種類がありますので、どれを選べば良いのか迷ってしまいますよね。

代表的なおすすめのテキストエディタについて解説していきますので、エディタ選びの参考にしていただけると幸いです！

初心者でも使いやすい「Sublime Text」

引用元：https://www.sublimetext.com/3

使いやすさ
★★★★★
価格 無料
対応機種 Mac/WindowsPC対応

  • 日本語化することができる
  • 多くのエンジニアが使用している

先ほども紹介した「Sublime Text」は、初心者の人にも使いやすいので、プログラミング初心者の方にもおすすめしたいテキストエディタです。プラグインをインストールすることもでき、自分好みにカスタマイズすることもできます。

拡張機能が充実している「Atom」

引用元：https://atom.io/

使いやすさ
★★★★
価格 無料
対応機種 Mac/WindowsPC対応

  • javaScript,PHP,Ruby対応
  • 拡張機能が充実

可愛らしい雰囲気の「Atom」は、「Sbulime Text」同様に操作が分かりやすく、初心者の方におすすめしたいテキストエディタです。

ダウンロードする際に日本語に切り替えることも可能です。

多くの人が利用している「Visual Code」

引用元：https://code.visualstudio.com/

使いやすさ
★★★★
価格 無料
対応機種 Mac/WindowsPC対応

  • 自分好みに背景やテキストの色を変更できる
  • 日本語に切り替えることが可能

「Visual Code」は、現在多くの人が使用しているテキストエディタです。

テキスト内でターミナルが開けるので便利です。

さあ、実際にコードを書いてみよう！

これでHTML、CSSでWebサイトを作るための準備は完了しました！

それでは、実際にHTML・CSSを書いていきましょう！

こちらの二つ記事では、HTML・CSSの書き方について、それぞれ初心者の方向けに解説してありますので、ぜひご覧ください！

▽HTMLの基本的な書き方が学べる記事はこちら

HTMLの正しい書き方まとめ【各要素・タグの使い方を徹底解説】

▽CSSの基本的な書き方が学べる記事はこちら

CSS（スタイルシート）の書き方【初心者が5ステップで分かる基本文法】

プログラミングの世界を一緒に楽しみましょう！

5月枠も残りわずか!!未経験からエンジニアを目指すならDMM WEBCAMP

DMM WEBCAMPは転職保証型のプログラミングスクールです。転職成功率は、98％！短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます！

「未経験だから不安…」、「転職できるんだろうか…」などの不安があると思います。そんな不安や心配を解消する、無料のカウンセリングを実施しています。

無理な勧誘や面倒な電話は一切ありませんので、お気軽にお越しください。

【無料】キャリア相談の日程を見る

前の記事

HTMLの正しい書き方まとめ【各要素・タグの使い方を徹底解説】

次の記事

CSS（スタイルシート）の書き方【初心者が5ステップで分かる基…