2024.02.24

【無料配布】スニペット設定をして時短テクニックを覚えよう

松本卓也

こんにちは、松本卓也です。
Web制作会社の代表取締役をしています。

こういった方にオススメ

コード入力の時間を短縮して時給単価を上げたい

下記の制作課題を使用するときにもバンバン使ってます。
２分で設定可能です。時短テクを使って早く作れるようになってください。

スニペットの登録方法

設定方法

スニペットとは　＆　登録方法

SASSのスニペット

"include": {
	"prefix": "ic",
	"body": [
		"@include ",
	],
	"description": "include"
},

"responsive(SP)": {
	"prefix": "sp",
	"body": [
		"@include sp(\\$break2) {",
		"  $0$1",
		"}"
	],
	"description": "responsive(SP)"
},

"responsive(SP1)": {
	"prefix": "sp1",
	"body": [
		"@include sp(\\$break1) {",
		"  $0$1",
		"}"
	],
	"description": "responsive(SP1)"
},

"responsive(SP3)": {
	"prefix": "sp3",
	"body": [
		"@include sp(\\$break3) {",
		"  $0$1",
		"}"
	],
	"description": "responsive(SP3)"
},

"responsive(SPR)": {
	"prefix": "spr",
	"body": [
		"@include sp(\\$retina) {",
		"  $0$1",
		"}"
	],
	"description": "responsive(SPR)"
},

"responsive(SPa)": {
	"prefix": "spa",
	"body": [
		"@include sp(\\$article_break) {",
		"  $0$1",
		"}"
	],
	"description": "responsive(SPs)"
},

"responsive(PC)": {
	"prefix": "pc",
	"body": [
		"@include pc(\\$break2) {",
		"  $0$1",
		"}"
	],
	"description": "responsive(PC)"
},

"hover action": {
	"prefix": "hov",
	"body": [
		"@include hover {",
		"  $0$1",
		"}"
	],
	"description": "hover action"
},

"support css": {
	"prefix": "sup",
	"body": [
		"@include supports($0$1, $0$2)"
	],
	"description": "support"
},

"&:first-of-type": {
	"prefix": "of",
	"body": [
		"&:first-of-type {",
		"  $0$1",
		"}"
	],
	"description": "&:first-of-type"
},

"&:last-of-type": {
	"prefix": "ol",
	"body": [
		"&:last-of-type {",
		"  $0$1",
		"}"
	],
	"description": "&:last-of-type"
},

"not(:first-of-type)": {
	"prefix": "nf",
	"body": [
		"&:not(:first-of-type) {",
		"  $0$1",
		"}"
	],
	"description": "not(:first-of-type)"
},

"not(:last-of-type)": {
	"prefix": "nl",
	"body": [
		"&:not(:last-of-type) {",
		"  $0$1",
		"}"
	],
	"description": "not(:last-of-type)"
},

"&:before": {
	"prefix": "bf",
	"body": [
		"&:before {",
		"  content: '';",
		"  $0$1",
		"}"
	],
	"description": "&:before"
},

"&:after": {
	"prefix": "af",
	"body": [
		"&:after {",
		"  content: '';",
		"  $0$1",
		"}"
	],
	"description": "&:after"
},

"container": {
	"prefix": "co",
	"body": [
		"@include container;",
	],
	"description": "container"
},

"padding": {
	"prefix": "pa",
	"body": [
		"@include padding;",
	],
	"description": "padding"
},

"font-size": {
	"prefix": "fz",
	"body": [
		"font-size: ",
	],
	"description": "font-size"
},

"border-right": {
	"prefix": "br",
	"body": [
		"border-right: ",
	],
	"description": "border-right"
},

"border-top": {
	"prefix": "bt",
	"body": [
		"border-top: ",
	],
	"description": "border-top"
},


"border-left": {
	"prefix": "bl",
	"body": [
		"border-left: ",
	],
	"description": "border-left"
},

"border-bottom": {
	"prefix": "bb",
	"body": [
		"border-bottom: ",
	],
	"description": "border-bottom"
},

"&:nth-child(even)": {
	"prefix": "even",
	"body": [
		"&:nth-child(even) {",
		"  $0$1",
		"}"
	],
	"description": "&:even"
},

"&:nth-child(odd)": {
	"prefix": "odd",
	"body": [
		"&:nth-child(odd) {",
		"  $0$1",
		"}"
	],
	"description": "&:odd"
},

"number": {
	"prefix": "num",
	"body": [
		".list {",
		"  counter-reset: number;",
		"",
		"  .item {",
		"    list-style: none;",
		"    ounter-increment: number;",
		"",
		"    &:marker {",
		"      content: '('counter(number)')'",
		"      $0$1",
		"    }",
		"  }",
		"}"
	],
	"description": "&:odd"
},

"back": {
	"prefix": "back",
	"body": [
		"background-size: cover;",
		"background-position: center center;",
		"background-repeat: no-repeat;"
	]
},

"obje": {
	"prefix": "obje",
	"body": [
		"object-fit: cover;",
		"object-position: center center;",
		"width: 100%;",
		"height: 100%;"
	]
},

"clamp": {
	"prefix": "clamp",
	"body": [
		"overflow: hidden;",
		"text-overflow: ellipsis;",
		"display: -webkit-box;",
		"-webkit-line-clamp: 2;",
		"-webkit-box-orient: vertical;"
	]
},

"slide": {
	"prefix": "slide",
	"body": [
		"&.list1 {",
		"	animation: infinite-slide1 80s -40s linear infinite;",
		"}",
		"",
		"&.list2 {"
		"	animation: infinite-slide2 80s linear infinite;"
		"}"
	]
},

HTMLのスニペット

"picture": {
	"prefix": "pic",
	"body": [
		"<picture>",
		"  <source srcset=\"./assets/image/???$0$1.webp\" type=\"image/webp\">",
		"  <img src=\"./assets/image/???$0$2.jpg\" type=\"image/jpg\" alt=\"\">",
		"</picture>"
	],
	"description": "picture tag"
},

"br": {
	"prefix": "b",
	"body": [
		"<br>$0$1",
	],
	"description": "br tag"
},

"home url": {
	"prefix": "home",
	"body": [
		"<?php echo home_url('$0$1'); ?>",
	],
	"description": "home url tag"
},

"assets url": {
	"prefix": "ast",
	"body": [
		"<?php echo get_template_directory_uri(); ?>/assets/$0$1",
	],
	"description": "assets url tag"
},