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. PCビープ音4回はホコリが原因

    IT

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

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

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

    IT

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

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

  3. ワードプレスの自動入力候補(履歴)を削除する方法

    IT

    Google Chromeでワードプレスの自動入力候補(履歴)を削除する簡単な方法

    まずみなさんはパソコンのブラウザ何をお使いですか?代表…

  4. マウスホイールで画像の拡大縮小をしたい!Windows10のフォト初期設定は次の画像になる件

    IT

    マウスホイールで画像の拡大縮小をしたい!Windows10のフォト初期設定は次の画像になる件

    windows10にして何枚かの画像を見る時にマウスホイールを…

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

    IT

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

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

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

    IT

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

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

コメント

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

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

おすすめ記事

  1. 学研ニューブロックの紹介
  2. 4歳児夜中に突然中耳炎
  3. 確定申告e-taxの推奨ブラウザはInternet Explorer
  4. 【抽選販売申し込み】Nintendo Switch あつまれ どうぶつの森セット!2020年7月2日~3日
  5. 香川県でネット・ゲーム依存症対策条例が可決

最近の記事

  1. WordPress Custom Field Templat…
  2. 仮面ライダーゼロワンのまくらが気持ちいい!
  3. マイナポイントは電子マネーWAONがおすすめ!普段よく使うお…
  4. おやつカンパニーxトミカ!食べて当てようトミカキャンペーン2…
  5. 突然耳に激痛が!夜中に4歳息子が泣き叫んだ理由は「中耳炎」で…
  1. 自作パソコン

    IT

    初めての自作デスクトップパソコン!画像を使って各パーツの役目と使用パーツ紹介Pa…
  2. 長岡花火ツアー会社一覧

    遊び

    長岡花火はツアーで行こう!乗ってるだけでもう会場?ツアー会社一覧
  3. アパホテル&リゾート<横浜ベイタワー>無料試泊会

    その他

    アパホテル&リゾート<横浜ベイタワー>無料試泊会は見事に落選!
  4. 仮面ライダーゼロワンクリスマスケーキ

    グルメ

    アイテム付き仮面ライダーゼロワンケーキで子ども大興奮!高いけどいい思い出になりそ…
  5. カスタムフィールドテンプレートのエラー

    IT

    WordPress Custom Field Templateエラーはtype=…
PAGE TOP