【VSCode】Bootstrapを素早く打てるようにするための自作CSSスニペット
Webデザインを効率よく行うのにBootstrapというものがあり、事前にCSSクラスを入力することで、よく使用されるWebデザインを簡単に実装することができる。
Bootstrapをさらに効率よく入力するにはVSCodeスニペットでよく使用するbootstrapのCSSクラスをあらかじめ登録しておくと効率的に思えたので、作成したスニペットを情報共有する。
// Place your snippets for css here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"comment_out": {
"prefix": "//",
"body": ["/**/"],
"description": "Log output to console"
},
"xs": {
"prefix": "xs",
"body": ["@media screen and (max-width: 575px) {", "", "}"],
"description": "Log output to console"
},
"sm": {
"prefix": "sm",
"body": ["@media screen and (min-width: 576px) {", "", "}"],
"description": "Log output to console"
},
"md": {
"prefix": "md",
"body": ["@media screen and (min-width: 768px) {", "", "}"],
"description": "Log output to console"
},
"lg": {
"prefix": "lg",
"body": ["@media screen and (min-width: 992px) {", "", "}"],
"description": "Log output to console"
},
"xl": {
"prefix": "xl",
"body": ["@media screen and (min-width: 1200px) {", "", "}"],
"description": "Log output to console"
},
"ms": {
"prefix": "ms",
"body": ["margin-left:"],
"description": "Log output to console"
},
"me": {
"prefix": "me",
"body": ["margin-right:"],
"description": "Log output to console"
},
"mt": {
"prefix": "mt",
"body": ["margin-top:"],
"description": "Log output to console"
},
"mb": {
"prefix": "mb",
"body": ["margin-bottom:"],
"description": "Log output to console"
},
"ps": {
"prefix": "ps",
"body": ["padding-left:"],
"description": "Log output to console"
},
"pe": {
"prefix": "pe",
"body": ["padding-right:"],
"description": "Log output to console"
},
"pt": {
"prefix": "pt",
"body": ["padding-top:"],
"description": "Log output to console"
},
"pb": {
"prefix": "pb",
"body": ["padding-bottom:"],
"description": "Log output to console"
},
"ps-1": {
"prefix": "ps-1",
"body": ["padding-left:0.25rem;"],
"description": "Log output to console"
},
"ps-2": {
"prefix": "ps-2",
"body": ["padding-left:0.5rem;"],
"description": "Log output to console"
},
"ps-3": {
"prefix": "ps-3",
"body": ["padding-left:1rem;"],
"description": "Log output to console"
},
"ps-4": {
"prefix": "ps-4",
"body": ["padding-left:1.5rem;"],
"description": "Log output to console"
},
"ps-5": {
"prefix": "ps-5",
"body": ["padding-left:3rem;"],
"description": "Log output to console"
},
"pe-1": {
"prefix": "pe-1",
"body": ["padding-right:0.25rem;"],
"description": "Log output to console"
},
"pe-2": {
"prefix": "pe-2",
"body": ["padding-right:0.5rem;"],
"description": "Log output to console"
},
"pe-3": {
"prefix": "pe-3",
"body": ["padding-right:1rem;"],
"description": "Log output to console"
},
"pe-4": {
"prefix": "pe-4",
"body": ["padding-right:1.5rem;"],
"description": "Log output to console"
},
"pe-5": {
"prefix": "pe-5",
"body": ["padding-right:3rem;"],
"description": "Log output to console"
},
"px-0": {
"prefix": "px-0",
"body": ["padding-left:0rem;", "padding-right:0rem;"],
"description": "Log output to console"
},
"px-1": {
"prefix": "px-1",
"body": ["padding-left:0.25rem;", "padding-right:0.25rem;"],
"description": "Log output to console"
},
"px-2": {
"prefix": "px-2",
"body": ["padding-left:0.5rem;", "padding-right:0.5rem;"],
"description": "Log output to console"
},
"px-3": {
"prefix": "px-3",
"body": ["padding-left:1rem;", "padding-right:1rem;"],
"description": "Log output to console"
},
"px-4": {
"prefix": "px-4",
"body": ["padding-left:1.5rem;", "padding-right:1.5rem;"],
"description": "Log output to console"
},
"px-5": {
"prefix": "px-5",
"body": ["padding-left:3rem;", "padding-right:3rem;"],
"description": "Log output to console"
},
"pt-0": {
"prefix": "pt-0",
"body": ["padding-top:0rem;"],
"description": "Log output to console"
},
"pt-1": {
"prefix": "pt-1",
"body": ["padding-top:0.25rem;"],
"description": "Log output to console"
},
"pt-2": {
"prefix": "pt-2",
"body": ["padding-top:0.5rem;"],
"description": "Log output to console"
},
"pt-3": {
"prefix": "pt-3",
"body": ["padding-top:1rem;"],
"description": "Log output to console"
},
"pt-4": {
"prefix": "pt-4",
"body": ["padding-top:1.5rem;"],
"description": "Log output to console"
},
"pt-5": {
"prefix": "pt-5",
"body": ["padding-top:3rem;"],
"description": "Log output to console"
},
"pb-0": {
"prefix": "pb-0",
"body": ["padding-bottom:0rem;"],
"description": "Log output to console"
},
"pb-1": {
"prefix": "pb-1",
"body": ["padding-bottom:0.25rem;"],
"description": "Log output to console"
},
"pb-2": {
"prefix": "pb-2",
"body": ["padding-bottom:0.5rem;"],
"description": "Log output to console"
},
"pb-3": {
"prefix": "pb-3",
"body": ["padding-bottom:1rem;"],
"description": "Log output to console"
},
"pb-4": {
"prefix": "pb-4",
"body": ["padding-bottom:1.5rem;"],
"description": "Log output to console"
},
"pb-5": {
"prefix": "pb-5",
"body": ["padding-bottom:3rem;"],
"description": "Log output to console"
},
"p-1": {
"prefix": "p-1",
"body": ["padding:0.25rem;"],
"description": "Log output to console"
},
"p-2": {
"prefix": "p-2",
"body": ["padding:0.5rem;"],
"description": "Log output to console"
},
"p-3": {
"prefix": "p-3",
"body": ["padding:1rem;"],
"description": "Log output to console"
},
"p-4": {
"prefix": "p-4",
"body": ["padding:1.5rem;"],
"description": "Log output to console"
},
"p-5": {
"prefix": "p-5",
"body": ["padding:3rem;"],
"description": "Log output to console"
},
"ms-1": {
"prefix": "ms-1",
"body": ["margin-left:0.25rem;"],
"description": "Log output to console"
},
"ms-2": {
"prefix": "ms-2",
"body": ["margin-left:0.5rem;"],
"description": "Log output to console"
},
"ms-3": {
"prefix": "ms-3",
"body": ["margin-left:1rem;"],
"description": "Log output to console"
},
"ms-4": {
"prefix": "ms-4",
"body": ["margin-left:1.5rem;"],
"description": "Log output to console"
},
"ms-5": {
"prefix": "ms-5",
"body": ["margin-left:3rem;"],
"description": "Log output to console"
},
"me-1": {
"prefix": "me-1",
"body": ["margin-right:0.25rem;"],
"description": "Log output to console"
},
"me-2": {
"prefix": "me-2",
"body": ["margin-right:0.5rem;"],
"description": "Log output to console"
},
"me-3": {
"prefix": "me-3",
"body": ["margin-right:1rem;"],
"description": "Log output to console"
},
"me-4": {
"prefix": "me-4",
"body": ["margin-right:1.5rem;"],
"description": "Log output to console"
},
"me-5": {
"prefix": "me-5",
"body": ["margin-right:3rem;"],
"description": "Log output to console"
},
"mx-0": {
"prefix": "mx-0",
"body": ["margin-left:0rem;", "margin-right:0rem;"],
"description": "Log output to console"
},
"mx-1": {
"prefix": "mx-1",
"body": ["margin-left:0.25rem;", "margin-right:0.25rem;"],
"description": "Log output to console"
},
"mx-2": {
"prefix": "mx-2",
"body": ["margin-left:0.5rem;", "margin-right:0.5rem;"],
"description": "Log output to console"
},
"mx-3": {
"prefix": "mx-3",
"body": ["margin-left:1rem;", "margin-right:1rem;"],
"description": "Log output to console"
},
"mx-4": {
"prefix": "mx-4",
"body": ["margin-left:1.5rem;", "margin-right:1.5rem;"],
"description": "Log output to console"
},
"mx-5": {
"prefix": "mx-5",
"body": ["margin-left:3rem;", "margin-right:3rem;"],
"description": "Log output to console"
},
"mx-auto": {
"prefix": "mx-auto",
"body": ["margin-left:auto;", "margin-right:auto;"],
"description": "Log output to console"
},
"my-0": {
"prefix": "my-0",
"body": ["margin-top:0rem;", "margin-bottom:0rem;"],
"description": "Log output to console"
},
"m-1": {
"prefix": "m-1",
"body": ["margin:0.25rem;"],
"description": "Log output to console"
},
"m-2": {
"prefix": "m-2",
"body": ["margin:0.5rem;"],
"description": "Log output to console"
},
"m-3": {
"prefix": "m-3",
"body": ["margin:1rem;"],
"description": "Log output to console"
},
"m-4": {
"prefix": "m-4",
"body": ["margin:1.5rem;"],
"description": "Log output to console"
},
"m-5": {
"prefix": "m-5",
"body": ["margin:3rem;"],
"description": "Log output to console"
},
"col-10": {
"prefix": "col-10",
"body": ["flex: 0 0 83.333333%;", "max-width: 83.333333%;"],
"description": "Log output to console"
},
"bg": {
"prefix": "bg",
"body": ["background-color:"],
"description": "Log output to console"
},
"important": {
"prefix": "im",
"body": ["!important;"],
"description": "Log output to console"
}
}