Visual Studio Code：Emmet記法を使ってCSSとJavaScriptの読み込みタグを入力する

投稿日 2020年10月3日
著者羽沢仁
カテゴリー IT

link:css

cssのlinkを入力するときは、次のように「link:css」と入力してEnterキーを押下します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  link:css
</head>
<body>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
</body>
</html>

そうすると、次のようにlinkタグが出力されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
</body>
</html>

読み込むcssファイルを適切なものに変更します。

script:src

javascriptの読み込みをするとき、次のように「script:src」と入力してEnterキーを押下します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
  script:src
</body>
</html>

そうすると次のようにscriptタグが出力されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
  <script src=""></script>
</body>
</html>

読み込むJavascriptファイルを入力します。

参考情報

ドットインストールでプログラミングの勉強をしていて教えて頂きました。

書籍

この記事を書いた人

羽沢仁

業務系システムのエンジニアとして、コンサルティング会社で5年、事業会社の社内SEとして5年、フリーランスとして6年、要求定義、設計、開発、テスト、リリース対応の業務に携わってきました。来年からは、街の○○屋さんと直接つながって、ITツールを提供するサービスを開始します。詳しいプロフィールはこちらをご参照ください。

詳細はこちら記事一覧