Web初心者でも３時間で完成できるポートフォリオサイト #2
ポートフォリオのつくりかた
Web制作が初めてでも、無料で簡単にポートフォリオサイトをつくることができます。この記事では、環境構築からサイト公開まで、３時間でポートフォリオサイトをつくる方法を紹介します。
この記事の手順に沿って作成すると、以下のようなポートフォリオサイトが完成します。
サイト作成のおおよその時間配分は以下の通りです。
- ポートフォリオの内容を考える (60分 )
- VSCodeでWeb制作環境を用意する (15分)
- HTMLを作成する (45分)
- Bootstrapで見た目を整える (45分)
- GitHubPagesに公開する (15分)
今回は、「2. VSCodeでWeb制作環境を用意する」について紹介します。
もくじ
VSCodeでWeb制作環境を用意する
環境構築の流れ以下に沿って進めていきます。
- Visual Studio Codeをインストールして日本語化する
- htmlファイルの作成
- HTML Viewer拡張機能をセットアップ
- Pretter拡張機能をセットアップ
1. VSCodeをインストールして日本語化する
まず、以下のサイトからダウンロードして、インストールします。
デフォルト言語が英語なので、扱いやすいように日本語化します。
以下の手順で日本語設定できます。
- Visual Studio Codeを開く
- メニューバーの View > Command Palette を選ぶ
- Configure Display Language > Install additional languages を選ぶ
- Japanese Language Pack for Visual Studio Codeをインストール
- Visual Studio Codeを再起動
詳細は以下の動画が参考になります。
2. HTMLファイルを作成する
これで、最低限の環境が整いました。さっそく、htmlファイルをつくっていきます。
まず「portfolio」というフォルダを好きな場所に作成します。そして、VSCodeの「ファイル > 開く」で上記フォルダを指定して開きます。
フォルダを開けたら、以下の画像のボタンを押してHTMLファイルを作成します。ファイル名は index.html という名前にしてください。
次に index.htmlファイルを開いて、半角文字で「!」と入力して、Enterを押します。すると、自動でHTMLファイルの構造ができます。
HTMLの構造ができたら、<body>の次の行に「ポートフォリオサイトです。」と入力します。
bodyの中に「ポートフォリオサイトです」と入力する。
これで完成です。ファイルを保存したら、エクスプローラーから index.html ファイルをダブルクリックしてブラウザで開いてみてください。
この「index.html ファイルをVSCodeで編集」→「ブラウザでプレビューして確認」という手順が、Webサイト制作の作業の流れになります。
3. HTML Preview拡張機能を入れる
index.html ファイルを編集して、ブラウザで更新してプレビューする流れは、少し面倒です。HTML PreviewというVSCodeの拡張機能をインストールすることで、VSCode内で即時にプレビュー表示をさせることができます。
拡張機能のインストール方法や使い方は以下の記事が参考になります。
インストールが完了したら、Command+K , V で以下のようにVSCode内で即時プレビューができるようになります。
4. Prettier拡張機能を入れる
もう一つだけHTML作成に便利な拡張機能をインストールします。Prettierという拡張機能を入れると、以下のように自動でプログラムを整形してくれます。
Prettierのインストールと使い方は以下の動画が参考になります。
まとめ
今回は、VSCodeを使ったHTML開発環境の構築方法について紹介しました。
これで、Webサイトを開発する準備が整いましたので、次回から実際にポートフォリオサイトをつくっていきます。