HTML基礎 エディターを準備して便利機能を使おう 2025 11/05 HTML基礎 </noscript><iframe data-src="https://player.vimeo.com/video/677157859?h=4e29d33b34" width="100%" height="450" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" class="lazyload" > 記事の内容テキストエディタの準備 テキストエディタとは、文書を書くためのソフトです。 Webサイトの制作では専用のエディタを使うようにしてください。 当スクールでは「vscode」というテキストエディタを使って授業をすすめていきます。 拡張性が高い万能エディタ”vscode” vscodeとはMicrosoftが提供してる無料のテキストエディタです。 拡張性が高い人気のエディターになります。 エディターのインストール インストールURL↓ https://azure.microsoft.com/ja-jp/products/visual-studio-code/ ダウンロード先フォルダが表示されるので、好きな場所を指定してダウンロードしてください。 エディターの拡張機能のインストール方法 ひとまず、以下のよく使うであろう機能だけインストールしてください。 Japanese Language Pack for Visual Studio Code エディターの日本語化のプラグインです。 ※ インストールするだけでは日本語になりません！以下の手順で有効化してください メニューバーの【view】>【command palette】を選択（もしくはショートカットで shift + command(win:Ctrl) + P） 入力欄に【configure display language】と入力して選択 【ja】を選択 再起動を促されるので【Restart】を選択 indent-rainbow インデントを虹色に表示してくれる拡張機能です。 インデントが強調されて見やすくなります。 Auto Rename Tag ペアになっているHTMLタグの名前を自動的に変更する拡張機能です。 Auto Close Tag HTMLの終了タグを自動的に追加してくれる拡張機能です。 HTML CSS Support HTMLドキュメントに対するCSSのサポートを行う拡張機能です。 主にクラス属性の補完、ID属性の補完、css、scssファイルの検索をしてくれます。 Live Server 簡易的なローカルサーバを立てることができる拡張機能です。 起動方法が3つあるので、好きな方法で起動できます。 右下にある Go Live クリックすると、データのプレビューがローカルで出来ます。 Highlight Matching Tag 対応するタグを黄色い下線で強調表示してくれるプラグイン。 迷子になる時に使えます。 EvilInspecto 全角スペースを検出し強調して表示してくれるプラグイン。 Material Icon Theme ファイルをアイコンで表示してくれるので、ぱっとみて分かりやすくなります。 Color Highlight カラーコードをその色でマーキングしてくれるプラグイン。 Markuplint HTMLの構文が間違っている際にエラーとして伝えてくれるプラグイン。 あわせて読みたい 拡張機能「Markuplint」の活用方法 Image preview 画像のプレビューが小さく出るので、ぱっと何の画像をしてしているのか？が変わりやすいです。 IntelliSense for CSS class names in HTML class名の補完をしてくれるプラグインです。とりあえずいれておくだけでも楽になります。 HTML to CSS autocompletion こちらは、CSSを書くときにclass名の候補を出してくれるプラグインです。こちらも入れておいてください！ その他やっておくべき初期設定 フォントサイズを大きく調整 初期設定では小さめなフォントサイズに設定されています。 慣れている方は文字サイズが小さい方がコードを一気に見れるので便利なのですが、コーディング初心者はタイプミスをよくするので大きめにしておくことを推奨します。 メニューバーの【Code】>【基本設定】>【設定】を選択 入力欄に【font size】と入力 【Editor: Font Size】という項目に変更したいフォント数を入れる（単位は省略して数字だけ） 目安は16〜20くらいにしておくとよいでしょう。 自動でコードをキレイに整える コーディング上級者ほどキレイでとてもみやすいコードを書きます。 初心者のときはどうしても書くことでいっぱいになってしまうのでコードがガタガタになりがちです。 ですがガタガタなコードは見づらいだけでなく、イージーミスの温床になってしまいます。 VSCodeには自動でコードをキレイにしてくれる機能がありますのでONにしておきましょう。 メニューバーの【Code】>【基本設定】>【設定】を選択 入力欄に【format】と入力 【Editor: Format On Paste】と【Editor: Format On Save】にチェックを付ける HTMLのひな形を調整する VSCodeにはHTMLを書き始めるときに最低限必要なタグを一括で書いてくれる機能があります。 HTMLファイルで「!」を入力して【Tab(⇥)】と押すだけで以下のコードが出力されます。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html> とても便利で、HTMLをつくるときには毎回つかう機能なのですが、【lang=”en”】となっているところがあると思います。このままだと「このサイトは英語（en）ですよ」という意味になってしまうためいろいろ不都合が出てきます。 なので以下の手順でここを日本語（ja）で出力されるように調整しましょう。 メニューバーの【Code】>【基本設定】>【設定】を選択 入力欄に【emmet variables】と入力 【Emmet: Variables】の【項目の追加】ボタンを押して、項目を【lang】を選択し、値を【ja】と入力してOKを押す 改めてHTMLファイル上で「!」を入力して【Tab(⇥)】を押して <html lang="ja"> となってたら成功です！ 画面の見方とローカルプレビューの方法 画面の見方 ローカルプレビューの方法 コードを書いている時に、プレビューをしながら制作していきます。 自動的にブラウザが立ち上がり、プレビューができると思います。 まとめ エディター自体は高機能で何でも出来ます。ミスも無いです。 使う人間がミスしたりするので、最低限の準備はしておきましょう。 ちょっとしたミスを、いかに減らせれるかが成長の鍵になりますよ。 講座を完了したらクリックしてね！ レッスン完了 次のページへ HTML基礎
