プログラミング初心者で、これからHTMLとCSSの勉強を始めようとしている。
HTMLとCSSの勉強を始めたいけど、何を準備すればいいのか分からない。
こういった方向けの記事です。
本記事のテーマ
これからHTMLとCSSの勉強を始められる環境を作る
作業すること
- テキストエディタをインストールする
- ブラウザをインストールする
読者さんへのメッセージ
本記事は全くプログラミング経験がない方で、これからWeb制作を始める、もしくはWeb制作を通してプログラミングの勉強を始めようとしている方に向けた記事です。
ほとんどパソコンを触ったことがない方でもわかるように解説していきます。
では、さっそく見ていきましょう。
①テキストエディタのインストール
そもそもテキストエディタってなに？って方もいますよね。
プログラミングとは、コンピューターが理解できる言葉(プログラミング言語)で、コンピューターへの命令(プログラム)を書くことです。
そのプログラムを編集するアプリケーションをテキストエディタといいます。
よくスタバとかでパソコンが得意そうな人が、ドヤ顔で意味不明な暗号が書かれた黒い画面を開いてるのを見たことありません？笑 あれです、あれ。笑
あの黒い画面がテキストエディタです。
そして、その意味不明な暗号がプログラミング言語ですね。
代表的なテキストエディタ
有料のもの、無料のもの様々ですが代表的なテキストエディタを紹介します。
上記以外にもたくさんありますが、ぼくはAtomを使っています。
Dreamweaverは有料ソフトに対して、Atomは無料のソフトですが高機能で使いやすいです。
最初はAtomを使い、慣れてきたらいろいろ試してみるといいと思います。
Sublime TextとDreamweaverは少し上級者向けですかね。
Atomのインストール
それではさっそくテキストエディタをインストールしていきましょう。
ここではAtomをインストールしていきます。
注意
Atomは頻繁にアップデートされるので、画面の表示が異なる可能性があります。
Downloadをクリックしてzipファイルをダウンロードします。
インストールしたzipファイルをクリックします。
インストールしたzipファイルをダブルクリックで解凍します。
アプリの「Atom」が表示されるので、それを「アプリケーションフォルダ」へ、ドラッグ&ドロップします。
「アプリケーションフォルダ」に移動し「Atom」を起動しましょう。
初回はこのようなアラートが表示されるので「開く」をクリックしましょう。
これでAtomのインストールは完了です！
次はブラウザをインストールしていきましょう！
②ブラウザのインストール
テキストエディタのインストールお疲れ様でした！
次はブラウザのインストールをしていきます。
もしかしたら「ブラウザ」という言葉が聞き慣れない方もいるかもしれませんが、WindowsであればInternet Explorer、MacであればSafariのことです。
これらは標準でインストールされているため、多くの人が利用していますが、他にもさまざまなブラウザがあります。
ブラウザはHTMLやCSSのコードをWebページとして見たかのように変換して表示してくれるソフトウェアです。
代表的なブラウザ
Google Chromeは最新のWeb技術やサービスがいち早く利用しやすいという特徴があるため、基本的にGoogle Chromeを利用して学習を進めることをおすすめします。
Google Chromeのインストール
それではさっそくブラウザをインストールしていきましょう。
ここではGoogle Chromeをインストールしていきます。
注意
すでにGoogle Chromeがインストールされている方は以下の作業は不要です。
Chromeをダウンロードをクリックします。
利用規約が出てくるので同意してインストールをクリックしてください。
すると自動でダウンロードが始まります。
ダウンロード終了後、ダウンロードフォルダに、「googlechrome.dmg」というファイルがあればダウンロード成功です。
macをお使いの方は、その「googlechrome.dmg」をクリックしてし、圧縮ファイルを解凍して、インストールできる状態にします。
解凍されると、自動でGoogle Chromeのインストーラが起動します。Chromeのアイコンをフォルダの中にドラッグ&ドロップすればインストール完了です。
インストールが完了するとDockにChromeのアイコンが追加されるので、クリックして立ち上げてみましょう！
Dockに表示がなければ、Dockの中にあるLaunchpadをクリックするとChromeのアイコンがあると思います！
もし、インストールで行き詰まったらこちらを参考にしてみてください。
HTMLとCSSの勉強をはじめよう！
以上でHTMLとCSSの勉強を始めるための準備は完了です！
さっそくインストールしたテキストエディタとブラウザを使って勉強を始めましょう！
これからは、たくさんHTMLとCSSのコードを書いていくことになります！
頑張りましょう！！