1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CodePen基礎

Posted at

CodePenを初めて使用して日にちが開いてしまったのでWebアプリ作成するために1つ1つ確認していくためのメモ。

##エディター画面
HTML,CSS,JSの3つにわかれており、プログラム記載後すぐにしたのエリアに反映される。
image.png

左下のConsoleボタンを押すことでログをを確認することができる。
いきなり結果が反映されなくなったり、ボタンを押しても思い通りに反映されないときはここをチェック!

##Fork
CodePen内で公開されているプログラムを持ってくる機能。
公開されているプログラムを開いた際そのままでも編集すことができるが要注意。
編集したものはForkの機能を実行してからではないと保存できないので気を付ける必要有
そもそもの話だがエディター上のバーにSaveボタンが表示されない。
※Fork前
image.png

※Fork後
image.png

Forkボタンは右下にある。

##JSライブラリの追加
JSライブラリの追加方法として直接プログラムに書かない方法がある。
まず各種右上にある設定ボタン(歯車のボタン)を押す。
Pen SettingsからJSタブに遷移し、2つ目の項目がJSライブラリになる。
image.png

##JSライブラリの取得方法
jsdelivrよりライブラリを検索する。
選択したライブラリの圧縮を意味するminが記載されたHTMLURL(画像間違え注意)をコピーし先ほどの場所に追加する。
image.png

##CSSフレームワークの追加
同じような手順でCSSのフレームワークを追加することができる。
JSライブラリ同様、Pen SettingsからCSSタブに遷移。
4つ目の項目がフレームワークになる。
image.png

CSSの取得方法もJSと同様。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?