両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン |
javascript:jsfiddle [2022/09/16 16:02] – [レスポンシブ対応] ともやん | javascript:jsfiddle [2022/09/23 22:01] (現在) – [パラメータ] ともやん |
---|
<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> |
| |
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> |
border: solid 3px; | border: solid 3px; |
border-color: hotpink; | border-color: hotpink; |
| box-sizing: border-box; |
} | } |
.wrap_iframe-min-width1 { | .wrap_iframe_min-width1 { |
overflow-x: scroll; | overflow-x: scroll; |
} | } |
| |
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> |
border: solid 3px; | border: solid 3px; |
border-color: hotpink; | border-color: hotpink; |
| box-sizing: border-box; |
} | } |
.iframe_min-width1 { | .iframe_min-width1 { |
</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> |
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; |
} | } |
</style> | </style> |
<script> | |
"use strict"; | |
let lblScreenResolution = document.getElementById('#screen_resolution'); | |
lblScreenResolution.innerText = screen.width + ' x ' + screen.height; | |
</script> | |
</html> | </html> |
| |
<WRAP smart-device_width> | <WRAP smart-device> |
<WRAP iframe_min-width2><html> | <WRAP iframe_min-width2><html> |
<p>Screen Resolution: <label id="screen_resolution"></label> pixel</p> | <p class="header"> |
<iframe width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe> | 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"; |
| let codeScreenResolution = document.getElementById('screen_resolution'); |
| let codeBrowserResolution = document.getElementById('browser_resolution'); |
| codeScreenResolution.innerText = screen.width + ' x ' + screen.height; |
| codeBrowserResolution.innerText = window.innerWidth + ' x ' + window.innerHeight; |
| </script> |
| <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¶m2=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]]\\ |
| |