javascript:jsfiddle

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
javascript:jsfiddle [2022/09/17 01:37] – [レスポンシブ対応] ともやんjavascript:jsfiddle [2022/09/23 22:01] (現在) – [パラメータ] ともやん
行 135: 行 135:
 <html> <html>
 <style> <style>
-  .wrap_smart-device_width {+  .wrap_smart-device {
     width: 340px;     width: 340px;
     border: solid 3px;     border: solid 3px;
     border-color: lightgreen;     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> </style>
 </html> </html>
  
 JSFiddle の [**< > Embed**] が生成する標準的なスニペットの例で、画面表示幅が <html><code>340px</code></html> のスマホなどの場合...🤔\\ JSFiddle の [**< > Embed**] が生成する標準的なスニペットの例で、画面表示幅が <html><code>340px</code></html> のスマホなどの場合...🤔\\
-<WRAP smart-device_width>+<WRAP smart-device>
 <WRAP mincode><code javascript> <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> <iframe width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
行 157: 行 173:
  
 JSFiddle のタブをすべて表示した状態でも、折り返してコードに被らない為には、最低でも表示幅が <html><code>480px</code></html> は必要です🤔\\ JSFiddle のタブをすべて表示した状態でも、折り返してコードに被らない為には、最低でも表示幅が <html><code>480px</code></html> は必要です🤔\\
-<WRAP smart-device_width>+<WRAP smart-device>
 <WRAP mincode><code javascript> <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> <iframe width="480" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 </code></WRAP> </code></WRAP>
 <html> <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> </html>
 </WRAP> </WRAP>
行 172: 行 188:
     border: solid 3px;     border: solid 3px;
     border-color: hotpink;     border-color: hotpink;
 +    box-sizing: border-box;
   }   }
   .wrap_iframe_min-width1 {   .wrap_iframe_min-width1 {
行 180: 行 197:
  
 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> をラップしてスクロール可能にします🤤\\ 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> <WRAP mincode><code css>
 <style> <style>
行 187: 行 204:
     border: solid 3px;     border: solid 3px;
     border-color: hotpink;     border-color: hotpink;
 +    box-sizing: border-box;
   }   }
   .iframe_min-width1 {   .iframe_min-width1 {
行 197: 行 215:
 </code></WRAP> </code></WRAP>
 <WRAP iframe_min-width1><html> <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> </html></WRAP>
 </WRAP> </WRAP>
  
 同じコードのままで表示幅いっぱいにも対応できますが、今度はスクロールバーが邪魔です😭\\ 同じコードのままで表示幅いっぱいにも対応できますが、今度はスクロールバーが邪魔です😭\\
 +<WRAP iframe_trim>
 <WRAP iframe_min-width1><html> <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> </html></WRAP>
 +</WRAP>
  
 <html> <html>
行 212: 行 232:
     border: solid 3px;     border: solid 3px;
     border-color: hotpink;     border-color: hotpink;
 +    box-sizing: border-box;
   }   }
   .wrap_iframe_min-width2 {   .wrap_iframe_min-width2 {
     overflow-x: scroll;     overflow-x: scroll;
   }   }
-  @media (min-width: 425px) { /* >= 425px */+  @media (min-width: 433px) { /* >= 425px -> 433px */
   .wrap_iframe_min-width2 {   .wrap_iframe_min-width2 {
     overflow-x: hidden;     overflow-x: hidden;
行 229: 行 250:
 </html> </html>
  
-<WRAP smart-device_width>+<WRAP smart-device>
 <WRAP iframe_min-width2><html> <WRAP iframe_min-width2><html>
 +<p class="header">
 Screen Resolution: <code id="screen_resolution"></code> pixel<br> Screen Resolution: <code id="screen_resolution"></code> pixel<br>
 Browser Resolution: <code id="browser_resolution"></code> pixel Browser Resolution: <code id="browser_resolution"></code> pixel
 +</p>
 +<!-- DokuWiki <html> 構文の空 <p> タグ要素の生成を抑制 Start -->
 +</p><!-- <html> 一旦終了 -->
 +<p><!-- <html> 再開始 -->
 +<!-- DokuWiki <html> 構文の空 <p> タグ要素の生成を抑制 End -->
 <script> <script>
   "use strict";   "use strict";
行 240: 行 267:
   codeBrowserResolution.innerText = window.innerWidth + ' x ' + window.innerHeight;   codeBrowserResolution.innerText = window.innerWidth + ' x ' + window.innerHeight;
 </script> </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> </html></WRAP>
 </WRAP> </WRAP>
  
 +<WRAP iframe_trim>
 <WRAP iframe_min-width2><html> <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> </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]]\\ [[https://codysaylor.com/notes/comparing-codepen-jsfiddle-cssdeck-liveweave-jsbin-dabblet/|Comparing Codepen, JSFiddle, JSBin, Glitch, Plunkr, CSSDeck, Liveweave, Dabblet | Cody Saylor]]\\
  
  • javascript/jsfiddle.1663346226.txt.gz
  • 最終更新: 2022/09/17 01:37
  • by ともやん