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. 算定基礎届(総括表)だけは郵送で!

    IT

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

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

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

    IT

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

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

  3. 自作パソコン

    IT

    初めての自作デスクトップパソコン!画像を使って各パーツの役目と使用パーツ紹介Part1

    大きい買い物をしなければいけない日が来ました!それはデ…

  4. マイナポイントは電子マネーWAONがおすすめ

    IT

    マイナポイントは電子マネーWAONがおすすめ!普段よく使うお店を登録しよう

    私はよくイオンへお買い物に行って、電子マネーWAON払いもしく…

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

    IT

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

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

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

    IT

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

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

コメント

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

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

おすすめ記事

  1. ガンバライジングカード無料配布キャンペーン2020年10月
  2. 令和元年さいたま市総合防災訓練・防災フェア
  3. さくらの山公園は飛行機を間近で見れる絶景スポット
  4. 東京モーターショー2019
  5. トイザらス限定仮面ライダーセイバー&仮面ライダーブレイズ 完全なりきりセット

最近の記事

  1. 年金機構の社会保険関係手続き「算定基礎届と賞与支払届」をGビ…
  2. 種類いろいろ!CSSのborder(線)の使い方
  3. 【確定申告】e-Tax利用時のブラウザはInternet E…
  4. 海上保安資料館横浜館にある北朝鮮工作船の展示が衝撃的すぎ!
  5. おやつカンパニーxトミカ!食べて当てようトミカキャンペーン2…
  1. 新型コロナウィルスで店頭から様々なものが品切れ状態

    その他

    消えた!ティッシュペーパーや生理用品が。新型コロナ「デマ」の怖さ!一人ひとりが冷…
  2. CSSで作る!コピペOK<吹き出しデザイン>

    IT

    CSSで作る!コピペOK<吹き出しデザイン>
  3. 子どもの擦り傷・切り傷にゲンタシン軟膏

    健康

    子供の擦り傷・切り傷の味方!ケガをした時はゲンタシン軟膏を塗ろう!
  4. 横浜防災フェア2019

    遊び

    横浜防災フェア2019@赤レンガ倉庫!はしご車搭乗体験や水難救助訓練・消防艇の放…
  5. エガちゃんねる EGA-CHANNEL

    その他

    【Youtube】江頭2:50のエガちゃんねる!視聴者の一人として応援してます!…
PAGE TOP