javascript:jsfiddle

JSFiddle - Code Playground

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

<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?

URLjs,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|

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

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

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

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

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 タグに CSSmin-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

  • javascript/jsfiddle.txt
  • 最終更新: 2022/09/23 22:01
  • by ともやん