19:32webWeb制作者のほとんどの方が使用しているVSCode。最近使い始めた方も、リリース当時から使用している方もプラグインは使用していますか?ここでは実際の現場で使われているプラグインや面白いプラグインをご紹介いたします。自分のお気に入りのプラグインを見つけて作業効率をアップさせましょう!VSCodeをダウンロードしていない方はこちらからダウンロードできます!プラグインのインストール方法まずはプラグインのインストール方法です。ここではVSCodeをダウンロードしてみたけどまだなにもプラグインを入れたことがない方に操作方法を説明していきます!とても簡単なのでぜひ一緒にやってみてください。VSCodeを起動させて最初に出てくるこのページの左側にある赤矢印の部分をクリックしてください。すると検索窓が出てくるのでこちらにプラグイン名を入力し、Installをクリックします。インストールが完了したら一度VSCodeを閉じて再起動させてください。※必須ではありませんが、プラグインによっては再起動を促すメッセージが出てしまうことがあるため再起動を推奨しています。検索窓にインストールした時と同じプラグイン名を入力して、アンインストールの文字が出てきたらプラグインのインストールは完了です!基本的なプラグインここでは初めに入れておくことをおすすめする基本的なプラグインを紹介します。プラグインを使ったことがないという方はぜひこの機会にぜひインストールしてみてください。Codeまずはこちらのプラグイン。コードを書き始めた頃はただでさえ見たことのない文字が羅列されているところに説明も英語だとコードとの距離を感じますよね...しかし、こちらを入れておけばある程度日本語にしてくれるので、操作に慣れていなくても安心して使うことができます。Liveの部分をクリックするとブラウザに表示することができます。毎回ファイルをブラウザにドラックアンドドロップせずにブラウザに表示できるのはとても助かりますよね。急いでいる時に画面の上の方にドロップさせてしまってもう一度...なんてこともなくなります。Folder)というエラーが右下に出てしまったという方は、左上のファイルからフォルダを選択してみてください。Serverを使用する場合、HTMLのファイルのみを選択するのではなく、HTMLのファイルが入っているフォルダごと選択する必要があります。Beautifyインデントをきれいに揃えてくれます。インデントはとても大事です!インデントが揃っていないとタグの親子関係がわかりにくくなるので、コーディング作業のしやすさなどにも影響してきます。そのため、気が付いたらBeautifyを使用してもよいかもしれません。ちなみにインストールをすれば、ctrl+shift+pで画面の上の方にプラグインが表示されるので、Beautifyが選択されていることを確認してenterを押すだけできれいに整います。1つだけ懸念点として、会社ごとにインデントの余白が違うことがあります。そのため、むやみにBeautifyをかけるのはおすすめできません。便利なプラグイン基本的なプラグインを入れてコーディングにも慣れてきたら、作業効率も気になってくるかと思います。できることが増えていく分、コードがごちゃごちゃしてわかりづらいということも。そこで便利なプラグインを活用してミスをなくしたり、作業効率をアップさせたりしましょう。2カッコの色を変えてくれます。コーディングを進めるなかで、JavaScriptのような言語を記述しているとカッコを使う機会がたくさん出てくると思います。JavaScriptを使う機会がない方でも、スマートフォン用に表示するメディアクエリなどは使うのではないでしょうか。カッコを誤って消してしまったり、、、カッコの外に記述してしまったりなどのミスも減らせます。メディアクエリの中に書いた記述のカッコの色が変わるので、どのコードをスマートフォン用にしているのか一目でわかります。indent-rainbowインデントに色をつけてくれます。閉じタグがどこにあるのかもとてもわかりやすいですし、きれいにインデントができているかどうかが一目瞭然です。こちらのプラグインをインストールしてからは、きれいにインデントされていないと違和感を抱くようになるので、インデントの意識を高めるためにもインストールをおすすめします。TagペアになっているHTMLのタグを自動的に書き換えてくれるプラグインです。一度記述したタグを変更する際、片方のタグを書き換えると、もう片方のタグを自動的に書き換えてくれます。開始タグを書き換えた後に閉じタグを書き換えることも、閉じタグがどこにあるのかを探さなくても良くなります。ちなみに、開始と終了どちらのタグを編集してもペアのタグを同じタグに書き換えてくれます。便利なプラグインなので、ケアレスミスを防ぐためにも間違いなくインストールすべきプラグインです。Serverを紹介しましたが、こちらのプラグインはalt+Bを押すだけで編集中のファイルをブラウザに表示することができます。どちらも簡単にブラウザ表示ができますので、ご自身が使いやすい方を使ってみてください。Tag開始タグなどをクリックするだけでも薄く色づいてどのタグとセットなのかわかりますが、こちらははっきり色下線を引いて教えてくれます。ミニマップ部分にも色をつけてくれるので、とてもわかりやすいです。CharacterCountこちらは画面の下部バーに文字数を表示してくれます。Web制作の仕事に携わっている方であれば、業務で使用する機会も多いかと思いますので、業務効率をアップさせるために入れておくことをおすすめします。ちなみに、メモ帳代わりにエディタを使う時などにも便利です。テキスト校正くんこれまでに紹介したプラグインは英語の名称が多くありましたが、こちらは珍しく日本語名称のプラグインです。こちらのプラグインは日本語の文章をチェックしてくれます。間違いがある場所には赤線でエラーを表示してくれます。入力すると赤線のエラーが消えるので、とてもわかりやすく校正できます。Countと同様メモ帳代わりにエディタを使う時などにも便利です。ライターのお仕事もすることがある方には非常に助かるプラグインではないでしょうか。zenkaku全角スペースを可視化してくれるプラグインです。何回確認しても記述は間違っていないはずなのに、エラーが出てしまった結果、原因が全角スペースだったなんて...。そんな初歩的なミスをなくすためにもzenkakuは入れておきましょう。PeekHTMLファイルから適用しているCSSを表示して、その場で編集または、ファイル先へ飛ぶことができます。記述したファイルを探す手間を省くことができますので、CSSやSCSSのファイル数が多くなった時はとても便利かと思います。タグをクリックすると適用されているスタイルを確認することができ、そのまま編集ができます。右側に対象ファイルも表示され、そちらをクリックするとファイルに飛ぶこともできますのでそちらも便利です。htmltagwrap選択したタグを親要素で囲ってくれるプラグインです。ある程度タグを記述した後にやはりdivで囲いたくなることは多々あると思います。タグをつけ足すこと自体は簡単ですが、インデントが少し大変になってきますよね。こちらは選択したタグのインデントも自動的に行ってくれます。補足ですが、ul,liタグなど初めから親要素と子要素のどちらも記述したい場合、カッコを記述せず、ul>li*5などと記述するとulタグの中にliタグが5つ記述されたコードが書けます。便利なのでぜひ使ってみてください。Checkerこちらはスペルチェックを行ってくれるプラグインです。クラス名をつける時など、念のために確認しておこうかな、という作業がなくなります。簡単な単語のスペルミスをしてしまうという、ケアレスミスを防ぐこともできるようになります!さらにこちらは、ソースコード専用のスペルチェッカーなので、ハイフンでつなげた単語や間に大文字を入れた記述などをスペルミスだと勘違いすることもありません。このような便利機能もあるのでとてもおすすめです。削除方法これまでインストール方法を紹介しましたが、似たようなプラグインをインストールした際や、やはり違うな。思った時の削除方法をご紹介いたします。削除したいプラグインの名前を検索窓に入力します。選択するとアンインストールの文字が出てきますのでこちらをクリックします。『再読み込みが必要です』をクリックして完了です。VSCodeのショートカットキー(作業効率アップ!)こちらではVSCodeのショートカットキーについてご紹介いたします。コードを書きながらマウスを使うのはとても大変で時間もかかってしまう場合が多く、さらには開始タグと閉じタグの間にカーソルを合わせるのもなかなか神経を使うと思います。そんな時に便利なのがショートカットキーです。初めは覚えるのが大変かもしれませんが、覚えると間違いなく作業スピードが上がります!1つずつでもいいので覚えていきましょう。X選択している行の削除をしてくれます。選択している行を丸ごと移動してくれます。これはとても便利です。選択している行を丸ごとコピーして貼りつけます。enter上に行を作ることができます。]選択したところをインデント、インデントを削除することが可能です。Home行の先頭にカーソルを移動できます。End行の末尾にカーソルを移動できます。homeファイルの先頭に移動します。endファイルの末尾に移動します。カーソルキー上下カーソルの位置はそのままで画面をスクロールできます。Sショートカットキーの一覧です。覚えるまではここで確認してみてください。編集部SEO対策実績「20,000社」を超えるGMOソリューションパートナー株式会社がインハウスSEOに取り組む企業様・個人に向けSEO情報を発信。"Web初心者にもわかりやすく"をコンセプトにSEO対策情報をお届けします。11:00webIllustratorのパターンを知らない初心者でも最後まで読めば、簡単にパターンが作れるようになります。12:00web文章を書くことに慣れていないと、知らず知らずのうちに不自然な文章になってしまうことも多いはず。日本語は単語ひとつの情報量が多く、似た意味なのに違う言葉も多いので、無意識に「重ね言葉」を使っている場合があります。12:00SEOツールWeb担当者であれば、Googleアナリティクス4(GA4)のエンゲージメントについて知っておく必要があります。18:34web今回は、CSSで動きをつける際によく使われる「animation」と「@keyframes」の解説をしていきます。12:00webパワフルで拡張性のあるJavaScriptのスライダー『Swiper』。11:00webIllustratorのパターンを知らない初心者でも最後まで読めば、簡単にパターンが作れるようになります。12:00SEOツールWeb担当者であれば、Googleアナリティクス4(GA4)のエンゲージメントについて知っておく必要があります。18:34web今回は、CSSで動きをつける際によく使われる「animation」と「@keyframes」の解説をしていきます。12:00web文章を書くことに慣れていないと、知らず知らずのうちに不自然な文章になってしまうことも多いはず。日本語は単語ひとつの情報量が多く、似た意味なのに違う言葉も多いので、無意識に「重ね言葉」を使っている場合があります。「CSSの勉強を始めてみた...SEOお役立ち資料ダウンロードGMO順位チェッカーダウンロードはこちらSEOチェックリストダウンロードはこちらSEOタイムズとは?SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。"初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。20,000社以上の幅広い業種の集客支援実績から得られた経験とノウハウをベースに最新の情報をお届けします!今すぐ出来るSEO対策情報も満載。あなたのWebマーケティング戦略を成功に導きます。