====== JSFiddle - Code Playground ====== {{:javascript:jsfiddle-logo.png?200|JSFiddle Logo}}\\ [[https://commons.m.wikimedia.org/wiki/File:Jsfiddle-logo.png|File:Jsfiddle-logo.png - Wikimedia Commons]] より\\ 本家: [[https://jsfiddle.net/|JSFiddle - Code Playground]]\\ ドキュメント: [[https://docs.jsfiddle.net/|JSFiddle Docs & Help - JSFiddle Docs]]\\ ===== Web ページへの埋め込み ===== ==== 埋め込み URL の形式 ==== ==== ====
参考: [[sof>questions/43751317/how-do-you-embed-a-jsfiddle-as-an-iframe-in-html-only|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)** のタブ順\\ **JavaScriptt | HTML | Resul** のみのタブ表示\\ 参照: [[https://docs.jsfiddle.net/external-resources|External resources - JSFiddle Docs]]\\ 　[[https://docs.jsfiddle.net/embedding-fiddles#changing-tabs-order|Changing tabs order - Embedding fiddles - JSFiddle Docs|]]\\ ==== ライト/ダーク アピアランスの設定 ==== ライト アピアランス (URL の light/ は省略できる)\\ ダーク アピアランス (URL に dark/ を付け加える)\\ ==== ベースとして設定 (Set as base) ==== fiddle を更新していくと version 管理されているが、そのバージョンをベースとして設定すると URL にバージョン(****)を指定しない限りはデフォルトでベースを参照するようになる。\\ ベースバージョンを表示\\ バージョン 35 を表示 (バージョン 35 をベースにしたい場合はバージョン 35 の URL にアクセスして **[ベースとして設定] (Set as base)** をクリックする)\\ バージョン 10 を表示\\ 参照: [[https://docs.jsfiddle.net/getting-started#setting-fiddle-as-base-version|Setting fiddle as Base Version - Getting started - JSFiddle Docs]]\\ ===== レスポンシブ対応 ===== JSFiddle の埋め込みは表示幅が足りないと崩れる😅\\ スマホでは特に表示幅が足りないから崩れる😇\\ **JavaScript | HTML | CSS | JavaScript | Result | Resources (External resources)** のタブをすべて表示すると折り返して CSS | Result | Resources がコードに被って台無しに…😱😇\\ JSFiddle の [**< > Embed**] が生成する標準的なスニペットの例で、画面表示幅が 340px のスマホなどの場合...🤔\\ JSFiddle のタブをすべて表示した状態でも、折り返してコードに被らない為には、最低でも表示幅が 480px は必要です🤔\\ JSFiddle の標準的なスニペットが崩れないように対処する方法は、iframe タグに CSS で min-width: 490px; 指定して、overflow-x: scroll; を指定した div タグで iframe をラップしてスクロール可能にします🤤\\
同じコードのままで表示幅いっぱいにも対応できますが、今度はスクロールバーが邪魔です😭\\

Screen Resolution: pixel
Browser Resolution: pixel

===== パラメータ ===== ===== 参考文献 ===== [[https://codysaylor.com/notes/comparing-codepen-jsfiddle-cssdeck-liveweave-jsbin-dabblet/|Comparing Codepen, JSFiddle, JSBin, Glitch, Plunkr, CSSDeck, Liveweave, Dabblet | Cody Saylor]]\\