VSCode-logo

VSCodeでHTMLのリアルプレビューを可能にする拡張機能

「HTML Preview」

がとても便利だと思ったので、備忘録。

HTML Previewの大まかな使い方

1. Ctrl + Shift + x (Extensions) -> HTML Previewを検索し、インストール

VSCode-HTML Preview

 

2. 一度htmlファイルを保存（保存していないとプレビュー表示されない）

 

3. htmlファイルを開き、下記入力

  • Windows: Ctrl + K -> V
  • Mac: Cmd + K -> V

 

3. 他の拡張機能とショートカットがバッティングしている場合、

  • Windows: Ctrl + Shit + P
  • Mac: Cmd + Shift + P

と押してから、「HTML: Open Preview to the Side」を選択すれば、横にプレビュー表示される

 

これは便利 ♪

CSS を反映させる方法

自分で作った CSS を反映させたい場合の最低限の設定。

こちらの記事も参照 ▼

WordPressの原稿をVSCodeで書くための設定いろいろ
https://mom-neuroscience.com/wordpress-vscode/
私はブログの記事作成に、しばらくWordPressのエディタを使っていたのですが、 特定の条件で動作が遅くなったり、自動フォーマットの修正に時間をとられたり、マルチカーソルが使えなかったりと、少々使いにくいところがあった …

CSS ファイルの作成

CSS ファイルの作成方法は下記。

1. VS Code 内で、Ctrl + N で新規作成画面を開く
   ↓
2. Ctrl + K → Mもしくは左下の "language mode (初期設定は Plaintext) " となっているボタンを押す

言語の設定

   ↓
3. 画面上に "Select Language Mode" とかかれた、言語の検索窓がでてくる
   ↓
4. 検索窓に "css" と入れ、すぐ下に出てくる CSS を選択

言語の設定  

   ↓
5. CSS の内容を記述（私の場合は、Wordpress の スタイルシートをコピーして保存）
   ↓
6. Ctrl + S で、任意のフォルダーに保存 (拡張子は.css)

HTML に必要事項を記述

HTML には、

  • html
  • head
  • body

が必要。

この中の "head" の中に、保存した CSS の場所を指定する。

<link rel="stylesheet" href="./CSS名.css" />
  • 「./」 で、「同じフォルダ内」という意味
  • 一つ上の階層だったら 「../」

実際の記述例 ▼

<!DOCTYPE html>
<html lang="ja"&gt
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="./CSS名.css"/>
    <title>記事タイトル</title>
</head&gt
<body>
    <article style="padding: 40px">
        <!--start-->
        ここに記事を書く
        <!--end-->
    </article>
</body>
</html>

以上の設定をスニペットにいれて、すぐに呼び出せるようにしておくと便利。

スニペットの設定 ▼

{
"draft for mom-neuroscience": {
"prefix": "mom",
"description": "原稿の基本設定",
"body": [
"<!DOCTYPE html>",
"<html lang=\"ja\">",
"<head>",
    "<meta charset=\"UTF-8\" />",
    "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />",
    "<link rel=\"stylesheet\" href=\"./css-mn.css\" />",
    "<title>${1:記事タイトル}</title>",
    "</head>",
"<body>",
    "<article style=\"padding: 40px\">",
        "<!--start-->",
        "${2:ここに記事を書く}",
        "<!--end-->",
        "</article>",
    "</body>",
"</html>",
],
},
}

References

Visual Studio Codeでhtmlコーディングはリアルタイムプレビューがすごく良い
https://rui-log.com/vscode-html-cording/
htmlコーディングするなら「Visual Studio Code」のリアルタイムプレビュー拡張機能が超便利！macOSでもWindowsでも使えるVSCodeはいろんな機能が備わっていて超おすすめ！
HTMLのリアルタイムプレビュー環境を雑に整える - Qiita
https://qiita.com/oshanQQ/items/d25d3cbff8d269c0d38d
はじめに HTMLファイルを書くとき、以前は一回一回VSCodeをターミナルで起動し、ファイルを編集してからChromeで確認するという面倒な方法を取っていました。しかも、普段はVimを使ってるのでVSCodeを使う機会はそうあ...