Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Web

CodePenの使い方を極めよう

使用ソフト: CodePen  

jqueryでスライダーなど調べた際に、出てくる「CodePen」を
コピー&ペーストをするだけで動くと書いてあるのに動かない時ありませんか?

その時に役に立つ「CodePen」の一部操作を紹介します。

操作方法

See the Pen
by Naga (@ngifmy)
on CodePen.


この画面を見たことがあると思います。
これが「CodePen」と言われるwebブラウザ上で、フロントエンド言語のコーディングができるサービス画面になります。

 

CodePen
青枠で囲まれている「HTML」「CSS」「js(javascript)」をコピーしても動かないことがあります。
これを解決するためのが以下の方法になります。

 

CodePen
青枠の場所をクリックすることで「CodePen」にコードを記載している画面に飛びます。

 

CodePen
クリック後に飛んだサイトが、この画面になります。
注意事項として以下に記載しています。

注意事項
・コード画面の「HTML」「CSS」「js(javascript)」に何も記載しないでください。
 記載してしまうと、書いた内容が反映される場合があります。

・もし記載してしまっても、ポップアップで「保存しますか」と聞かれるとおもいますので
 その際は「いいえ」を選択してページを閉じてください。

 

CodePen
「HTML」「CSS」「js(javascript)」の青枠囲んであるアイコンをクリックすると細かい設定が表示されます。
ここで「CSS」「js(javascript)」のみ確認してください。
「HTML」に設定が入っていることはほぼないと思いますので2つのみ確認で大丈夫です。

 

CodePen
アイコンをクリック後に表示される画面になります。
英語のみですが、確認するべき場所はスクロールした場所にあります。

 

CodePen
今回は何も記載がありませんが、青枠に別のスタイルシートが参照されている場合があります。
複数ある場合は、すべてHTMLにリンクを記載しないと同じようにはなりません。

 

CodePen
次に「js(javascript)」の設定を確認すると、青枠に何か参照しているパスがあると思います。
これが今回の動かない原因になります。
青枠に記載されているパスを自身のHTMLに記載すればうまく動くと思います。

 

最後

動かない場合は、他に原因があると思います。
今回は、解決方法として「CodePen」内にある設定を確認する方法を記載しています。
他の解決方法は、Google先生を使用してください。

 

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Web

    Vegas2で背景画像をスライドショーに(jQueryプラグイン)

    cssで背景画像として設置していた画像をスライドショーにしたい。画面い…

  2. Flexbox(縦並び)

    Web

    Flexboxで縦並びを簡単に!

    以前、ご紹介しました「Flexboxで横並びを簡単に!」…

  3. イラスト

    Web

    JQueryのランダム要素簡単実装

    ○はじめに難しそうですが案外簡単に使えますので、初心者の方向けにざ…

  4. Web

    【実例サンプルあり】簡単に実装できるcssスニペット集

    この記事では、短いコードで実装可能なcssプロパティを紹介して…

  5. Just Code

    Web

    Just Code cssで画像加工

    CSSを使用して、画像を加工するツールを紹介します。オンラインで利…

  6. Web

    無料!30秒で!グーグルマップの色味を変える方法

    グーグルマップの色味はCSSのfilterプロパティを使って簡単に変え…

人気の記事

CodeCamp

おすすめの参考書

PAGE TOP