HTML・CSSの開発環境を整えよう【初心者にわかりやすく解説】

2022.11.29
HTML・CSSの開発環境を整えよう

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

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

この2つのツールが必要です。

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

この記事を読めば、HTMLとCSSの学習準備が完了するので頑張っていきましょう!

また、基礎的なHTMLとCSSの書き方を解説している記事もご紹介しているので、「HTML・CSSをこれから学んでいきたい!」と考えている方は、ぜひこちらから参考にしてください!

テキストエディタを用意しよう!

まず、テキストエディタをインストールしていきます。
テキストエディタとは、HTMLやCSSの他にもプログラミングを書いていくのに必要なツールです。

これからHTML・CSS以外にもプログラミングを学んでいく方は、プログラミングスクールのDMM WEBCAMPが推奨している初心者でも使いやすいSublime textの使用をおすすめします。

「どうしても他のエディタを使いたい!」という方は、こちらでエディタを比較してご紹介しているので参考にしてください。

ここでは「Sublime Text」のインストール方法をご紹介していきます!

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

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

Sublime textのダウンロードページ

STEP.2
STEP.2
ダウンロードを開始する
[su_row][su_column][su_column size=”1/2″ center=”no” class=””] ダウンロードを開始する [/su_column] [su_column size=”1/2″ center=”no” class=””]お使いのパソコンがMacなら「OS X」、Windowsなら「Windows」(パソコンが64bitなら「Windows 64bit」)をクリックして、ダウンロードを開始しましょう。[/su_column] [/su_row]
STEP.3
STEP.3
インストールを完了させる

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

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

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

[su_row][su_column][su_column size=”1/2″ center=”no” class=””]

Sublime textを開く [/su_column] [su_column size=”1/2″ center=”no” class=””]

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

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

実際にHTMLを書いていく

テキストエディタの準備ができたら、次はブラウザのインストールへ移りましょう。
すでにブラウザが用意できている方は、HTML・CSSの実践的な練習ができる一歩手前まできました。
では、HTML・CSSの学習へと入っていきましょう!


初心者でも実践的なスキルが身につく DMM WEBCAMP

「HTML・CSS」をマスターして、自分でホームページやWEBアプリを作成できるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】

✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる
✔分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能

経済産業省認定の圧倒的カリキュラム

ブラウザを用意しよう!

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

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

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

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

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

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

ブラウザを用意しよう

STEP.2
STEP.2
利用規約に同意

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

同意してインストール

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

STEP.3
STEP.3
ファイルを開く

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

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

[su_row][su_column][su_column size=”1/2″ center=”no” class=””]

ファイルをアプリケーションへ移動

[/su_column] [su_column size=”1/2″ center=”no” class=””]
「googlechrome.dmg」というファイルを開き、Chromeのアイコンをドラッグ&ドロップしてアプリケーションフォルダに移動しましょう!
[/su_column] [/su_row]
完了!

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

テキストエディタとブラウザの準備が整ったら、HTML・CSSの実践的な練習を始める一歩手前まできました。
この後は、こちらからHTML・CSSの基本を学習していきましょう!

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

テキストエディタには、たくさんの種類があり、迷ってしまう方もいます。
そこで、代表的なおすすめのテキストエディタ3つを比較していきますので、エディタ選びの参考にしていただけると幸いです!

  1. Sulime Text
  2. Atom
  3. Visual Studio Code

上記の3つ以外のエディタを検討したいという方は、以下の記事でもエディタをご紹介しているので参考にしてください。
【初心者向け】HTMLエディター9選をMac・Windows別に紹介!

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

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

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

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

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

Atom

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

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

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

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

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

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

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

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

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

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


HTML・CSS」をもっと詳しく学習したい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】

✔受講生の97%が未経験
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能
通学不要!スキマ時間でプログラミング学習ができる!

経済産業省認定の圧倒的カリキュラム

テキストエディタとブラウザを用意できたら実際にコードを書いていきましょう!
注意していただきたいのは、テキストエディタとブラウザを用意したこの状態ではCSSの学習ができません。

HTMLの基本な書き方は、以下の記事で解説しています。
HTMLの正しい書き方まとめ【初心者向け】HTMLの正しい書き方まとめ|各要素・タグの使い方を解説

CSSを学習する際にはHTMLファイルに読み込ませる必要があります。
手順は以下の記事でわかりやすく解説しているので参考にしてみてください!
CSS(スタイルシート)基本の書き方を5ステップで解説【初心者向け】CSS(スタイルシート)基本の書き方を5ステップで解説

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

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2023 WEBCAMP MEDIA Powered by AFFINGER5