何度も同じコードを書きそうなので、よく使うコードの備忘録
ベースのHTMLマークアップ
vscodeのユーザースぺニットに登録しちゃう。
<!DOCTYPE html>
<html lang="ja">
<head prefix="og:http://ogp.me/ns# fb:http://ogp.me/ns/fb# website:http://ogp.me/ns/website#">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="PageDescription">
<meta name="keywords" content="Keywords">
<meta property="og:url" content="PageURL" />
<meta property="og:type" content="website" />
<meta property="og:title" content="PageTitle" />
<meta property="og:description" content="PageDescription" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content="PageLogo" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@UserID" />
<script src="https://kit.fontawesome.com/xxxxx.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="scss/reset.css">
<link rel="stylesheet" href="scss/style.css">
<title>Document</title>
</head>
<body>
<div id="page">
<header>
<div class="container">
<div>ヘッダー</div>
</div>
</header>
<div id="main">
<div class="container">
<div id="wrapper">
<main>メインコンテンツ</main>
<aside>サイドバー</aside>
</div>
</div>
</div>
<footer>
<div class="container">
<div>フッター</div>
</div>
</footer>
</div>
</body>
</html>html.json に登録する内容。これで！で呼び出せる。
{
"html5": {
"prefix": "!",
"body": "<!DOCTYPE html>\n<html lang=\"ja\">\n<head prefix=\"og:http://ogp.me/ns# fb:http://ogp.me/ns/fb# website:http://ogp.me/ns/website#\">\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta name=\"description\" content=\"PageDescription\">\n <meta name=\"keywords\" content=\"Keywords\">\n <meta property=\"og:url\" content=\"PageURL\" />\n <meta property=\"og:type\" content=\"website\" />\n <meta property=\"og:title\" content=\"PageTitle\" />\n <meta property=\"og:description\" content=\"PageDescription\" />\n <meta property=\"og:site_name\" content=\"サイト名\" />\n <meta property=\"og:image\" content=\"PageLogo\" />\n <meta name=\"twitter:card\" content=\"summary\" />\n <meta name=\"twitter:site\" content=\"@UserID\" />\n\n <title>Title</title>\n\n <script src=\"https://kit.fontawesome.com/xxxxx.js\" crossorigin=\"anonymous\"></script>\n\n <link rel=\"stylesheet\" href=\"scss/reset.css\">\n <link rel=\"stylesheet\" href=\"scss/style.css\">\n\n</head>\n\n<body>\n <div id=\"page\">\n <header>\n <div class=\"container\">\n <div>ヘッダー</div>\n </div>\n </header>\n <div id=\"main\">\n <div class=\"container\">\n <div id=\"wrapper\">\n <main>メインコンテンツ</main>\n <aside>サイドバー</aside>\n </div>\n </div>\n </div>\n <footer>\n <div class=\"container\">\n <div>フッター</div>\n </div>\n </footer>\n </div>\n</body>\n</html>"
}
}ベースに使うStyle
reset.css
*,*::before,*::after{
box-sizing:border-box;
}
*{
margin:0;
}
html,body{
height:100%;
}
body{
line-height:1.5;
-webkit-font-smoothing:antialiased;
}
img,picture,video,canvas,svg{
display:block;
max-width:100%;
}
input,button,select{
font:inherit;
}
textarea{
font:inherit;
white-space:revert;
}
::placeholder{
color:unset;
}
a,button{
cursor:revert;
}
ol,ul,menu{
list-style:none;
}
table{
border-collapse:collapse;
}
p,h1,h2,h3,h4,h5,h6{
overflow-wrap:break-word;
}
#root,#__next{
isolation:isolate;
}style.css
html {
font-size: 62.5%;
}
body {
margin: 0;
padding: 0;
font-family:
"Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
font-size: 1.6rem;
}
#page {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header {
background-color: aquamarine;
height: 100px;
}
#main {
flex: 1;
}
#wrapper {
display: flex;
flex-wrap: wrap;
}
main {
background-color: burlywood;
min-height: calc(100vh - 200px);
flex: 1;
}
aside {
background-color: cadetblue;
width: 300px;
}
footer {
background-color: blueviolet;
height: 100px;
}