未分類

【リライト記事】HTML・CSSで必要なツールを準備しよう！

 

HTML・CSSで準備するものとは？

プログラミングの学習を始める前にツールの準備を行う必要があります。
初心者の方は、どんなツールが必要か準備段階で戸惑う人も多いのではないでしょうか？
実はプログラミングを行う上で準備するものは次の2つだけです。

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

そこで今回は、初心者でも簡単に準備できる方法を解説します。

テキストエディタ

エディタ画像

「テキストエディタ」は、HTMLなどのプログラミング言語を書くために絶対に必要なツールです。
一般的にテキストデータを入力するツールと同じなので、パソコンに入っているメモ帳機能でも問題ありません。

しかし、効率的にプログラミングを行うためには、コードを書く専用のテキストエディタがおすすめです。

専用テキストエディタは主に次の機能がついています。

  • 予測変換
  • 自動インデント機能
  • 入力補完機能
  • 文字列検索

さまざまな機能がついているので、慣れてくると効率的にコードを打つことができますよ！

ブラウザ

ブラウザ画像

「ブラウザ」とは、Webページを表示するためのツールです。代表的なツールと言えば、インターネット接続時に使うGoogle ChromeやMicrosoft Edgeはブラウザの一種です。

テキストエディタで書いたコードを見るためにブラウザを使用します。

ブラウザの中には、インターネットエクスプローラーやSafariなど
みなさんがインターネットに接続するために使うツールのことを呼んでいます。

自分が書いたHTMLなどをブラウザを使用して確認することで、
Webページとしてどのように見えるかを表示してくれます。

Webデザインをする人には「Google Chrome」が使いやすくおすすめです。
無料で使うことができるので、ダウンロードしておきましょう！

テキストエディタの準備方法

テキストエディタの中には、さまざまな種類がありますが
今回はMicrosoft社開発「Visual Studio Code」（VSCode）を使って
実際にダウンロードしてみましょう！

VSCodeは、公式ホームページから無料でダウンロードすることができます。

Visual Studio Code を ダウンロード

公式ホームページを開き、「Download」を押します。
使用しているパソコンに合わせてダウンロードファイルを選択しましょう。

  • MacOS
  1. ダウンロードボタンを押すと「VSCode-darwin.zip」がダウンロードされます。 
  2. ダブルクリックし、解凍しましょう。 
  3. アプリケーションフォルダへ移動して、ダウンロード完了です。
  • WindowsOS
  1. ダウンロードボタンを押すと「VSCodeUserSetUp.exe」がダウンロードされます。 
  2. 案内に沿ってインストールを進めましょう。 
  3. 「Visual Studio Code セットアップウィザードの完了」の画面が表示されたらインストール完了です。

ブラウザの準備方法

GoogleChromeも無料でダウンロードすることが可能です。
以下のURLからダウンロードを行いましょう！

Google Chrome を ダウンロード

  • MacOS
  1. お使いのMacに対応したChromeバージョンを選択します。 
  2. Macのプロセッサを確認してから、
    手順に従ってダウンロードを行いましょう。 
  3. Chromeのバージョンを選択できたら、
    「googlechrome.dmg」ダウンロードが開始します。 
  4. 「googlechrome.dmg」を開き、アプリケーションフォルダへ
    ドラックしましょう。 
  5. 移動が完了したら、ブラウザインストールの完了です。
  • WindowsOS
  1. ダウンロードボタンを押し、利用規約に進んでいくと「ChromeSetUp.exe」がダウンロードされます。 
  2. 「ChromeSetUp.exe」をクリックすると、
    自動的にダウンロードとインストールが始まります。 
  3. Chromeのインストールが終了すると自動的にChromeが起動し、
    インストール完了になります。

HTML・CSSを勉強しよう！

エディタやブラウザのインストールが完了すると、
いよいよHTML・CSSの勉強を始める準備が揃います。

これらのツールはコードを書く際にたくさん使うため
使い方もコードを書きながらマスターできると良いでしょう！

[word_balloon id=”1″ size=”M” position=”L” name_position=”under_avatar” radius=”true” balloon=”talk” balloon_shadow=”true”]自分の使いやすいエディタを比較することで作業効率も上がるため、 自分で使い比べてみるのこともおすすめです！[/word_balloon]


Notice: Trying to access array offset on value of type bool in /home/aitechcamp25/aitechschool.online/public_html/media/wp-content/themes/jin/cta.php on line 8

Notice: Trying to access array offset on value of type bool in /home/aitechcamp25/aitechschool.online/public_html/media/wp-content/themes/jin/cta.php on line 9
RELATED POST