ナパームストレッチのCSS！！

# はじめに
ナパームストレッチのCSSを作ってみました！！ボタンにホバーすると空気抵抗によりAの文字が刻まれます！！

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="am102" data-slug-hash="BaBvzBW" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="napalm_stretch">
  <span>See the Pen <a href="https://codepen.io/am102/pen/BaBvzBW">
  napalm_stretch</a> by am10 (<a href="https://codepen.io/am102">@am102</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

おわり

これだけだと怒られそうなのでQiitaでよく見る上のHTML,CSS,JSのコードを埋め込んだCodePenについて書いときます。（前からあれどうやるんだろ？って思ってました。）
# CodePenの使い方
## アカウント作成
下記のサイトでアカウントを作成します。

CodePen([https://codepen.io/](https://codepen.io/))

<img width="500" alt="1" src="https://user-images.githubusercontent.com/34936885/65373986-ab298500-dcbf-11e9-9b78-6ab1c1fb2147.png">

1. 右上のSign upをクリックする
2. アカウントを連携する(とりあえずTwitter使いました)  
Twitter,GitHub,Facebookのアカウントが使えます。なければEmailでの登録もできます。
3. Make the most of your profileという画面が表示されますがとりあえずSave&ContinueでOK
4. メールが届くのでClick to Verify Emailをクリックする

## Pen作成
アカウントが作成できたらPenを作成します。（多分プロジェクトのことをPenと言います）

1. 左上のPenをクリックする
2. HTML、CSS、JSを入力する  
<img width="500" alt="2" src="https://user-images.githubusercontent.com/34936885/65373995-c4323600-dcbf-11e9-9cf7-d1e5b134c89d.png">
3. Settingsを開きJavaScriptタブを選択しjqueryのURLを入力する(jqueryを利用する場合のみ)  
<img width="300" alt="3" src="https://user-images.githubusercontent.com/34936885/65374012-f04db700-dcbf-11e9-8c90-1bcb4c4c64a8.png">
4. Save&CloseをクリックしSettingsを閉じる(jqueryを利用する場合のみ)
5. 左上のtitleをクリックしタイトルを入力する
6. Saveをクリックし保存する

## 他のWebページに載せる
Penが作成できたら他のWebページに載せてみます。

<img width="500" alt="4" src="https://user-images.githubusercontent.com/34936885/65374025-06f40e00-dcc0-11e9-9c6f-d875495afc68.png">

1. 作成したPenのページの右下のEmbedをクリックする
2. 右下のHTML (recommended)タブをクリックする
3. Copy & Paste Codeの内容をコピーして載せたいページに貼り付ける  
data-height="265"の部分を変更すると表示する高さが変更できます。

注意 Qiitaの投稿のプレビューでは表示されませんでした

# おまけ
1200万パワーのCSS!!

<p class="codepen" data-height="300" data-theme-id="0" data-default-tab="css,result" data-user="am102" data-slug-hash="NWKerGw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="1200">
  <span>See the Pen <a href="https://codepen.io/am102/pen/NWKerGw">
  1200</a> by am10 (<a href="https://codepen.io/am102">@am102</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# さらにおまけ
ナパームコンビネゾンのCSS!!

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="am102" data-slug-hash="mdrZJaX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="napalm_combination">
  <span>See the Pen <a href="https://codepen.io/am102/pen/mdrZJaX">
  napalm_combination</a> by am10 (<a href="https://codepen.io/am102">@am102</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# さいごに
本当はCSSだけで頑張りたかったのですがjqueryに手を出してしまいました...

hover擬似クラスのみでいけんじゃね？と思ってましたが無理でした:disappointed_relieved:

成果物

* [ナパームストレッチのCSS](http://adventam10.html.xdomain.jp/napalm_stretch/napalm_stretch.html)
* [1200万パワーのCSS](http://adventam10.html.xdomain.jp/napalm_stretch/1200/1200.html)