ビジネス向けWEBサイトをつくる

Visual Studio CodeをHTML+CSSコーディングに最適化しよう

本ページはプロモーションが含まれています

私は長い間HTML+CSSコーディングを「Coda 2」と「Espresso5」に頼ってきたのですが、両方とも2022年で終了してしまいました。

「Coda 2」の後継はサブスク型の「nova」というアプリがあります。

「Espresso5」にいたっては、どうなってしまったのか。サイトも見当たりません。

GUIでCSSが入力出来たりCSSの変化に対応したライブプレビューが確認できる面白いアプリだっただけに残念です。

どちらも「Flexbox」の「gap」がプレビューできなくなって、そろそろアップデートが欲しいと思っていたので、切り替え時だったのです。

という状況で「Visual Studio Code」に切り替えることにしました。

「Visual Studio Code」はすでにコーダーとしてデファクト・スタンダードになっているアプリケーションです。

機能拡張のためのプラグインが用意されているので、HTML+CSSコーディングにも対応しています。しかも無料で使用出来ます。

こんなのが出たら「Coda 2」や「nova」には未来がない気がします。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

Visual Studio Codeとは

Visual Studio Code(VS Code)は、Microsoftが提供する無料でオープンソースのコードエディタです。

以下に主な特徴と機能をまとめてみます。

VS Codeの主な特徴と機能
  • 軽量で高速
    VS Codeはシンプルで軽量なエディタでありながら、高速かつパフォーマンスが優れています。
  • 多言語対応
    言語のサポートが豊富で、JavaScript、TypeScript、Python、Java、C#など、多くのプログラミング言語に対応しています。
  • 拡張可能性
    拡張機能を利用して機能を追加できます。豊富な拡張機能のエコシステムが存在し、ユーザーが必要なツールや言語サポートを追加できます。
  • 統合ターミナル
    エディタ内に統合されたターミナルを利用でき、コードのビルドやデバッグ、シェルの実行が容易です。
  • デバッグサポート
    内蔵のデバッガを使用して、様々な言語でコードのデバッグが可能です。
  • Gitの統合
    Gitが組み込まれており、リポジトリのクローン、コミット、プッシュ、プルなどがエディタ内で行えます。
  • テーマとカラーリング
    豊富なテーマやカラーリングオプションが用意されており、ユーザーエクスペリエンスをカスタマイズできます。
  • IntelliSense
    コード補完、リアルタイムのエラーチェック、変数のホバーなど、豊富なIntelliSense機能が利用できます。

VS Codeは開発者のためのコーダーです。

およそ何でもできます。

HTML+CSSコーダーにとってはIntelliSense機能がうれしいです。

さらに「Git」が統合されたので、バージョン管理や差分の確認が容易になっています。
このあたりは、新たに学習しないといけないので、小規模サイトの構築が多い技術者には面倒かもしれません。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

Visual Studio Codeの標準機能Emmet

VS Codeで驚いたのは豊富なIntelliSense機能を提供している「Emmet」です。

「Emmet」はたくさんのショートコードを用意していて、簡単なコード入力でコードが補完されます。

例えば

div.content

と入力すれば

<div class=”content”></div>

と変換されます。

CSSだと

w10

と入力すれば

width: 10px;

と変換されます。

以下のサイトでチートシートが用意されているので参照してください。

あらゆるショートコードが用意されているので、慣れればコーディングの速度が爆速になるでしょう。

しかし、慣れるまでに時間がかかりそうです。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

HTML+CSS編集用のプラグイン

私の場合、VS Codeを使用する目的はHTML+CSS編集です。

そこで、目的のために最適化してみます。

VS Codeは様々なプラグインがありますので、HTML+CSS編集用のプラグインを導入するだけです。

いくつか紹介します。

Prettier

Prettierは自動でインデントをいれてくれる、フォーマッティング用の機能拡張です。

見やすいコードを作るためには必須です。

右クリックでコマンドビューを表示し「ドキュメントのフォーマット」またはショートカットでソースコードをフォーマッティングします。

コマンドビュー

Live Server

Live Serverはクリックするだけでローカルサーバーを構築し、ブラウザーでプレビューしてくれます。

VS Codeはウインドウ下部にステータスバーが表示されています。

ステータスバー

その「Go Live」をクリックします。

するとブラウザーで表示してくれます。

ローカルサーバーが構築されているので、サーバーにアップしないと操作しないスクリプトも機能します。

CSS Peek

HTMLで使用されているCSS定義ファイルを呼び出すことができます。

ソースのCSS名を右クリック→「ピーク」→「定義をここに表示」すると…

コマンドビュー

以下の様にソース上にCSSを表示してくれます。

これは便利です。

CSS Peekのウインドウ

Image preview

画像ファイルのパスをマウスオーバーすると画像をプレビューしてくれます。

画像プレビュー

Aoto Rename Tag

例えば<div>タグを<section>タグに変更したいような場合、エンドタグを同時に書き換えてくれます。

自動リネーム前

<div>タグを<section>タグに変更すると同時にエンドタグも</section>に変更されます。

自動リネーム後

HTML CSS Support

リンクしてあるCSSで定義した属性の候補を表示してくれます。

HTML CSS Support

CSSのリンクパスに「?」でバージョン情報などを書いている場合は機能しません。

Highlight Matching Tag

開始タグと終了タグをハイライトしてくれます。

マッチングタグをハイライト

Live Preview

私がどうしても欲しかったのはプレビュー機能です。

Live Serverはブラウザー上でプレビューするため、VS Codeのウインドウから離れてしまいます。

Live Previewをインストールすると、VS Codeのウインドウ内でプレビューしてくれます。

ソース上部の「プレビューの表示」マークをクリックします。

プレビューボタン

GitLens

VS CodeはGitをサポートしていますので、差分の表示やバージョン管理も可能です。

差分管理

まとめ

以上、HTML+CSS編集に最適化したVS Codeを簡単に紹介いたしました。

VS Code1本で、他のツールはいらないでしょう。

今回紹介しきれなかった、便利な機能やプラグインが、まだまだ、たくさんあります。

「VS Code」「Visual Studio Code」で検索すると多くのユーザーがノウハウを公開しています。

この便利なツールを使い倒しましょう。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

9 − one =

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
※以下は私が活動している企業情報にリンクしています。