はじめに
自分用に良記事などをまとめてるだけなので、わかりづらい可能性があります。
jsonファイルにエラーが会ったら表示してくれるプラグインをインストールしておくといいらしい。
私はしてないけど。
JSONLint Extension for Brackets
とりあえず!+tabで出てくるlang="eng"を"ja"に変える
cmd+,で設定を開き、emmetと入力 ＞ 上の方にあるsetting.jsonを編集をクリック > 以下を追記
,
"emmet.variables": {
"lang": "ja"
}
こうなる↓
setting.json
{
"intelephense.diagnostics.undefinedFunctions": false,
"window.zoomLevel": 1,
"hediet.vscode-drawio.local-storage": "eyIuZHJhd2lvLWNvbmZpZyI6IntcImxhbmd1YWdlXCI6XCJcIixcImN1c3RvbUZvbnRzXCI6W10sXCJsaWJyYXJpZXNcIjpcImdlbmVyYWxcIixcImN1c3RvbUxpYnJhcmllc1wiOltcIkwuc2NyYXRjaHBhZFwiXSxcInBsdWdpbnNcIjpbXSxcInJlY2VudENvbG9yc1wiOltdLFwiZm9ybWF0V2lkdGhcIjpcIjI0MFwiLFwiY3JlYXRlVGFyZ2V0XCI6ZmFsc2UsXCJwYWdlRm9ybWF0XCI6e1wieFwiOjAsXCJ5XCI6MCxcIndpZHRoXCI6ODUwLFwiaGVpZ2h0XCI6MTEwMH0sXCJzZWFyY2hcIjp0cnVlLFwic2hvd1N0YXJ0U2NyZWVuXCI6dHJ1ZSxcImdyaWRDb2xvclwiOlwiI2QwZDBkMFwiLFwiZGFya0dyaWRDb2xvclwiOlwiIzZlNmU2ZVwiLFwiYXV0b3NhdmVcIjp0cnVlLFwicmVzaXplSW1hZ2VzXCI6bnVsbCxcIm9wZW5Db3VudGVyXCI6MCxcInZlcnNpb25cIjoxOCxcInVuaXRcIjoxLFwiaXNSdWxlck9uXCI6ZmFsc2UsXCJ1aVwiOlwiXCJ9In0=",
"emmet.excludeLanguages": [
"markdown"
], //追記ここから。左の,も含む。
"emmet.variables": {
"lang": "ja"
}
}
!+tabだけでmetaタグとかfaviconとか全部出てくるようにする。
詳しいやり方は 【VSCode】EmmetのHTMLテンプレートにいろいろ詰め込んでみたを参照
参考リンクの
IE用の<meta http-equiv="X-UA-Compatible" content="IE=edge">とか、PWA化の<link rel="manifest" href="PWA化のためのマニフェストファイル.webmanifest">はいらない気がしたので消去。
&コメントアウトでわかりやすくしてみたのが以下です。
{
"html:!": {
"prefix": "!",
"body": [
"<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\"content=\"width=device-width, initial-scale=1\">\n<meta name=\"description\" content=\"検索結果でサイト名の下に表示される「サイトの説明文」\">\n\n<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"アップルタッチ用のファビコン(相対パスOK）.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"32サイズのファビコン画像(相対パスOK）.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"16サイズのファビコン画像(相対パスOK）.png\">\n\n<!-- 以下OGP -->\n<meta property=\"og:description\" content=\"SNSでシェアされたときに表示するサイトの説明文\">\n<meta property=\"og:title\" content=\"SNSでシェアされたときに表示するサイトのタイトル\">\n<meta property=\"og:image\" content=\"SNSでシェアされたときに表示する画像※かならず絶対パスを記載（相対パス不可）https://....../img/icons/logo.png\">\n<meta property=\"og:image:width\" content=\"画像の幅px\">\n<meta property=\"og:image:height\" content=\"画像の高さpx\">\n<meta property=\"og:type\" content=\"urlがトップページの場合→website、トップページ以外の場合→article\">\n<meta property=\"og:url\" content=\"https://........\">\n<!-- OGP終わり -->\n<title>${1:Document}</title>\n<link rel=\"stylesheet\" href=\"${2:css/style.css}\">\n</head>\n<body>\n $0\n</body>\n</html>"
]
}
}
で!+tabで以下が出せるようになる。
html.json
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1">
<meta name="description" content="検索結果でサイト名の下に表示される「サイトの説明文」">
<link rel="apple-touch-icon" sizes="180x180" href="アップルタッチ用のファビコン(相対パスOK）.png">
<link rel="icon" type="image/png" sizes="32x32" href="32サイズのファビコン画像(相対パスOK）.png">
<link rel="icon" type="image/png" sizes="16x16" href="16サイズのファビコン画像(相対パスOK）.png">
<!-- 以下OGP -->
<meta property="og:description" content="SNSでシェアされたときに表示するサイトの説明文">
<meta property="og:title" content="SNSでシェアされたときに表示するサイトのタイトル">
<meta property="og:image" content="SNSでシェアされたときに表示する画像※かならず絶対パスを記載（相対パス不可）https://....../img/icons/logo.png">
<meta property="og:image:width" content="画像の幅px">
<meta property="og:image:height" content="画像の高さpx">
<meta property="og:type" content="urlがトップページの場合→website、トップページ以外の場合→article">
<meta property="og:url" content="https://........">
<!-- OGP終わり -->
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
s+tabでsectionとかを一発で出したい時は以下。
スニペット登録しておくと便利なcss
参考: HTML・CSSコーディングでよく使うVScodeスニペット集
css.jsonを開く。
初期値は下記のようにコメントアウトだらけ。
css.json
{
// 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"
// }
}
コメントアウトをまずは全消去。好きなcssスペニットを登録していく。
レスポンシブ用のメディアクエリも登録しておきたい...!!
正直毎回メディアクエリのブレイクポイントって何pxだっけ..と調べてるので、一回登録しておきたい。
とりあえずColisさんのメディアにあったこの記事やこの記事にあった520px/960pxが正解！というのを信じて、スペニットを登録してみる。
最終的にはいろいろ調べてこんな感じに。
css.json
{
//メディアクエリは2021年2月調べで最も有用と思われるブレークポイントで
"basic": {
"prefix": "!",
"body": [
":root {",
" --main-color: $1;\n}\n"
"*, *:before, *:after {",
" margin : 0;"
" padding: 0;"
" -webkit-box-sizing: inherit;"
" box-sizing: inherit;\n}\n",
"html {"
" -webkit-box-sizing: border-box;"
" box-sizing: border-box;"
" overflow-x: hidden;"
"}\n",
"a {"
" text-decoration: none;"
" color: inherit;\n}\n",
"ul {\nlist-style: none;\n}\n"
"/* スマホ */"
"@media screen and (max-width: 519px) { \n\n }",
"/* iPad */"
"@media screen and (max-width: 959px) { \n\n }",
"/* PC */"
"@media screen and (max-width: 1280px) { \n\n }",
]
},
//flexboxを呼び出す
"flexBoxFull": {
"prefix": "fbf",
"body": [
"display: flex;",
"flex-wrap: wrap;",
"align-items: center;",
"justify-content: space-between;"
]
},
//position: absoluteで上下左右中央寄せ
"absoluteCenter": {
"prefix": "aba",
"body": [
"position: absolute;",
"top: 50%;",
"left: 50%;",
"transform: translate(-50%, -50%);",
]
},
//position: absoluteで上下中央寄せ
"absoluteVerticalCenter": {
"prefix": "abv",
"body": [
"position: absolute;",
"top: 50%;",
"left: $1;",
"transform: translateY(-50%);",
]
},
//position: absoluteで左右中央寄せ
"absoluteHorizontalCenter": {
"prefix": "abh",
"body": [
"position: absolute;",
"top: $1;",
"left: 50%;",
"transform: translateX(-50%);",
]
},
//背景
"backGroundUrl": {
"prefix": "bgu",
"body": [
"background: url($1) no-repeat center center/cover;",
]
},
}
}
snipet.css
//メディアクエリは2021年2月調べで最も有用と思われるブレークポイントで
"basic": {
"prefix": "!",
"body": [
":root {",
" --main-color: $1;\n}\n"
"*, *:before, *:after {",
" margin : 0;"
" padding: 0;"
" -webkit-box-sizing: inherit;"
" box-sizing: inherit;\n}\n",
"html {"
" -webkit-box-sizing: border-box;"
" box-sizing: border-box;"
" overflow-x: hidden; /* (横方向)ボックスに収まりきらない部分は非表示に */",
"}\n",
"a {"
" text-decoration: none;"
" color: inherit;\n}\n",
"ul {"
" list-style: none;\n}\n"
"/* スマホ */"
"@media screen and (max-width: 519px) { \n\n }",
"/* iPad */"
"@media screen and (max-width: 959px) { \n\n }",
"/* PC */"
"@media screen and (max-width: 1280px) { \n\n }",
]
},
便利〜！！
htmlのfont-size指定
・デバイス幅320〜599pxまで→font-size:2.667vw
・600px以降→font-size:10px
こう指定して、fontsizeもpaddingもmarginもwidthもremで書くとスマホサイズで崩れなくレスポンシブがかなりやりやすい
参考リンク
・【HTML】metaタグ：『X-UA-Compatible』はよっぽどでなければ設定する必要はないかもしれません
・一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】
.
・【初心者向け】レスポンシブなサイトを作るときに気をつけたい３つのポイント
・はにわまん| VSCodeにコードスニペットを登録して効率的にコーディング！