[VSCode] HTML/CSSのコーディングでよく使うスニペットまとめ

公開日:2019/01/21 更新日:2020/11/12

フロントエンドなコーディングでよく使っているスニペット

VSCodeのスニペット機能にとてもお世話になっています
せっかくなので自分がよく使っているものをまとめてみました
「File」→「Preferences」→「User Snippets」で貼り付ければすぐに使えます

html.json

imgタグ

    "img": {
        "prefix": "img",
        "body": [
            "<img src="$1" alt="">",
        ],
        "description": ""
    },

忘れがちでサボりがちなaltをくっつけて、ちゃんと代替テキスト入れようねと意識付け

figure

    "figure": {
        "prefix": "figure",
        "body": [
            "<figure>",
            "    <img src="$1" alt="">",
            "    <figcaption></figcaption>",
            "</figure>",
        ],
        "description": ""
    },

figure使うならキャプションも入れるよねということでfigcaptionとセット

dl/ul/ol

    "dl": {
        "prefix": "dl",
        "body": [
            "<dl>",
            "    <dt></dt>",
            "    <dd></dd>",
            "    <dt></dt>",
            "    <dd></dd>",
            "    <dt></dt>",
            "    <dd></dd>",
            "</dl>",
        ],
        "description": ""
    },
    "ul": {
        "prefix": "ul",
        "body": [
            "<ul>",
            "    <li></li>",
            "    <li></li>",
            "    <li></li>",
            "</ul>",
        ],
        "description": ""
    },
    "ol": {
        "prefix": "ol",
        "body": [
            "<ol>",
            "    <li></li>",
            "    <li></li>",
            "    <li></li>",
            "</ol>",
        ],
        "description": ""
    },

実は一番使っているかもしれないスニペット。liの数はお好みで

table

    "table": {
        "prefix": "table",
        "body": [
            "<table>",
            "    <tr>",
            "        <th></th>",
            "        <th></th>",
            "        <th></th>",
            "    </tr>",
            "    <tr>",
            "        <td></td>",
            "        <td></td>",
            "        <td></td>",
            "    </tr>",
            "</table>",
        ],
        "description": ""
    },

テーブル。きっちりやるならthead、tbody、tfootをつけた方がいいかも

aタグ（内部リンク、外部リンク）

    "link_in": {
        "prefix": "link_in",
        "body": [
            "<a href="$1">$2</a>",
        ],
        "description": ""
    },
    "link_out": {
        "prefix": "link_out",
        "body": [
            "<a href="$1" target="_blank" rel="nofollow">$2</a>",
        ],
        "description": ""
    },

よく使う系。外部リンクのnofollowつけ忘れ防止にも重宝

section

    "sec": {
        "prefix": "sec",
        "body": [
            "<section class="section">"
            "    $1",
            "</section>",
        ],
        "description": ""
    },

意外と出番が多いです。クラスをつけるかどうかはお好みで

Bootstrap4のカラム

    "col1": {
        "prefix": "col1",
        "body": [
            "<div class="row">"
            "    <div class="col">",
            "        $1",
            "    </div>",
            "</div>",
        ],
        "description": ""
   },
    "col2": {
        "prefix": "col2",
        "body": [
            "<div class="row">"
            "    <div class="col-xs-12 col-md-6">",
            "        $1",
            "    </div>",
            "    <div class="col-xs-12 col-md-6">",
            "        ",    
            "    </div>",
            "</div>",
        ],
        "description": ""
   },
    "col3": {
        "prefix": "col3",
        "body": [
            "<div class="row">"
            "    <div class="col-xs-12 col-md-4">",
            "        $1",
            "    </div>",
            "    <div class="col-xs-12 col-md-4">",
            "        ",    
            "    </div>",
            "    <div class="col-xs-12 col-md-4">",
            "        ",    
            "    </div>",
            "</div>",
        ],
        "description": ""
   },
   "col4": {
        "prefix": "col4",
        "body": [
            "<div class="row">"
            "    <div class="col-xs-12 col-sm-6 col-md-3">",
            "        $1",
            "    </div>",
            "    <div class="col-xs-12 col-sm-6 col-md-3">",
            "        ",    
            "    </div>",
            "    <div class="col-xs-12 col-sm-6 col-md-3">",
            "        ",    
            "    </div>",
            "    <div class="col-xs-12 col-sm-6 col-md-3">",
            "        ",    
            "    </div>",
            "</div>",
        ],
        "description": ""
    },

レスポンシブを考慮した1～4列までのカラム用
コード量が多いので、スニペット化のご利益が一番発揮されるパターンかもしれません

WordPressのクエリ実行

    "wp_query": {
        "prefix": "wp_query",
        "body": [
            "<?php",
            "    $args = array( 'xxx' => 'yyy' );",
            "    $the_query = new WP_Query($args);",
            "    if( $the_query->have_posts() ) {",
            "        while( $the_query->have_posts() ) {",
            "            $the_query->the_post();",
            "?>",
            "<?php",
            "        }",
            "    }",
            "    wp_reset_postdata();",
            "?>",
        ],
        "description": ""
    },

ちょっと特殊なアーカイブページを作るときに便利です
「wp_query」と打ってtabキーでずらずらっとコードが並ぶのは気持ちがいいです。思わずエンターキーのターンも大きめになります

WordPressのパス

    "wp_url_home": {
        "prefix": "wp_url_home",
        "body": [
            "<?php echo esc_url(home_url('/')); ?>",
        ],
        "description": ""
    },
    "wp_url_css": {
        "prefix": "wp_url_css",
        "body": [
            "<?php echo get_stylesheet_directory_uri(); ?>",
        ],
        "description": ""
    },
    "wp_url_image": {
        "prefix": "wp_url_image",
        "body": [
            "wp-content/themes/main/images/",
        ],
        "description": ""
    },

ページリンクや画像パスの指定でよくお世話になる関数とパス

WordPressのGET関数

    "wp_get_template": {
        "prefix": "wp_get_template",
        "body": [
            "<?php get_template_part('$1', '$2'); ?>",
        ],
        "description": ""
    },

partかpartsかでたまに迷うことがあるので

css.json

背景画像

    "background": {
        "prefix": "background",
        "body": [
            "background-image: url($1);",
            "background-repeat: no-repeat;",
            "background-position: center;",
            "background-size: cover;",
        ],
        "description": ""
    },

背景画像の設定で必要なプロパティをひとまとめ。backgroundでまとめるのがあまり好きではないので
スニペット名は素直にわかりやすいものにするのがいいと思います。凝って短縮系にしても、肝心な使うときに思い出せなくなって本末が転倒
「background」なら「back」の時点でサジェストに出てくるのでそこまで手間になりません

before/after疑似要素

    "::before": {
        "prefix": "::before",
        "body": [
            "::before {",
            "    $1",
            "    content: "";",
            "}",
        ],
        "description": ""
    },
    "::after": {
        "prefix": "::after",
        "body": [
            "::after {",
            "    $1",
            "    content: "";",
            "}",
        ],
        "description": ""
    },

月に一回は「content: "";」を忘れて混乱してたので、ボケ防止に

flexbox

    "flex": {
        "prefix": "flex",
        "body": [
            "display: flex;",
            "flex-wrap: wrap;",
            "justify-content: center;",
            "align-items: center;",
        ],
        "description": ""
    },

何かと書くことが多いflexboxのプロパティをひとまとめに
flexboxは本当に便利なので、ユースケースごとにスニペット化してもいいかも

縦横中央そろえ

    "position_x": {
        "prefix": "position_x",
        "body": [
            "position: absolute;",
            "top: 0px;",
            "left: 50%;",
            "transform: translateX(-50%);",
        ],
        "description": ""
    },
    "position_y": {
        "prefix": "position_y",
        "body": [
            "position: absolute;",
            "top: 50%;",
            "left: 0px;",
            "transform: translateY(-50%);",
        ],
        "description": ""
    },
    "position_xy": {
        "prefix": "position_xy",
        "body": [
            "position: absolute;",
            "top: 50%;",
            "left: 50%;",
            "transform: translateX(-50%) translateY(-50%);",
        ],
        "description": ""
    },

flexboxを使えないときにお世話になるtransformの中央そろえ

メディアクエリ

    "@media_min768": {
        "prefix": "@media_min768",
        "body": [
            "@media print, (min-width: 768px) {",
            "   $1;",
            "}",
        ],
        "description": ""
    },
    "@media_max767": {
        "prefix": "@media_max767",
        "body": [
            "@media screen and (max-width: 767px) {",
            "   $1;",
            "}",
        ],
        "description": ""
    },
    "@media_min992": {
        "prefix": "@media_min992",
        "body": [
            "@media print, (min-width: 992px) {",
            "   $1;",
            "}",
        ],
        "description": ""
    },
    "@media_max991": {
        "prefix": "@media_max991",
        "body": [
            "@media screen and (max-width: 991px) {",
            "   $1;",
            "}",
        ],
        "description": ""
    },

書式が面倒なのと、たまに境界値がごちゃごちゃになるので登録しておくと便利です

明朝体

    "mincho": {
        "prefix": "mincho",
        "body": [
            "font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;",
        ],
        "description": ""
    },

よく使うフォントセットもスニペット化しておくと捗ります

Font Awesome

    "fontawesome": {
        "prefix": "fontawesome",
        "body": [
            "font-family: "Font Awesome 5 Free";",
            "font-weight: 900;",
            "content: "";",
        ],
        "description": ""
    },

フォントの指定と太さの指定が面倒くさいFont Awesomeもひとまとめにすれば楽ちん
よく使うアイコンは文字コードも含めてスニペット化してもいいかと思います

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。