
記事内に商品プロモーションが含まれる場合があります
前回の講座
今回はHTMLとCSSを勉強するのに必要なものを紹介します。必要なものは2つだけ。
この2つのツールを使えば、サーバーを借りるなどの面倒な手続きをしなくても、HTMLやCSSなどの言語を書き、どう表示されるのかを試すことができます。
必要なツール1:テキストエディター
使用用途:HTMLなどのコンピュータ言語を書くため
HTMLとCSSを書くにはテキストエディターが必要です。

テキストエディターとは、簡単にいうと、コードを書くためのメモ帳みたいなものです。
パソコンにはじめから入っているメモ帳などを使うこともできるのですが、使い勝手があまり良くありません。ここではコードを書くためのテキストエディターを用意しましょう。おすすめは「Sublime Text」です。

Sublime Text無料で使えるにも関わらず、たくさんの入力補助機能の備わったとても優秀なエディターです。MacでもWindowsでも使うことができます。
Sublime Textのダウンロード方法
※ Mac、Windowsどちらにも対応

はじめにsublime textのダウンロードページにアクセスします。 ここをクリック!

MacならOS Xをクリックします。Windowsの場合、パソコンが32bitならWindowsを、64bitならWindows 64bitをクリックしましょう。「PCのbit数を調べる方法」が参考になるはずです。
これでダウンロードが開始します。Macなら「.dmg形式」、Windowsなら「.exe形式」のファイルがダウンロードされます。このダウンロードファイルをクリックすれば、Sublime Textのインストールが始まります。

インストールが完了したらSublime Textを開きます。このような画面が表示されるはずです。

あとはキーボードを打ってHTMLなどのコードを書いていくだけです。HTMLの書き方、保存の仕方などは次の記事で解説します。

必要なツール2:ブラウザ
使用用途:書いたHTMLコードなどの表示を確認するため
書いたコードがどのように見えるかを確認するにはブラウザを使います。

ブラウザにはインターネットエクスプローラーやSafariなど、いくつかの種類があります。

自分が書いたHTMLなどのコンピュータ向けのコードをブラウザで開けば、ウェブページとして見たかのように変換して表示してくれます。
Google Chromeウェブデザインをする人にとっては何かと使いやすいブラウザです。もちろん無料で使うことができます。
サルワカの解説記事では、Google Chromeを使っていくので、合わせて作業していきたい方はインストールしておくことをおすすめします。
Google Chromeのインストール方法
※ Mac、Windowsどちらにも対応

はじめにGoogle Chromeのダウンロードページにアクセスします。 ここをクリック!

対応するバージョンのダウンロードボタンを自動で表示してくれます。[Chromeをダウンロード]をクリックしましょう。

利用規約が表示されます。[同意してインストール]をクリックすれば、ファイルのダウンロードが始まります。
こちら↑の例ではMacからのインストールだったので「Chrome for Macをダウンロード」となっていますが、お使いのパソコンにより表示が変わるはずです。
ダウンロードができたら…
ダウンロードしたものは、Google Chromeのインストール用のファイルです。このファイルを開いて、インストールをしましょう。 [OK]や[次へ]をクリックしていけば、インストールは完了します。インストールに行き詰まった場合はこちらを読んでみてください。
HTMLとCSSの勉強を始めよう!
この2つがインストールできたら、HTMLとCSSの勉強を始めましょう。次の記事では、この2つのツールを使いながらHTMLを学びます。