はじめに

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

See the Pen
napalm_stretch by am10 (@am102)
on CodePen.

おわり

これだけだと怒られそうなのでQiitaでよく見る上のHTML,CSS,JSのコードを埋め込んだCodePenについて書いときます。（前からあれどうやるんだろ？って思ってました。）

CodePenの使い方

アカウント作成

下記のサイトでアカウントを作成します。

CodePen(https://codepen.io/)

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を入力する
   
   
   
   
   


3. Settingsを開きJavaScriptタブを選択しjqueryのURLを入力する(jqueryを利用する場合のみ)
   
   
   
   
   


4. Save&CloseをクリックしSettingsを閉じる(jqueryを利用する場合のみ)


5. 左上のtitleをクリックしタイトルを入力する


6. Saveをクリックし保存する

他のWebページに載せる

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

1. 作成したPenのページの右下のEmbedをクリックする


2. 右下のHTML (recommended)タブをクリックする


3. Copy & Paste Codeの内容をコピーして載せたいページに貼り付ける
   
   data-height="265"の部分を変更すると表示する高さが変更できます。

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

おまけ

1200万パワーのCSS!!

See the Pen
1200 by am10 (@am102)
on CodePen.

さいごに

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

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

成果物

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


• 1200万パワーのCSS