目次
HTMLファイルを何のアプリケーションを使って作るかを説明します。
HTMLは、Windowsなら「メモ帳」、Macなら「テキストエディット」といった、パソコンに最初からインストールされているソフトウェアでも書くことができますが、メモ帳よりもHTMLを書く（コーディング）ために作られたもの（エディタ）があります。
メモ
「コーディングとは？」
WebブラウザにWebページを表示させるために必要なHTMLやCSSのコードを書くこと
コーディング用のエディタには、無料なものでは「Visual Stadio Code」「Brackets」「Atom」などがあります。有料のものでは「Dreamweaver」「Webstorm」「Coda」などがあります。
コーディング用のエディタでは、HTMLのタグが色分けして表示される機能などがあり、見やすさや入力の効率がとてもいいです。
Visual Studio Codeってどんなもの？
今回は、2015年にリリースされたVisual Studio Codeを紹介します。「VSCode」と呼ばれているもので、マイクロソフトによって開発されているエディタです。
特徴
- だれでも無料で利用できる
- WindowsやMac、Linuxなど多くのオペレーティングシステムに対応
- メニューなどの表記を様々な言語に切り替えることが可能
- 「拡張機能」で機能を追加することができる
- ソースコードの入力補助や見た目を変えるテーマの変更などできる
ダウンロードのしかた
まずはVisual Studio Codeをダウンロード→インストールまでの流れを見てみましょう。
(1)検索エンジンで「visual Studio Code」と入力
(2)ホームページを開き、「すぐダウンロード」→OSを確認しダウンロード
（3）インストール
【Windows】保存後にファイルを開き、「次へ」で送りインストール完了
【Mac】ダウンロードファイルを解凍後、ファイルをアプリフォルダにドラッグ＆ドロップすればインストール完了。
（4）Visual Studio Codeを開く
welcome画面が開くが、毎回表示しなくていい場合は「Show welcome page on startup」にチェックを入れる
Visual Studio Code 基本設定
ダウンロードが完了後、すぐにでも入力ができますが使いやすいように設定を行います。
日本語化
検索（左上-虫めがねのマーク）から「Japanese language pack for visual studio code」と入力後「インストール」→「Restartボタン」がでるので、クリックすると日本語になっています。
使用設定「よく使用するもの（Commonly Used)」より4点を設定
下記画像より→「設定」（もしくは「ファイル」→「ユーザー設定」→「設定」でも可）
次の4つを使用前に設定しておきます。
ポイント
- Auto save
- Tab size
- Word Wrap
- プログラミングフォントの設定
①Auto save
- [ after Delay ]します
- 自動保存してくれます。
②Tab size
- 「4」→「2」へ
③Word Wrap
- 「off」 → 「on」へ
- 長い行を折り返して表示してくれます
④プログラミングフォントの設定
HTMLタグの入力では「全角のスペース」は混入するとバグの原因にもなるので、プログラミング用フォント「Ricty Diminished」のインストールをおすすめします。
「Ricty Diminished」というフォントでは、通常では表示されない「全角スペース」を視覚的に表示してくれます。（下記図を参照）
インストール方法は、検索で「Ricty Diminished」と入力し、「....Regular.ttf」を選びます。ダウンロードしたファイルを各OSに併せてインストールします。
↓
最後に「設定」→「よく使用するもの（Commonly Used)」→Font Familyのフォント名を「Ricty Diminished」と入力し直せば完了です
まとめ
今回はHTMLコードをどのアプリケーションで入力するかを説明しました。
「Visual Studio Code」を利用するとタグの入力がスムーズに行えるだけでなく、色分けなどもされるのでとても見やすくなります。また、もっと色々な使用方法がありますので、私自身のレベルアップとともにまとめていきたいと思います。
最後までありがとうございました。