HTMLとCSSの勉強に必要なツールを用意しよう

HTMLとCSSの勉強に必要なツールを用意しよう

記事内に商品プロモーションが含まれる場合があります

今回はHTMLとCSSを勉強するのに必要なものを紹介します。必要なものは2つだけ。

この2つのツールを使えば、サーバーを借りるなどの面倒な手続きをしなくても、HTMLやCSSなどの言語を書き、どう表示されるのかを試すことができます。

必要なツール1:テキストエディター

使用用途:HTMLなどのコンピュータ言語を書くため

HTMLとCSSを書くにはテキストエディターが必要です。

sublime text

テキストエディターとは、簡単にいうと、コードを書くためのメモ帳みたいなものです。

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

おすすめ
sublime-text

Sublime Text無料で使えるにも関わらず、たくさんの入力補助機能の備わったとても優秀なエディターです。MacでもWindowsでも使うことができます。

Sublime Textのダウンロード方法

※ Mac、Windowsどちらにも対応

Downloadから該当するリンクをクリック

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

sublime textのダウンロード

MacならOS Xをクリックします。Windowsの場合、パソコンが32bitならWindowsを、64bitならWindows 64bitをクリックしましょう。「PCのbit数を調べる方法」が参考になるはずです。

これでダウンロードが開始します。Macなら「.dmg形式」、Windowsなら「.exe形式」のファイルがダウンロードされます。このダウンロードファイルをクリックすれば、Sublime Textのインストールが始まります。

sublime textを開く

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

コードを書く

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

サルワカくんの顔(通常)
サルワカくん
ちなみにSublime Textは、様々なコンピュータ言語に対応しています。HTMLもCSSもその他のありとあらゆる言語はこれを使って書くことができます。

必要なツール2:ブラウザ

使用用途:書いたHTMLコードなどの表示を確認するため

書いたコードがどのように見えるかを確認するにはブラウザを使います。

Googleクローム

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

GOOGLE CHROME

自分が書いたHTMLなどのコンピュータ向けのコードをブラウザで開けば、ウェブページとして見たかのように変換して表示してくれます。

おすすめ

Google chrome logo

Google Chromeウェブデザインをする人にとっては何かと使いやすいブラウザです。もちろん無料で使うことができます。

サルワカの解説記事では、Google Chromeを使っていくので、合わせて作業していきたい方はインストールしておくことをおすすめします。

Google Chromeのインストール方法

※ Mac、Windowsどちらにも対応

こちらのページにアクセス

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

chromeをダウンロード

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

同意してインストール

利用規約が表示されます。[同意してインストール]をクリックすれば、ファイルのダウンロードが始まります。

こちら↑の例ではMacからのインストールだったので「Chrome for Macをダウンロード」となっていますが、お使いのパソコンにより表示が変わるはずです。

ダウンロードができたら…

ダウンロードしたものは、Google Chromeのインストール用のファイルです。このファイルを開いて、インストールをしましょう。 [OK]や[次へ]をクリックしていけば、インストールは完了します。インストールに行き詰まった場合はこちらを読んでみてください。

HTMLとCSSの勉強を始めよう!

この2つがインストールできたら、HTMLとCSSの勉強を始めましょう。次の記事では、この2つのツールを使いながらHTMLを学びます。

サルワカ