【初心者のHTML/CSS入門】Webデザインの勉強に必要な環境を構築する

ここでは、HTMLとCSSを勉強するために必要な環境構築方法を解説します。

また、Webデザインの勉強に重点を置くため、本来本番環境で必要になるドメインとサーバーに関しては割愛します。

個人的に、上記の環境が揃っていればWebデザインの勉強を始めやすいです。

また、HTMLに関するカテゴリーページから学びたい内容を決めたい人は、以下のHTMLページをご確認ください。

また、最終的にサイト公開あるいは本格的なWordPressサイトを運営したい人は「WordPress初心者へおすすめのレンタルサーバー4選を比較」を一読ください。

Webデザインの勉強を始める前に

Webデザインの勉強を始める前に、「目的は何か」で勉強する環境も変わります。

ここでは、以下の想定パターンを考えます。

以下から、それぞれの環境構築に関して解説します。

Webアプリケーション開発による環境構築

ここでは、目的として「Webアプリケーション開発による環境構築」について解説します。

はじめに、Visual Studio Code（VSCode）をインストールしてください。

PCのOSに合ったパッケージの安定版（Stable）を選択してインストーラーをダウンロードします。

ダウンロードしたインストーラーを起動すると、使用許諾画面が表示されるため、「同意する」にチェックし「次へ」をクリックします。

追加タスクの選択画面では、必要なオプションを選んだら「次へ」をクリックします。

インストール準備の完了画面で「インストール」をクリックします。

インストールを終えたら、「完了」をクリックします。

上記の操作にて、Visual Studio Codeのインストールが完了します。

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

PC標準装備のメモ帳などを使うことも可能ですが、使い勝手が良くありません。

ここではコードを書くためのテキストエディターを用意しましょう。

また、本記事ではWebサイト制作を中心とするガイドになっています。

そのため、Webアプリケーション開発による環境構築はVSCodeのご紹介までで割愛します。

Webサイト制作による環境構築

本記事の本題であるWebサイト制作による環境構築では、WordPress上で実装するWebサイト制作を目的とします。

実際に、Webサイト制作に関する案件のほとんどがWordPressといったCMSを前提に制作依頼があるためです。

筆者自身もWordPressによるWebサイト制作案件の際に実施している方法になります。

Local（ローカル環境用サーバー管理ツール）は、自身のPC環境のみでWordPressを立ち上げ、ローカル環境にてサイト制作ができるため重宝します。

わざわざドメイン/サーバーをレンタルしなくても、テスト環境を構築できるメリットがあります。

以下のLocal（ローカル環境用サーバー管理ツール）をダウンロード/インストールしてください。

「DOWNLOAD FOR FREE」ボタンをクリックすると登録画面がポップアップ表示されます。

アカウント情報入力後、「GET IT NOW!」ボタンをクリックすると、Localのインストーラーがダウンロードされます。

インストーラーを起動し、インストールオプションの選択やインストール先フォルダを決定し、「次へ」と「インストール」ボタンを押下していけばLocalのインストール完了です。

インストール完了後に、デスクトップにショートカットキーが作成されると思うので、ダブルクリックして起動してみましょう。

起動すると、上記の画像のようにService of Termsへの同意を求められるため、チェックして「I agree」を押下します。

こちらは特にアカウントを作成する必要がないため、画面右上の×（バツ）を押下します。

こちらも特にレポートを求めていないため、「No, thanks」を選択します。

こちらも同様です。

上記の画面にて、ローカルPC上でWordPressを立ち上げることができるようになりました。

実際に、「＋ Create a new site 」ボタンをクリックしてWordPressサイトを立ち上げてみましょう。

基本的に設定画面に関する選択は、デフォルトの設定で問題ありませんので画面右下の「Continue」ボタンをクリックします。

こちらの設定画面では、ローカル上で立ち上げるWordPressサイトのドメインを設定します。

ここでは、私自身のサイトであるCode Stockをドメイン名にしていますが、任意のドメイン名で問題ありません。

ドメイン名が決まれば、「Continue」ボタンをクリックします。

こちらの設定画面では、WordPressサイトに利用する各システムのバージョンをカスタムするか選択しますが、「Preferred」を選択していればPHP, WorPress, MySQLの安定版（最新版）を選ぶことになるため、このまま「Continue」ボタンをクリックします。

最後に、WordPressサイトのユーザー名・パスワード・言語選択等があるため、任意で入力＆選択して「Add Site」をクリックします。

扱っているPCによってセキュリティソフトが備わっている、あるいは設定しているため、ポップアップ表示にてファイアウォールブロックが発生しますが、「許可」を押していけば問題ありません。

WordPressサイトの作成が完了すると、Localのサイト一覧画面にて作成されたサイトを確認することができます。

また、画面右上の「WP Admin」をクリックするとローカル上のWordPressサイトログイン画面を開くことができます。

WordPressサイトの管理画面が開けたら、先ほど設定したユーザー名とパスワードを入力しログインしてみましょう。

ログインすると、WordPressサイトの管理画面を確認できます。

また、画面左上のサイト名をクリックすると、現時点のサイト画面を確認することができます。

これでローカルPCにてWordPressサイトを立ち上げることができました。

Localを利用してWordPressサイトを立てることで、ドメインやサーバーをレンタルすることなく事前にサイト制作を実施することができます。

ぜひ活用してみましょう。

ここでは、WordPressの詳細な機能に関する解説は割愛します。

なぜWordPressを前提としたWebサイト制作が多いのかは、主に以下の理由が挙げられます。

要するに、1から開発するよりもWordPressありきのほうが様々な面で効果的だからです。

事実、本サイトも例に漏れずWordPressのカスタムHTMLブロックを利用し、オリジナルデザインを挿入しています。

さらに、「SWELL」といった有料テーマも併用し、コンテンツページ（いわゆる記事）に関してはSWELLのテーマデザインを活用しています。

また、SEO対策やファイルバックアップ、画像最適化、お問い合わせ機能などはプラグインを利用し効率化しています。

このように、Webデザインの勉強の一環として「HTML&CSS + WordPress」のセットで考えておくとよいでしょう。

コーポレートサイト例を用いたWordPressサイト移行例を確認したい人は「HTMLをWordPress化する移行手順：自作テーマより簡単な方法解説」を一読ください。

ブラウザのインストール

実際に、テキストエディタで記述したコードもWordPressであっても、ブラウザがなければ画面を表示できません。

本記事では、Google Chromeを推奨します。

以下のリンクからGoogle Chrome用のファイルをダウンロードできます。

ダウンロード後、インストーラーを起動させChromeをインストールしてください。

［OK］や［次へ］をクリックしていけば、インストールは完了します。インストールに行き詰まった場合はこちらを読んでみてください。

HTMLとCSSを勉強しよう

上記の目的に合わせた各ツールをインストールし動作確認ができたら、本格的にHTMLとCSSを勉強しましょう。

本サイトのHTML&CSS入門講座の流れは、HTML&CSSの基本を押さえながらWordPress上で実施していく実践型になります。

以下は、初心者でも分かりやすいHTMLの入門編になります。

よくある質問（FAQ）

Webデザインの勉強を始めるのに、初期費用や高額なソフトの購入は必要ですか？

いいえ、学習環境の構築は完全に無料で行えます。

制作現場でも標準として使われている高性能なテキストエディタ「Visual Studio Code（VS Code）」や表示確認用のブラウザ「Google Chrome」など、必要なソフトウェアはすべて公式から無料でダウンロードできるため安心してください。

パソコンに最初から入っている「メモ帳」でコードを書いてはダメなのでしょうか？

Windows標準の「メモ帳」やMacの「テキストエディット」でもコード自体は書けますが、絶対に専用のコードエディタを使用することを推奨します。

専用エディタを使うと、コードが色分けされて見やすくなるだけでなく、「自動補完（入力の予測機能）」や「エラーの波線表示」など強力なサポート機能が働きます。

メモ帳では単純なスペルミスに気づけず挫折する原因になるため、迷わず「VS Code」を導入しましょう。

作成したHTMLファイルを見るために、レンタルサーバーやドメインを契約する必要はありますか？

HTMLやCSSの基本的な勉強・コーディングの段階では、サーバーやドメインの契約は一切不要です。

作成した「.html」のファイルは、ご自身のパソコン上にあるブラウザ（Chromeなど）に向かってドラッグ＆ドロップするだけで、実際のWebページと全く同じように表示・確認することができます。

世界に公開したくなったタイミングでサーバーを契約すれば問題ありません。

コードを書き換えるたびに、ブラウザの更新ボタン（F5）を押すのが面倒です。楽な方法はありますか？

VS Codeの「Live Server（ライブサーバー）」という無料の拡張機能をインストールするのがよいです。

これを導入すると、エディタでコードを保存（Ctrl+S または Cmd+S）した瞬間に、隣に開いておいたブラウザの表示が自動でリロードされるようになります。

いちいち画面を切り替えて手動で更新する手間が省け、学習効率が劇的に向上します。

作ったHTMLファイルをダブルクリックしたら、ブラウザではなく別のアプリ（またはエディタ）が開いてしまいました。

パソコンの「既定のアプリ（デフォルトアプリ）」の設定が、ブラウザ以外に関連付けられていることが原因です。

ファイルを右クリックして「プログラムから開く（Macの場合は『このアプリケーションで開く』）」を選択し、「Google Chrome」などのブラウザを選ぶことで正常に表示されます。

今後もダブルクリックで開きたい場合は、パソコンの設定画面から.htmlファイルの既定のアプリをブラウザに変更しておきましょう。