HTMLとCSSの学習をはじめるために、まずは必要なツールを準備しましょう。
必要なツールといっても、「パソコン」「テキストエディタ」「ウェブブラウザ」だけなので簡単です。
パソコン以外は、無料で使えるツールを使って学習を進めることができます。
パソコン
Windows、macOS、Linuxなどが入ったノートパソコンまたはデスクトップ。
一般的には「Window」または「Mac」のPCが主流でしょう。
テキストエディター
テキストエディタは、コードやテキストなどの文書を書いてファイルとして保存するためのツールです。
Windowsには「メモ帳」、Macには「テキストエディット」が、はじめからインストールされています。これらのテキストエディタでもコードを書くことは可能ですが、Web制作でよく使われるテキストエディタがあります。
代表例としては、「Visual Studio Code」「Notepad++、NoEditor」「Sublime Text」「Atom」「Vim」「サクラエディタ」「GNU Emacs」などがあります。テキストエディタ以外では「Adobe Dreamweaver」などのソフトウェアでもコードを書くことができます。
テキストエディターのおすすめは？
おすすめは、Visual Studio Code（ビジュアル・スタディオ・コード）です。略して、VSコードとも呼ばれています。
Visual Studio Codeは、Windows、Mac、LinuxのすべてのOSで利用可能なフリーエディタです。
無料ダウンロードはもちろん、コードのヒント機能も付いているので、Web入門者にとって使いやすいエディタと言えます。
また、HTML、CSS、JavaScript、Java、C言語、PHP、Pythonなど、さまざまな言語に対応しているため、学習から実用まで広く活用できます。
特にWeb制作の現場では、Visual Studio Codeを経験しているプロフェッショナルは多いため、ダウンロード方法や使い方などの情報や記事も多く、テキストエディタをはじめて利用する人にとっては、優しいエディタのひとつと言えるでしょう。
テキストエディタは、数多くありますが、学習段階から実用・実務で使えるものに慣れておくことをおすすめします。
パソコンのOSにあったバージョンをダウンロードしましょう。
ウェブブラウザ
書いたコードをウェブ上に表示させるために必要です。日常使用しているブラウザで十分です。Google Chrome、Safari、Microsoft Edgeなどが代表例です。パソコンのOSにあったものを使用しましょう。
Windowsのブラウザ例
Google Chrome, Microsoft Edge, Firefox, Opera, Brave など
macOSのブラウザ例
Google Chrome, Safari, Firefox, Opera, Brave など
実際には、Webサイトを公開した時に、閲覧する人が使っているブラウザも様々です。
Web制作の現場では、複数のブラウザで仕上がりをチェックすることはスタンダードとなっています。
学習段階から2つ以上のブラウザで表示をチェックする癖をつけておきましょう。
その他のツール
はじめてのHTML/CSSの学習としては、以上のツールがあれば、コードを書いてブラウザに表示させて確認することができます。Webサイトの実践段階、公開段階では、必要なものを必要に応じて準備しましょう。
画像編集ソフト
Webページに使用する画像素材を作成したり、編集するためのソフトウェアです。画像をトリミング、リサイズしたり、オリジナル素材を作成する場合は、画像編集ソフトが必要です。画像編集ソフトには、無料、有料、ブラウザー形式、インストール形式などいろいろなソフトウェアがあります。
本格的な編集では、Adobe Photoshop、Illustrator、Lightroom、PhotoDirectorなどが代表例です。
これらは、Web制作現場でよく使用されているソフトウェアのひとつです。
無料で使えるソフトウェアでは、ペイント（Windows標準）、プレビュー（Macアプリ）、Canva、Fotor、Skitchなどがあります。
使いたい機能や用途にあわせて選びましょう。
FTPソフト、Git
Webサイトを一般公開する時に、作成したファイルやデータをサーバーにアップロードするために必要なプログラムです。使用するレンタルサーバーによっては、アップロード関連のサービスを提供しているところもあるので活用することもできます。Webサイトを公開する時には、このようなツールがあるということだけ覚えておきましょう。
まとめ
このように、HTML/CSSの基礎知識は、準備に費用をかけなくても簡単に学習をはじめることができます。
何よりも、いろいろなコード書いてブラウザで確認することを繰り返すことが大切です。
HTMLとCSSで、コード通りのデザインや動きが反映できるようになったら、次は実践ステップです。
まずは、無料でできることからスタートして、基礎知識を着実に身につけましょう。
