覚えたこと
最近覚えたことを書きます
メモ書きです。
ショートカットキー
Ctrl + Shift + d
→選択範囲を下にコピー（※CaretModの場合）
※WindowsやMacではCtrl + Shift + ↓/Comand+ Shift + ↓
Ctrl + Shift + /
→コメントアウト
Emmet(HTML)
Emmetの基本
<></>はTabで自動で作れる
例：<h1></h1>を作りたい場合はh1と入力してTabキーを押下
以下操作もTabキーを入力で生成できます
ul,li（リストの楽な作り方）
ul>li*4
でliが４つのリストが作れる
htmlの基本構造を一瞬で生成
html:5
⇛上記入力しTab押下で下記が生成される。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
</body>
</html>
Emmet(CSS)
background-color
bgc
vertical-align
要素を下揃えにしたい場合はvertical-align:bottom
paddingとmargin
m14-12-14-24 → margin: 14px 12px 14px 24px;
p14-12-14-24 → padding:14px 12px 14px 24px;
複数入力したいときは数字をハイフンでつなぐ
その他（HTML）
classは一つの要素に複数つけられる
なんか最初に教わった気もするけど、<li class=”h-list active”>
って２つ指定することも可能
その他（CSS）
first-letter（疑似要素）
.m-h2::first-letter{
border-left:3px solid #879DEC;
padding-left: 16px;
}
上記は、m-h2（mainの見出し2）の頭文字に対して指示をしている。
見出しの横に水色の縦線を引くことができる
継承できるプロパティの例
color,fonr-size,font-style,letter-spacing,line-height,text-align
コメントを残す