ここでは、HTMLとCSSを勉強するために必要な環境構築方法を解説します。
また、Webデザインの勉強に重点を置くため、本来本番環境で必要になるドメインとサーバーに関しては割愛します。
- テキストエディター（Visual Studio Code：VSCode）
- ブラウザ（Google Chrome, Microsoft Edge, その他）
- Local（ローカル環境用サーバー管理ツール）
- WordPress
個人的に、上記の環境が揃っていればWebデザインの勉強を始めやすいです。
Webデザインの勉強を始める前に
Webデザインの勉強を始める前に、「目的は何か」で勉強する環境も変わります。
ここでは、以下の想定パターンを考えます。
- 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であっても、ブラウザがなければ画面を表示できません。
本記事では、Google Chromeを推奨します。
以下のリンクからGoogle Chrome用のファイルをダウンロードできます。
ダウンロード後、インストーラーを起動させChromeをインストールしてください。
［OK］や［次へ］をクリックしていけば、インストールは完了します。インストールに行き詰まった場合はこちらを読んでみてください。
HTMLとCSSを勉強しよう
上記の目的に合わせた各ツールをインストールし動作確認ができたら、本格的にHTMLとCSSを勉強しましょう。
本サイトのHTML&CSS入門講座の流れは、HTML&CSSの基本を押さえながらWordPress上で実施していく実践型になります。
以下は、初心者でも分かりやすいHTMLの入門編になります。
