差分

このページの2つのバージョン間の差分を表示します。

--- javascript:jsfiddle [2022/09/17 04:04] – [レスポンシブ対応] ともやん
+++ javascript:jsfiddle [2024/09/03 18:09] (現在) – [ベースとして設定 (Set as base)] ともやん
@@ 行 76: / 行 76: @@
 ==== ライト/ダーク アピアランスの設定 ====
-<WRAP mincode>
 ライト アピアランス (URL の <html><code>light/</code></html> は省略できる)\\
-<code javascript>
+<WRAP mincode><code javascript>
 <script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/js,html,css,result,resources/light/"></script>
-</code>
+</code></WRAP>
 <WRAP jsfiddle><html>
 <iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/light/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
@@ 行 86: / 行 86: @@
 ダーク アピアランス (URL に <html><code>dark/</code></html> を付け加える)\\
-<code javascript>
+<WRAP mincode><code javascript>
 <script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/js,html,css,result,resources/dark/"></script>
-</code>
+</code></WRAP>
 <WRAP jsfiddle><html>
 <iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 </html></WRAP>
-</WRAP>
 ==== ベースとして設定 (Set as base) ====
 fiddle を更新していくと version 管理されているが、そのバージョンをベースとして設定すると URL にバージョン(**<version number>**)を指定しない限りはデフォルトでベースを参照するようになる。\\
-<WRAP mincode>
+<WRAP mincode><code javascript>
-<code javascript>
 <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>
-</code>
+</code></WRAP>
-</WRAP>
-<WRAP mincode>
 ベースバージョンを表示\\
-<code html>
+<WRAP mincode><code html>
 <script async src="//jsfiddle.net/tomoyan596/af54jpzy/embed/result,html,js,resources/"></script>
-</code>
+</code></WRAP>
 <WRAP jsfiddle><html>
 <iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/result,html,js,resources/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
@@ 行 112: / 行 109: @@
 バージョン 35 を表示 (バージョン 35 をベースにしたい場合はバージョン 35 の URL にアクセスして **[ベースとして設定] (Set as base)** をクリックする)\\
-<code html>
+<WRAP mincode><code html>
 <script async src="//jsfiddle.net/tomoyan596/af54jpzy/35/embed/result,html,js,resources/"></script>
-</code>
+</code></WRAP>
 <WRAP jsfiddle><html>
 <iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/35/embedded/result,html,js,resources/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
@@ 行 120: / 行 117: @@
 バージョン 10 を表示\\
-<code html>
+<WRAP mincode><code html>
 <script async src="//jsfiddle.net/tomoyan596/af54jpzy/10/embed/result,html,js,resources/"></script>
-</code>
+</code></WRAP>
 <WRAP jsfiddle><html>
 <iframe width="100%" height="400" src="//jsfiddle.net/tomoyan596/af54jpzy/10/embedded/result,html,js,resources/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 </html></WRAP>
-</WRAP>
 参照: [[https://docs.jsfiddle.net/getting-started#setting-fiddle-as-base-version|Setting fiddle as Base Version - Getting started - JSFiddle Docs]]\\
@@ 行 148: / 行 144: @@
   }
   .jsfiddle_frame {
-    transform: scale(1.015);
+    transform: scale(1.014);
     transform-origin: top left;
   }
-  .wrap_smart-device p:empty,
+  .wrap_iframe_trim {
+    width: 97%;
+    overflow: hidden;
+  }
+  /*.wrap_smart-device p:empty,
   .wrap_smart-device p:blank {
     padding: 0;
-  }
+  }*/
 </style>
 </html>
@@ 行 216: / 行 216: @@
 同じコードのままで表示幅いっぱいにも対応できますが、今度はスクロールバーが邪魔です😭\\
+<WRAP iframe_trim>
 <WRAP iframe_min-width1><html>
 <iframe class="jsfiddle_frame" width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 </html></WRAP>
+</WRAP>
 <html>
@@ 行 231: / 行 233: @@
     overflow-x: scroll;
   }
-  @media (min-width: 425px) { /* >= 425px */
+  @media (min-width: 433px) { /* >= 425px -> 433px */
   .wrap_iframe_min-width2 {
     overflow-x: hidden;
@@ 行 265: / 行 267: @@
 </WRAP>
+<WRAP iframe_trim>
 <WRAP iframe_min-width2><html>
 <iframe class="jsfiddle_frame" width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 </html></WRAP>
+</WRAP>
+===== パラメータ =====
+<html>
+<iframe id="jsfiddle001" class="jsfiddle_frame" width="100%" height="300" src="//jsfiddle.net/tomoyan596/4vw7e2j5/embedded/result,js,html,css,resources/dark/?param1=value1&param2=value2" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<script>
+  let iframe = document.getElementById("jsfiddle001");
+  iframe.contentWindow.hoge = "受け渡す値";
+  window.hoge = "受け渡す値";
+</script>
+</html>
 ===== 参考文献 =====
 [[https://codysaylor.com/notes/comparing-codepen-jsfiddle-cssdeck-liveweave-jsbin-dabblet/|Comparing Codepen, JSFiddle, JSBin, Glitch, Plunkr, CSSDeck, Liveweave, Dabblet | Cody Saylor]]\\