【必ず入れたい!】VSCodeプラグイン7選!HTML CSS コーディング

無料のコードエディタでシェア率が高い
『VSCode ブイエスコード(Visual Studio Code)』
オススメの拡張プラグインを紹介しています😊♪
プラグインを使用することで、無駄な作業時間の削減や、ミスの軽減などにもつながるので、ぜひ参考にしていただけたら幸いです😆❗️
🎥 この動画の構成 🎥
00:32 VSCode(Visual Studio Code)について
00:53 01. Japanese Language Pack
01:13 プラグインインストール方法
01:53 02. Auto Rename Tag
03:18 03. htmltagwrap
05:00 04. Highlight Matching Tag
05:50 05. Prettier
07:08 06. Bookmarks
08:05 07. Live Server
✅ ご視聴いただきありがとうございます🙇‍♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
◆ ぜひ『チャンネル登録』をよろしくお願いします🙇‍♂️
kzread.info?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
/ hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.co.jp/hirocode/
🔋 僕が使っている、おすすめのデバイス 🔋(アフィリエイト広告を使ってます!)
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
✅ Apple Macbook Pro 16inch
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ Apple AirPods Pro
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【 デザイン 思考編 】
✅ 誰のためのデザイン?
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
#VSCode #HTMLCSS #コーディング

Пікірлер: 14

  • @user-vz1wj2ds4u
    @user-vz1wj2ds4u2 жыл бұрын

    ヒロさんすごい。プラグインします。分かりやすい説明ありがとうございます😊

  • @hirocode

    @hirocode

    2 жыл бұрын

    こちらこそ嬉しいコメントいただきありがとうございます😆❗️

  • @user-xz3yq6fx2r
    @user-xz3yq6fx2r Жыл бұрын

    ひろさんのおかげで学習で詰まってたところ何度も助けられました。 これからもお世話になります😭

  • @hirocode

    @hirocode

    Жыл бұрын

    嬉しいコメントいただきモチベめちゃ上がります😆♪ こちらこそありがとうございます🙇‍♂️❗️

  • @user-xz3yq6fx2r

    @user-xz3yq6fx2r

    Жыл бұрын

    @@hirocode 返信くださり光栄です! これからも楽しみにしてます! 頑張ります!😊

  • @mukku-81
    @mukku-812 жыл бұрын

    こんにちは〜 定番ですが、 ・Color Highlight ・indent-rainbow あたりも視覚的に分かりやすくなるのでオススメです!

  • @hirocode

    @hirocode

    2 жыл бұрын

    こんにちは😄♪ オススメ教えていただきありがとうございます😆! どちらも表示めちゃ分かりやすくなりますね❗️❗️ありがとうございます🙇‍♂️

  • @user-zp5lv8ov1b
    @user-zp5lv8ov1b2 жыл бұрын

    Bracket Pair Colorlizerは良いと思います。

  • @hirocode

    @hirocode

    2 жыл бұрын

    早速入れてみました!これ表示がすごくわかり易くなりますね😆❗️ありがとうございます🙇‍♂️❗️❗️

  • @1969tact
    @1969tact Жыл бұрын

    楽しく拝見させていただいています。 6:32 の画面でも出ているように、Prettierでフォーマットするとimgタグ、brタグ、inputタグなど、閉じタグが不要なタグの後ろが" />"に変えられてしまいますね。ブラウザでの表示に問題は無さそうなのですが、コードを読んでいるときの違和感に耐えられなくてPrettier無効にしてしまいました。これを回避できれば文句なしのフォーマッターなんですが。。。

  • @hirocode

    @hirocode

    Жыл бұрын

    ありがとうございます😆❗️ Prettierでスラッシュ無くすこと難しそうですね😭💦

  • @runa1738
    @runa17382 жыл бұрын

    下線の点々とかは何処から変更するんでしょうか?

  • @hirocode

    @hirocode

    2 жыл бұрын

    コメントいただきありがとうございます😊♪ settings.json(cmd + shift + p, キーワードsettingsで検索)という設定ファイルがあるので、ここで指定する形になります✏️ marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag#styling-options このページの"Styling Options"という項目を見ながら設定ファイルに書けば反映されます😆❗️

  • @runa1738

    @runa1738

    2 жыл бұрын

    @@hirocode ありがとうございます! 見てみます!

Келесі