CODE

HTMLとCSSの勉強に必要なツールを揃える【10分で完了】

HTMLとCSSの勉強に必要なツールを揃える

 

プログラミング初心者で、これからHTMLとCSSの勉強を始めようとしている。

HTMLとCSSの勉強を始めたいけど、何を準備すればいいのか分からない。

 

こういった方向けの記事です。

 

本記事のテーマ

これからHTMLとCSSの勉強を始められる環境を作る

作業すること

  • テキストエディタをインストールする
  • ブラウザをインストールする

 

読者さんへのメッセージ

本記事は全くプログラミング経験がない方で、これからWeb制作を始める、もしくはWeb制作を通してプログラミングの勉強を始めようとしている方に向けた記事です。

ほとんどパソコンを触ったことがない方でもわかるように解説していきます。

では、さっそく見ていきましょう。

 

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

テキストエディタのインストール

 

そもそもテキストエディタってなに?って方もいますよね。

 

プログラミングとは、コンピューターが理解できる言葉(プログラミング言語)で、コンピューターへの命令(プログラム)を書くことです。

そのプログラムを編集するアプリケーションをテキストエディタといいます。

 

よくスタバとかでパソコンが得意そうな人が、ドヤ顔で意味不明な暗号が書かれた黒い画面を開いてるのを見たことありません?笑 あれです、あれ。笑

あの黒い画面がテキストエディタです。

そして、その意味不明な暗号がプログラミング言語ですね。

 

代表的なテキストエディタ

有料のもの、無料のもの様々ですが代表的なテキストエディタを紹介します。

上記以外にもたくさんありますが、ぼくはAtomを使っています。

 

Dreamweaverは有料ソフトに対して、Atomは無料のソフトですが高機能で使いやすいです。

最初はAtomを使い、慣れてきたらいろいろ試してみるといいと思います。

Sublime TextとDreamweaverは少し上級者向けですかね。

 

Atomのインストール

それではさっそくテキストエディタをインストールしていきましょう。

ここではAtomをインストールしていきます。

 

注意

Atomは頻繁にアップデートされるので、画面の表示が異なる可能性があります。

 

Atomのインストールはこちら

Atomのインストール画面

Downloadをクリックしてzipファイルをダウンロードします。

 

AtomのZipファイルをインストール

インストールしたzipファイルをクリックします。

 

AtomのZipファイルを解凍

インストールしたzipファイルをダブルクリックで解凍します。

 

Atomをアプリケーションフォルダにドラッグ&ドロップ

アプリの「Atom」が表示されるので、それを「アプリケーションフォルダ」へ、ドラッグ&ドロップします。

 

Atomを起動

「アプリケーションフォルダ」に移動し「Atom」を起動しましょう。

 

Atomを起動する際の初回アラート

初回はこのようなアラートが表示されるので「開く」をクリックしましょう。

 

Atom起動後の画面

これでAtomのインストールは完了です!

次はブラウザをインストールしていきましょう!

 

②ブラウザのインストール

ブラウザのインストール

 

テキストエディタのインストールお疲れ様でした!

 

次はブラウザのインストールをしていきます。

もしかしたら「ブラウザ」という言葉が聞き慣れない方もいるかもしれませんが、WindowsであればInternet Explorer、MacであればSafariのことです。

これらは標準でインストールされているため、多くの人が利用していますが、他にもさまざまなブラウザがあります。

 

ブラウザはHTMLやCSSのコードをWebページとして見たかのように変換して表示してくれるソフトウェアです。

 

代表的なブラウザ

Google Chromeは最新のWeb技術やサービスがいち早く利用しやすいという特徴があるため、基本的にGoogle Chromeを利用して学習を進めることをおすすめします。

 

Google Chromeのインストール

それではさっそくブラウザをインストールしていきましょう。

ここではGoogle Chromeをインストールしていきます。

 

注意

すでにGoogle Chromeがインストールされている方は以下の作業は不要です。

 

Google Chromeのインストールはこちら

Google Chromeのダウンロード画面Chromeをダウンロードをクリックします。

 

Google Chromeに同意してインストールGoogle Chromeのダウンロード後

利用規約が出てくるので同意してインストールをクリックしてください。
すると自動でダウンロードが始まります。

ダウンロード終了後、ダウンロードフォルダに、「googlechrome.dmg」というファイルがあればダウンロード成功です。

 

Google ChromeのZipファイルを解凍

macをお使いの方は、その「googlechrome.dmg」をクリックしてし、圧縮ファイルを解凍して、インストールできる状態にします。

Google Chromeをドラッグ&ドロップ

解凍されると、自動でGoogle Chromeのインストーラが起動します。Chromeのアイコンをフォルダの中にドラッグ&ドロップすればインストール完了です。

インストールが完了するとDockにChromeのアイコンが追加されるので、クリックして立ち上げてみましょう!

Dockに表示がなければ、Dockの中にあるLaunchpadをクリックするとChromeのアイコンがあると思います!

 

もし、インストールで行き詰まったらこちらを参考にしてみてください。

 

HTMLとCSSの勉強をはじめよう!

以上でHTMLとCSSの勉強を始めるための準備は完了です!

さっそくインストールしたテキストエディタとブラウザを使って勉強を始めましょう!

これからは、たくさんHTMLとCSSのコードを書いていくことになります!

頑張りましょう!!

-CODE

Copyright© HARUHIblog , 2021 All Rights Reserved Powered by AFFINGER5.