ミギムキ

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

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

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, "MS P明朝", "MS 明朝", serif;", ], "description": "" },
  • よく使うフォントセットもスニペット化しておくと捗ります

Font Awesome

"fontawesome": { "prefix": "fontawesome", "body": [ "font-family: \"Font Awesome 5 Free\";", "font-weight: 900;", "content: \"\\\";", ], "description": "" },
  • フォントの指定と太さの指定が面倒くさいFont Awesomeもひとまとめにすれば楽ちん
  • よく使うアイコンは文字コードも含めてスニペット化してもいいかと思います
スポンサー広告