差分

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

--- javascript:jsfiddle [2022/09/17 01:37] – [レスポンシブ対応] ともやん
+++ 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]]\\
@@ 行 135: / 行 131: @@
 <html>
 <style>
-  .wrap_smart-device_width {
+  .wrap_smart-device {
     width: 340px;
     border: solid 3px;
     border-color: lightgreen;
+    box-sizing: border-box;
   }
-  .wrap_smart-device-width p {
+  .wrap_smart-device p.header {
-    margin: 0;
+    padding: 6px;
   }
+  .wrap_smart-device div {
+    padding: 0;
+  }
+  .jsfiddle_frame {
+    transform: scale(1.014);
+    transform-origin: top left;
+  }
+  .wrap_iframe_trim {
+    width: 97%;
+    overflow: hidden;
+  }
+  /*.wrap_smart-device p:empty,
+  .wrap_smart-device p:blank {
+    padding: 0;
+  }*/
 </style>
 </html>
 JSFiddle の [**< > Embed**] が生成する標準的なスニペットの例で、画面表示幅が <html><code>340px</code></html> のスマホなどの場合...🤔\\
-<WRAP smart-device_width>
+<WRAP smart-device>
 <WRAP mincode><code javascript>
 <iframe width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
@@ 行 157: / 行 169: @@
 JSFiddle のタブをすべて表示した状態でも、折り返してコードに被らない為には、最低でも表示幅が <html><code>480px</code></html> は必要です🤔\\
-<WRAP smart-device_width>
+<WRAP smart-device>
 <WRAP mincode><code javascript>
 <iframe width="480" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 </code></WRAP>
 <html>
-<iframe width="480" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<iframe class="jsfiddle_frame" width="480" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 </html>
 </WRAP>
@@ 行 172: / 行 184: @@
     border: solid 3px;
     border-color: hotpink;
+    box-sizing: border-box;
   }
   .wrap_iframe_min-width1 {
@@ 行 180: / 行 193: @@
 JSFiddle の標準的なスニペットが崩れないように対処する方法は、<html><code>iframe</code></html> タグに CSS で <html><code>min-width: 490px;</code></html> 指定して、<html><code>overflow-x: scroll;</code></html> を指定した <html><code>div</code></html> タグで <html><code>iframe</code></html> をラップしてスクロール可能にします🤤\\
-<WRAP smart-device_width>
+<WRAP smart-device>
 <WRAP mincode><code css>
 <style>
@@ 行 187: / 行 200: @@
     border: solid 3px;
     border-color: hotpink;
+    box-sizing: border-box;
   }
   .iframe_min-width1 {
@@ 行 197: / 行 211: @@
 </code></WRAP>
 <WRAP iframe_min-width1><html>
-<iframe width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<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>
 同じコードのままで表示幅いっぱいにも対応できますが、今度はスクロールバーが邪魔です😭\\
+<WRAP iframe_trim>
 <WRAP iframe_min-width1><html>
-<iframe width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<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>
@@ 行 212: / 行 228: @@
     border: solid 3px;
     border-color: hotpink;
+    box-sizing: border-box;
   }
   .wrap_iframe_min-width2 {
     overflow-x: scroll;
   }
-  @media (min-width: 425px) { /* >= 425px */
+  @media (min-width: 433px) { /* >= 425px -> 433px */
   .wrap_iframe_min-width2 {
     overflow-x: hidden;
@@ 行 229: / 行 246: @@
 </html>
-<WRAP smart-device_width>
+<WRAP smart-device>
 <WRAP iframe_min-width2><html>
+<p class="header">
 Screen Resolution: <code id="screen_resolution"></code> pixel<br>
 Browser Resolution: <code id="browser_resolution"></code> pixel
+</p>
+<!-- DokuWiki <html> 構文の空 <p> タグ要素の生成を抑制 Start -->
+</p><!-- <html> 一旦終了 -->
+<p><!-- <html> 再開始 -->
+<!-- DokuWiki <html> 構文の空 <p> タグ要素の生成を抑制 End -->
 <script>
   "use strict";
@@ 行 240: / 行 263: @@
   codeBrowserResolution.innerText = window.innerWidth + ' x ' + window.innerHeight;
 </script>
-<iframe width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<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>
+<WRAP iframe_trim>
 <WRAP iframe_min-width2><html>
-<iframe width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+<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]]\\