codepenでjQueryを使いたい

コードの検証や公開共有などをするのにcodepenが便利で、当ブログでも使用しているのですが、jQueryの扱い方について困ったので記載しておきます。

codepenでのjQueryの使い方

「setting」のjavascriptの項目「Add External Scripts/Pens」で、「jQuery」を選択して追加すると、jQueryが簡単に使用できます。

ただ、jQueryを使用する場合に、おまじない「$(function() {}」で括るのですが、これを記載するとエラーが出ます。中身だけ書かないとダメみたいです。ここで少しハマりました。

See the Pen
jqTest-
by yuming (@yuuuming)
on CodePen.

WEB制作でよく使う便利ツール・ページのメモ

私がWEB制作時に良く参考・使用しているWEBページをまとめます。

デザイン関連

WEB色見本 原色大辞典 – HTMLカラーコード

適当なカラーを選びたいときに重宝しています。

テキスト比較ツール difff《デュフフ》

流し込み用のダミーテキストを作成できます。

wordmark.it

任意の文字列を、使用中のP Cにインストールされているフォントで一覧表示できます。

Placehold.jp

ダミー画像を簡単に作成できます。

コーディング関連

HTMLクイックリファレンス

よくお世話になっています。HTML、CSSであれなんだっけ?と思って検索すると、だいたい出てきます。