1. thinkalot

    No comment

    thinkalot
Changes in title
-Emmet / Pug / Stylus / CSS 雑記メモ
+Emmet / Pug / Stylus / CSS / jQuery 雑記メモ
Changes in body
Source | HTML | Preview
@@ -1,308 +1,316 @@
Pug / Emmet / Sass の相性が良く 頻繁に利用するため 同じ記事に纏めました。
# 参考
## Emmet
- Official
- cheetsheet : https://docs.emmet.io/cheat-sheet/
- keybinding : https://docs.emmet.io/actions/
※ Emmet の keybinding(ショートカット) は Editorによって変わり 上記公式どおりにいかないケースが多く 自分でショートカットを見つけるか設定する必要があり 厄介です。
```scss
pd //padding:;
pd1rem //padding: 1rem;
bd:n //border: none;
bdb1 //
jcsb //justify-content: space-between;
pos //position: relative;
posa //position: absolute;
maw //max-width:;
mih //min-height:;
tdn //text-decoration: none;
fx //flex:;
op.9 //opacity: 0.9 ;
tov //text-overflow: ellipsis;
of //overflow: hidden;
lis //list-style:;
list //list-style-type: disc;
z //z-index:;
trsde //transition-delay: time; - 変化開始までの時間
trsdu //transition-duration: time; - 変化開始から終了まで時間
trf //transform:;
trfr //transform: rotate(angle);
```
## Pug
- Official
- [Attributes](https://pugjs.org/language/attributes.html)
- [GitHub - pugjs/pug](https://github.com/pugjs/pug)
- [GitHub - Jade 日本語解説](https://gist.github.com/japboy/5402844)
- Qiita
- [PugでHTMLコーディングを効率化・メリットと使い方を知る](https://tech.qookie.jp/posts/info-pug-feature/) @qrac
- [Pugと仲良くする方法](https://qiita.com/garakuta/items/c83548c74e45838e3fe0) @garakuta
- [Jadeの記法について(あまりまとまっていない)](https://qiita.com/sasaplus1/items/189560f80cf337d40fdf)@sasaplus1
- [Pug(Jade)の基本記法について](https://qiita.com/cotolier_risa/items/135d168eddd6ae6c3409) @cotolier_risa
- [Pug(Jade)の応用記法について](https://qiita.com/cotolier_risa/items/519b9182be8dda61da65#_reference-489b26ab83d6aa5a28b1) @cotolier_risa
- [PUG(was JADE)使い倒しメモ](https://qiita.com/ichimonji_haji/items/4eff56ec19c5cfc61468) @ichimonji_haji
- [Pug(Jade)記法でHTMLのテンプレート的なの](https://qiita.com/soarflat/items/a80bdca813ae83bc9ebc) @soarflat
- [Pugの改行`<br>`のはなし](https://qiita.com/nanarya/items/2beb75c58e42cc0c5915) - @nanarya
- [話題のPugを使ってみた / カルチャーアカデミア広島](https://cultureacademia.jp/webcreate/312/)
# HTML
```:emmet
li*2>a.nav_a[href="#work$"]{Work}
```
```:pug
li: a.nav_a(href="#work1") work
li: a.nav_a(href="#work2") work
```
```html:html
<li><a class="nav_a" href="#work3">Work Ⅰ</a></li>
<li><a class="nav_a" href="#work4">Work Ⅱ</a></li>
```
# Pug
### インラインタグ
```html:html出力結果
<p><b>HTML形式タグ</b>をテキスト内に入力</p>
```
#### 1. HTML形式タグをテキスト内に入力
```:pug
p <b>HTML形式タグ</b>をテキスト内に直接入力
```
#### 2. インターポレーション #[] で囲う
```:pug
p #[b HTML形式タグ]をテキスト内に直接入力
```
#### 3. パイプライン | を使って改行する
```:pug
p
b HTML形式タグ
| をテキスト内に直接入力
```
### コメント
#### HTML出力(コンパイル)する
```:pug
// ハイフン(-)なしコメントアウトはコンパイルされる<br>
インデントネスト箇所も自動的にコメントアウトされる
```
```html:html
<!-- ハイフン(-)なしコメントアウトはコンパイルされる。インデントネスト箇所も自動的にコメントアウトされる。 -->
```
#### HTML出力(コンパイル)しない
```:pug
//- ハイフン(-)付きコメントアウトはコンパイルされない
```
```html:htmlに出力されない
```
※ Pugは1行全てがコメントアウトされる。文末にコメントを残せない。
### テキスト化
#### タグ直後に . ドット。下層インデントを | なしで
```pug:pug
p.
Pug is a terse and simple templating language
```
```html:html
<p>Pug is a terse and simple templating language</p>
```
### 変数
- var 変数名 = "値" で定義
**#{変数名}** で利用
```pug:pug
- var day = "水曜"
p 今日は#{day}です
```
```html:html
<p>今日は水曜です</p>
```
### Mixin
Mixins – Pug
https://pugjs.org/language/mixins.html
#### Mixin 1 - 単純なタグ/テキスト代入
```
mixin list
ul
li foo
li bar
+list
+list
```
```html:html
<ul>
<li>foo</li>
<li>bar</li>
</ul>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
```
#### Mixin 2 - タグ直後に = で 引数をテキスト化
※ pet と = の間にスペース無し。スペース入れると = から後ろがテキスト化してしまう。
```pug:pug
mixin pet(name)
li.pet= name
ul
+pet('cat')
+pet('dog')
```
```html:html
<ul>
<li class="pet">cat</li>
<li class="pet">dog</li>
</ul>
```
#### Mixin 3 - Block
mixin block = 下層コンテンツ
```:pug
mixin article(title)
.article
h1= title
if block
block
else
p No block text
//blockが無い場合
+article('No Block')
//blockがある場合
+article('Yes Block')
p This is my
p Yes block text
```
```html:html
<!--blockが無い場合-->
<div class="article">
<h1>No Block</h1>
<p>No block text</p>
</div>
<!--blockがある場合-->
<div class="article">
<h1>Yes Block</h1>
<p>This is my</p>
<p>Yes block text</p>
</div>
```
#### Mixin 4 -
```:pug
mixin article(title='Default Title')
.article
h1= title
+article()
+article('Hello world')
```
```
<div class="article">
<h1>Default Title</h1>
</div>
<div class="article">
<h1>Hello world</h1>
</div>
```
<br><br>
# CSS
## テキスト折返し関連
```scss
//改行しない
white-space: nowrap;
//単語単位で改行
white-space: normal;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;
word-break: normal;
word-break: keep-all;
overflow-wrap: normal;
overflow-wrap: anywhere;
//改行
word-break: break-all;
word-break: break-word;
overflow-wrap: break-word;
```
## ::before / ::after によるアイコン挿入テンプレ
```css:css
&::before{
display: inline-block;
content: "";
background: url("/jreast-shinkansen-reservation/ja/reserve/img/select_ticket_pass/checkmark.png") no-repeat;
width: 1rem;
height: 1rem;
background-size: contain;
vertical-align: middle;
}
```
# Stylus
## 変数は : ではなく =
CSSやSassと互換性がある Stylus だが
変数表記は違うので完全互換ではない点に注意
: ではなく **=** で代入
```:stylus
margin_bottom = 10px
$margin_bottom = 10px
```
## 参考
- [Stylus入門したときのまとめ](https://qiita.com/morishitter/items/b9a2d78c79c3c07de776)
- [Stylus入門](https://qiita.com/kubotak/items/18abd6eba7e3daaba054)
+
+# jQuery
+
+- [jQueryでリストなどに連番でIDやクラスを追加(ナンバリング)する方法 2011/05/17](http://black-flag.net/jquery/20110517-3051.html)
+- [JS(jQuery)でidを付与して、0からはじまる連番をつけてみた 2018/09](http://creatornote.nakweb.com/js%EF%BC%88jquery%EF%BC%89%E3%81%A7id%E3%82%92%E4%BB%98%E4%B8%8E%E3%81%97%E3%81%A6%E3%80%810%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%81%BE%E3%82%8B%E9%80%A3%E7%95%AA%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6/)
+
+<br><br>
+