IT

「jsFiddle」は登録なし!コード動作確認が簡単!埋め込みも可

jsFiddle

自分のサイトを持っていて、いろいろいじっているうちにだんだん既存で用意してある色や線だけでは物足りなくなったりしませんか。

そして、他のサイトを見て

  • あれはどうやるんだろう
  • このデザインを自分のサイトにも使いたいなぁ
  • 線の太さを変えたいけど、見た目はどうなるかな?

など思うことがあるかと思います。

でも、自分のサイトにHTMLやCSS、jQueryなどのコードを書いてとなると、ローカル環境上でFFFTPなどのアップロードソフトを用意したり、今多くの人が利用しているワードプレス(WP)も外観、テーマの編集で追記したらエラーで動かなくなった!などいろいろ大変かと思います。

そこで紹介したいのが「jsFiddle」というサイトです。
アカウントを作ったりする登録など一切なく誰でも利用できるというものです。

例えば、

この水色背景に白文字の文字色を変えて雰囲気を確かめたい

とすると、変更したい場合など普段みなさんはどうしてますか?
それでは「jsFiddle」の使い方を簡単ではありますが紹介していきたいと思います。

いろいろ使える機能はありますが、このページではHTMLとCSSを使用した例をご紹介します。

はじめに

STEP.1)公式サイト「jsFiddle」を開く
jsFiddle初期画面

みゆ
みゆ

細かい事がわからなくても大丈夫です。ただ「黒い画面が出たなぁ」と思う程度で構いません。

STEP.2)左上にある青いメニューの中から「Empty」を押す
jsFiddleのemptyを押すと

例えば「jQuery」のボタンを押すと、用意されているコードが自動で記述されます。
jQueryを押すと現れる画面
jsFiddleのjqueryを押すと
みゆ
みゆ

違うコードを選択したい場合は左上にあるjsFiddleのロゴマーク(雲みたいなもの)を押すと最初の画面に出てきたものが現れます。

HTMLとCSSを記述する

今回使用するものは、上の例で紹介をした水色背景に白文字です。

HTML


<div class="example">
<p>この水色背景に白文字の・・・</p>
</div>

CSS


.example {
background-color: #42acdd;
}

.example p {
color: #fff;
padding: 10px;
}

STEP.3)HTMLとCSSを記述し「Run」を押す
jsFiddle、Runを押す

みゆ
みゆ

「Run」を押すと右下に結果が現れます。これを見ながらいろいろ試してみてください。

表示結果を保存する

STEP.4)「Save」を押してサイトに一回保存します。
jsFiddle、Saveする

一番最初は「Save」ですが、2回目からは「Update」という名前に変わります。同じ動作をしてくれますが、ただ名前が変わっただけです。
2回目以降の「Update」画像
jsFiddle、Updateになる

STEP.5)「Embed」で埋め込み用のタグを出す
jsFiddle、Embedを押す

タグを保存する

STEP.6)「Embed snippet:」に表示されたものをコピーする

1の「Embed」を押してでてきたタグをそのまま使用するとこうなります。
そのままタグを埋め込むとこうなります

もちろんこのままでも使用可能ですが、JavaScriptが最初に表示されるなどして使い勝手が悪い場合があるので、次に紹介するやり方で進めます。

1の「Embed」を押した後に2の「Prefer iframe?」を押すと、同じ箇所に下の画像が現れると思います。このタグをコピーしておいてください。
jsFiddle、埋め込みタグ

コードを埋め込む

STEP.7)表示したいところに先ほどのコードをペーストする

shock画像
ビックリ子

あれっ?何も表示されてないけど、どうして?

みゆ
みゆ

そうなんです!「Prefer iframe?」をコピペしただけでは上のような表示になるんです。JavaScriptを最初に表示させたい場合はいいのですが、表示順やサイズも変更できたら便利ですよね!

「jsFiddle」で作成したものをそのまま使用するのであればこれで終了ですが、引き続きカスタマイズのやり方を紹介するので、興味がある方は引き続き見ていってください。

カスタマイズする

既存のいいところは、コピーするだけで簡単に使えるというところですが、自分のページに必ず合うというわけではないですよね。
そこで、ここからは表示順やサイズもカスタマイズするやり方を紹介します。

「変更前」が先ほどコピーしたものです。

変更前


<iframe width="100%" height="300" src="//jsfiddle.net/unw28653/1/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

変更後


<iframe width="100%" height="140" src="//jsfiddle.net/unw28653/1/embedded/result,html,css/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>

わかりやすく黄色のマーカーを引きましたが、/embedded/の後ろを主に変更しています。
他にも、今回は

  • JavaScriptを削除
  • 表示順を、結果、html、CSSに変更
  • 高さ(既存height=”300″)を140に変更

などしています。
カスタマイズした変更後のものを表示すると下のようになります。

HTMLやCSSから表示したい場合は、result,html,cssの順番を変更するだけでできます。

最後に

簡単に個人のブログサイトを作れたり、昔は業者に依頼して作ってもらっていたオンラインショッピングサイト(ECサイト)も自分で作れたりするサービスがたくさんありますよね。
そんなサービスをフル活用しつつ、プラスα(アルファ)で自分好みのサイトに仕上げられるツールの一つが「jsFiddle」だと思います。

操作も埋め込みもとても簡単なので、ぜひ試しに使ってみてください。

ピックアップ記事

  1. 不労所得?chatGPTに負けない!2年以上ほったらかしブログが毎日お金を生んで…

関連記事

  1. 収益1,000円達成でGoogle AdSenseからPINコードが郵送される

    IT

    収益1,000円達成でGoogle AdSenseからPINコードが郵送される!

    Google AdSense(以下、アドセンス)からPINコー…

  2. マルウェア?突然パソコンがスキャンされる

    IT

    ウイルス感染?PC画面上で突然スキャン開始!トロイの木馬?マルウェア?これは詐欺です!

    普通にパソコンを使っていただけでした。私のブログの中で…

  3. CSSで作る!コピペOK<吹き出しデザイン>

    IT

    CSSで作る!コピペOK<吹き出しデザイン>

    CSSだけで作れる「吹き出し」をご紹介します!会話風のものやワ…

  4. 算定基礎届(総括表)だけは郵送で!

    IT

    算定基礎届(総括表)だけは郵送らしい!GビズIDで電子申請したけどこれって・・・

    行政の提出書類はとても複雑で大変だと思うのは私だけでしょうか。…

  5. PCビープ音4回はホコリが原因

    IT

    ビープ音4回はホコリが原因?DellデスクトップPCの異常は掃除で復活!

    電子機器は突然故障したり終わりを告げる事が多いですよね・・・。…

  6. カスタムフィールドテンプレートのエラー

    IT

    WordPress Custom Field Templateエラーはtype=radioが原因?P…

    このブログもワードプレスを利用して作られていますが、カスタムフ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

おすすめ記事

  1. ロッテサクサク会員登録
  2. 横浜防災フェア2019海上保安資料館横浜館にある北朝鮮工作船
  3. 【抽選販売申し込み】Nintendo Switch あつまれ どうぶつの森セット!2020年7月2日~3日
  4. 東京ディズニーランドの鳥が人に慣れすぎてる
  5. おやつカンパニーxトミカ2

最近の記事

  1. 小学館の図鑑NEOシリーズを買ったらいい事たくさんあった
  2. 日本発「クリーミーマヨネーズ味」アイス?賛否分かれる味・・・…
  3. 【イオンキッズパブリック】Nintendo Switch抽選…
  4. 【東京モーターショー2019】幼児がいるなら目的決めて行こう…
  5. 銭形砂絵 「寛永通宝」を見て金運アップ!香川県観音寺市
  1. 雪見だいふくイベント

    グルメ

    「ふく」が大きい雪見だいふく無料配布イベント!「ふく」と「福」をゲット☆
  2. エステのチラシは隅々まで読んで

    お金と仕事

    脱毛に限らずエステ系のチラシは隅々まで読んでから来店しよう!
  3. akippa (あきっぱ)

    その他

    赤レンガ倉庫のイベントはakippa (あきっぱ)で事前に駐車場予約!満車の心配…
  4. 朝霞の森秋祭り【埼玉】

    グルメ

    【埼玉県】朝霞の森秋まつりで自然を感じよう♪
  5. リュウソウジャー最強竜装セットが2,400円だった

    お金と仕事

    今がリュウソウジャー最強竜装セットの底値?購入は放送終了1か月前がお買い得!
PAGE TOP