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. GビズIDを取得して行政手続きを電子申請でやってみよう

    IT

    家にいながら行政手続き!GビズIDを取得してみよう!今から始める電子申請

    毎年5・6・7月になると固定資産税や自動車税、住民税に法人税な…

  2. Windows10の標準機能で画面録画

    IT

    無料で使える画面録画!Windows10の標準機能でキャプチャもOK!(スクリーンショット)

    特別なソフトを買うことなくパソコンの画面を簡単に録画できる方法…

  3. ボックスデザイン

    IT

    CSSで広がる!囲み枠(ボックス)デザイン【コピペ可】

    「CSSでおしゃれな装飾!コピペで見出しをデザインしよう!」や「種…

  4. 年間ビジターアンケートの落とし穴

    IT

    突然現れる「年間ビジターアンケート」は詐欺!ラッキービジターがきたら要注意!

    みなさんは画像のような画面を見たことはありますか?イン…

  5. 種類いろいろ!CSSのborder(線)の使い方

    IT

    種類いろいろ!CSSのborder(線)の使い方

    CSSのborderにはいろいろな種類があります。見出しに使っ…

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

    IT

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

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

コメント

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

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

おすすめ記事

  1. Windows10の標準機能で画面録画
  2. 横浜防災フェア2019海上保安資料館横浜館にある北朝鮮工作船
  3. 小学館図鑑NEOシリーズは特典いっぱい
  4. カスタムフィールドテンプレートのエラー
  5. 亀頭包皮炎(きとうほうひえん)

最近の記事

  1. 日本発「クリーミーマヨネーズ味」アイス?賛否分かれる味・・・…
  2. トイザらス限定!仮面ライダーセイバー&仮面ライダーブレイズ完…
  3. 子ども用水筒は専用水筒ではなくカバーがおすすめ!
  4. マイナポイントは電子マネーWAONがおすすめ!普段よく使うお…
  5. WordPress Custom Field Templat…
  1. 確定申告e-taxの推奨ブラウザはInternet Explorer

    IT

    【確定申告】e-Tax利用時のブラウザはInternet Explorer!Mi…
  2. Altプラスマウスホイールでページが操作できる機能

    IT

    【 Firefox】Alt押しながらマウスホイールでページを送ったり戻したりする…
  3. カスタムフィールドテンプレートのエラー

    IT

    WordPress Custom Field Templateエラーはtype=…
  4. ものもらい

    健康

    目の充血・かゆみ・しこりの原因は「ものもらい(麦粒腫)」でした!
  5. 小学館図鑑NEOシリーズは特典いっぱい

    子育て

    小学館の図鑑NEOシリーズを買ったらいい事たくさんあった
PAGE TOP