IT関連

HTMLは何に入力する? 【Visual Studio Code】

 

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つを使用前に設定しておきます。

ポイント

  1. Auto save
  2. Tab size
  3. Word Wrap
  4. プログラミングフォントの設定

 

①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」を利用するとタグの入力がスムーズに行えるだけでなく、色分けなどもされるのでとても見やすくなります。また、もっと色々な使用方法がありますので、私自身のレベルアップとともにまとめていきたいと思います。

最後までありがとうございました。

google広告

-IT関連

PAGE TOP