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. 種類いろいろ!CSSのborder(線)の使い方

    IT

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

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

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

    IT

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

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

  3. GビズIDを取得して行政手続きを電子申請でやってみよう

    IT

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

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

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

    IT

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

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

  5. 算定基礎届と賞与支払届をGビズIDを使って電子申請

    IT

    年金機構の社会保険関係手続き「算定基礎届と賞与支払届」をGビズIDを使って電子申請してみよう

    日本年金機構のホームページには詳しく情報が紹介されていると思い…

  6. 確定申告e-taxの推奨ブラウザはInternet Explorer

    IT

    【確定申告】e-Tax利用時のブラウザはInternet Explorer!Microsoft Ed…

    確定申告をしなければいけない方にとって、この一か月は忙しい期間…

コメント

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

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

おすすめ記事

  1. 確定申告e-taxの推奨ブラウザはInternet Explorer
  2. 無料クレーンゲームのあるスーパー
  3. 自作パソコン
  4. GW激込み!ふなばしアンデルセン公園
  5. カスタムフィールドテンプレートのエラー

最近の記事

  1. ウイルス感染?PC画面上で突然スキャン開始!トロイの木馬?マ…
  2. GWの激混み「ふなばしアンデルセン公園」レポ!駐車場・アスレ…
  3. 突然耳に激痛が!夜中に4歳息子が泣き叫んだ理由は「中耳炎」で…
  4. 子供の擦り傷・切り傷の味方!ケガをした時はゲンタシン軟膏を塗…
  5. 明星チャルメラxトミカ!「くろネコカーおかたづけセット」プレ…
  1. おやつカンパニーxトミカ2

    グルメ

    おやつカンパニーxトミカ!食べて当てようトミカキャンペーン2 2スピードでコント…
  2. 算定基礎届と賞与支払届をGビズIDを使って電子申請

    IT

    年金機構の社会保険関係手続き「算定基礎届と賞与支払届」をGビズIDを使って電子申…
  3. 【抽選販売申し込み】Nintendo Switch あつまれ どうぶつの森セット

    遊び

    【マイニンテンドーストア】Nintendo Switch あつまれ どうぶつの森…
  4. akippa (あきっぱ)

    その他

    赤レンガ倉庫のイベントはakippa (あきっぱ)で事前に駐車場予約!満車の心配…
  5. 東京ディズニーランドの鳥が人に慣れすぎてる

    グルメ

    東京ディズニーランドにいた鳥が人に慣れすぎてる!
PAGE TOP