両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン |
javascript:jsfiddle [2022/09/17 04:13] – [レスポンシブ対応] ともやん | javascript:jsfiddle [2022/09/23 22:01] (現在) – [パラメータ] ともやん |
---|
transform-origin: top left; | 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 { | .wrap_smart-device p:blank { |
padding: 0; | padding: 0; |
} | }*/ |
</style> | </style> |
</html> | </html> |
| |
同じコードのままで表示幅いっぱいにも対応できますが、今度はスクロールバーが邪魔です😭\\ | 同じコードのままで表示幅いっぱいにも対応できますが、今度はスクロールバーが邪魔です😭\\ |
| <WRAP iframe_trim> |
<WRAP iframe_min-width1><html> | <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> | <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> |
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; |
</WRAP> | </WRAP> |
| |
| <WRAP iframe_trim> |
<WRAP iframe_min-width2><html> | <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> | <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]]\\ |
| |