AtomでHTMLをコーディングしていてダミーテキストをさっと埋め込みたいと思いAtomのスニペットを調べました。このサイトが端的にまとまっていました。
実際に今回登録したsnippets.csonが以下です。
## html snippets
'.text.html.basic':
'Lorem ipsum':
'prefix':'Lorem'
'body':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
'html5 template':
'prefix':'html5'
'body':"""
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>${1:title}</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="css/${2:main.css}"/>
</head>
<body>
$3
</body>
</html>
"""
'viewport':
'prefix':'vp'
'body': '<meta name="viewport" content="width=device-width, initial-scale=1">'
## css snippets
'.source.css':
'media Less Than':
'prefix':'mlt'
'body':"""
@media screen and (max-width: ${1:768}px) {
$2
}
"""
'media greater Than':
'prefix':'mgt'
'body':"""
@media screen and (min-width: ${1:480}px) {
$2
}
"""
[使い方]
□HTML
○ダミーテキスト
Atomでコーディング中にダミーテキストをいれたくなったら
lorem
または(Lorem)
と入力しEnterするとダミーテキストが埋め込まれます。
○HTML5テンプレ
html5
でreset.cssの読み込みが済んだ状態のHTMLテンプレートが埋め込まれます。
最初titleにフォーカスあたっていて、タブを押すことでcssファイル名、入力欄とカーソルが移動します。
○meta viewport
vp
スマホ対応をしたサイトに必須となる
<meta name="viewport" content="width=device-width, initial-scale=1">
を埋め込みます
□CSS
minなのかmaxなのかが分かりづらいので以上(gt),以下(lt)に置き換えました。
○メディアクエリ(~以上の幅に適用)
mgt
@media screen and (min-width: 480px) {
}
○メディアクエリ(~以下の幅に適用)
mlt
@media screen and (max-width: 768px) {
}
数字にフォーカスがあたっているので適宜書き換えて使ってください。
スニペット便利ですよね。
記述例を参考にどんどん追記していくとよいと思います。
(参考)
メディアクエリってそもそも何?
コメント