Emmet HTML/CSSを爆速コーディング

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

Web制作に欠かせないツールである「Emmet」というものを、知っていますか?

Emmetとは何か?

Emmetは、主にHTMLやCSSの記述・編集を強力にサポートするテキストエディタ用プラグインです。

Juitaがよく使うEmmetのショートカット展開例をまとめました。
環境はSublimeText3とBracketsを使用しています。TabキーでEmmetを展開。

 

 

html編

ショートカット 概要 展開例
!
または、
html:5
html5の基本構造を展開
<!doctype html>
	<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body></body>
</html>
div.hoge classを付与して展開
<div class="hoge"></div>
div#hoge idを付与して展開
<div id="hoge"></div>
h1+div 兄弟関係の展開
<h1></h1>
<div></div>
p>a 親子関係の展開
<p><a href=""></a></p>
p{テキスト} 要素内テキストを指定して展開
<p>テキスト</p>
p>{テキスト前半}+a{リンク}+{テキスト後半} 兄弟要素のテキストを指定して展開
<p>テキスト前半
<a href="">リンク</a>
テキスト後半</p>
li*3 要素を複数展開
<li></li>
<li></li>
<li></li>
table>(tr>th+td)*3 グループ化して展開
<table>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
</table>
img[src=”image.jpg” alt=”画像”] 属性を指定して展開
<img src="image.jpg" alt="画像">
ul>li.hoge$*3 ナンバリングして展開
<ul>
<li class="hoge1"></li>
<li class="hoge2"></li>
<li class="hoge3"></li>
</ul>

CSS編

ショートカット 展開例
c#fff
color: #fff;
bg#000
background: #000;
bg+
background: #fff url() 0 0 no-repeat;
fz12
font-size: 12px;
m10
margin: 10px;
m10-20-5-30
margin: 10px 20px 5px 30px;
p10
padding: 10px;
w100
width: 100px;
di
display: inline;
dib
display: inline-block;
db
display: block;
bd+
border: 1px solid #000;
posa
position: absolute;
posr
position: relative;
bdrs10
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
bgs
-webkit-background-size: ;
background-size: ;
bxs
-webkit-box-shadow: inset hoff voff blur color;
-moz-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
txs
text-shadow: hoff voff blur #000;
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

格安でホームページ制作致します!

低下なのにSEOもしっかり!

まずは『集客』が一番大切です。格安の低価格でも集客の出来るオリジナルデザインのホームページを制作し、インターネット上の潜在顧客、より良い運営方法、等のご提案も含めてご提供致します。

日本で日本企業に勤めていた経験があるからこそ、日本人に近い感覚、クオリティを提案し続けられます。
スライドショー付き、レスポンシブデザイン可能、ワードプレス導入可能、スマホ対応、モバイルフレンドリー対応致します。


ご質問・ご相談はコチラ

SNSでもご購読できます。

コメントを残す

*

Juita Design, バリ島フリーランス・ホームページ制作事務所(SOHO)