javascript:jsfiddle

目次

JSFiddle - Code Playground

JSFiddle Logo
File:Jsfiddle-logo.png - Wikimedia Commons より

本家: JSFiddle - Code Playground
ドキュメント: JSFiddle Docs & Help - JSFiddle Docs

Web ページへの埋め込み

埋め込み URL の形式

<script async src="//jsfiddle.net/<user id>/<fiddle id>/<version number>/[iframe: embedded|script: embed]/[tabs: js,html,css,result,resources]/[Visual: light/|dark/]"></script>

<iframe> タグでの埋め込み

<iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

<script> タグでの埋め込み

<script> タグで埋め込む場合は、<div> でラップして <iframe> の高さを指定する。

<style>
  .embed_jsfiddle iframe {
    height: 400px;
  }
</style>
<div class="embed_jsfiddle">
  <script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/js,html,css,result,resources/dark/"></script>
</div>

参考: How do you embed a JsFiddle as an iFrame in HTML only?

タブの順番および有効/無効の設定

※ URL に js,html,css,result,resources/dark/ を指定する。

Result | HTML | CSS | JavaScript | Resources (External resources) のタブ順

<script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/result,html,css,js,resources/dark/"></script>

JavaScriptt | HTML | Resul のみのタブ表示

<script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/js,html,result/dark/"></script>

参照: External resources - JSFiddle Docs
　Changing tabs order - Embedding fiddles - JSFiddle Docs|

ライト/ダーク アピアランスの設定

ライト アピアランス (URL の light/ は省略できる)

<script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/js,html,css,result,resources/light/"></script>

ダーク アピアランス (URL に dark/ を付け加える)

<script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/js,html,css,result,resources/dark/"></script>

ベースとして設定 (Set as base)

fiddle を更新していくと version 管理されているが、そのバージョンをベースとして設定すると URL にバージョン(<version number>)を指定しない限りはデフォルトでベースを参照するようになる。

<script async src="//jsfiddle.net/<user id>/<fiddle id>/<version number>/[iframe: embedded|script: embed]/[tabs: js,html,css,result,resources]/[Visual: light/|dark/]"></script>

ベースバージョンを表示

<script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/result,html,js,resources/"></script>

バージョン 35 を表示 (バージョン 35 をベースにしたい場合はバージョン 35 の URL にアクセスして [ベースとして設定] (Set as base) をクリックする)

<script async src="//jsfiddle.net/tomoyan596/af54jpzy/35/embed/result,html,js,resources/"></script>

バージョン 10 を表示

<script async src="//jsfiddle.net/tomoyan596/af54jpzy/10/embed/result,html,js,resources/"></script>

参照: Setting fiddle as Base Version - Getting started - JSFiddle Docs

レスポンシブ対応

JSFiddle の埋め込みは表示幅が足りないと崩れる😅
スマホでは特に表示幅が足りないから崩れる😇
JavaScript | HTML | CSS | JavaScript | Result | Resources (External resources) のタブをすべて表示すると折り返して CSS | Result | Resources がコードに被って台無しに…😱😇

JSFiddle の [< > Embed] が生成する標準的なスニペットの例で、画面表示幅が 340px のスマホなどの場合…🤔

<iframe width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

JSFiddle のタブをすべて表示した状態でも、折り返してコードに被らない為には、最低でも表示幅が 480px は必要です🤔

<iframe width="480" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

JSFiddle の標準的なスニペットが崩れないように対処する方法は、iframe タグに CSS で min-width: 490px; 指定して、overflow-x: scroll; を指定した div タグで iframe をラップしてスクロール可能にします🤤

<style>
  .iframe_min-width1 iframe {
    min-width: 490px;
    border: solid 3px;
    border-color: hotpink;
    box-sizing: border-box;
  }
  .iframe_min-width1 {
    overflow-x: scroll;
  }
</style>
<div class="iframe_min-width1">
  <iframe width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</div>

同じコードのままで表示幅いっぱいにも対応できますが、今度はスクロールバーが邪魔です😭

Screen Resolution: pixel
Browser Resolution: pixel

パラメータ

参考文献

Comparing Codepen, JSFiddle, JSBin, Glitch, Plunkr, CSSDeck, Liveweave, Dabblet | Cody Saylor

  • javascript/jsfiddle.txt
  • 最終更新: 2024/09/03 18:09
  • by ともやん