HTML/CSSの基本操作(CaretModにも対応)

覚えたこと

最近覚えたことを書きます

メモ書きです。

ショートカットキー

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が4つのリストが作れる

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”>

って2つ指定することも可能

その他(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

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です