HTML5 で、scrolling 属性が削除されるという記述が良くありますが、実際は動作しています。削除されたのは『仕様』です。実際 iframe は広告・ツール等であちらこちらで利用されている現状で削除する事は簡単ではありません。 そんな中、Google Chrome だけが新しい仕様( seamless と srcdoc )を取り入れているので、ひょっとして最初に scrolling 属性を削除するかもしれないと推測はできますが、現実的では無いと思います。いかに Google と言えども人の作業が介在するので、このあたりは避けたいはずです。 また、Firefox だけが、scrolling がなくなる事を想定して、overflow:hidden が 対応されていますが、現状では css による変更は border:0px のみを考えるという状況に思われます。 iframe の背景透過 background-color の未指定時の透過処理は全てうまくいっていますが、IE8 以前では動作しません。 iframe 内で背景色を指定しない場合のみ、親ページでの背景色指定が有効になります。iframe 内で背景色を設定している場合親ページからの指定は反映されません。ただ、Windows Safari では動作が遅いせいか、親側の背景色が表示された上に後から( iframe がロードされてから )iframe 内の色が反映されるという状況でした。 Google Chrome の seamless の css 的効果 seamless は、Google Chrome だけでしたが、seamless 指定すると display:block となります。以下の例で縦にならんでいるのは、意図的に行っていますが、iframe はなにもしなければ横へ並びます。 スクロールバーが消える事はありませんが、border:0px と同じ効果がありました 現在最新のブラウザでのテスト結果 (2013/03/13)
| Chrome 25.0.1364.160 |
Firefox 19.0.2 |
IE 10 |
Opera 12.14 |
Safari 5.1.7 |
|
| srcdoc | ○ | × | × | × | × |
| seamless スクロールバーは 表示される |
○ display:block となる |
× | × | × | × |
| overflow: hidden |
× | ○ | × | × | × |
| scrolling HTML5 でも 使用できる |
○ | ○ | ○ | ○ | ○ |
| border: 0px; |
○ | ○ | ○ | ○ | ○ |
| background-color: transparent |
○ | ○ | ○ | ○ | ○ |
以下は実際の IFRAMEiframe内の記述
<!DOCTYPE html>
<html lang="ja">
<style type="text/css">
b {
color: #000000;
background-color: #e0e0e0;
border-radius: 5px;
padding: 4px;
}
body {
background: url(http://leiya.winofsql.jp/d2.png);
}
.tp {
background-color: #123456;
}
iframe {
width: 400px;
height: 60px;
margin-bottom: 8px;
}
</style>
<body>
<pre>
<b>指定なし</b>
<iframe src="test1.htm"></iframe>
<b>scrolling="no" border:0px</b>
<iframe scrolling="no" style='border:0px;' src="test2.htm"></iframe>
<b>background-color: #123456</b>
<iframe class="tp" src="test1.htm"></iframe>
<b>background-color: #123456</b>
<iframe class="tp" src="test2.htm"></iframe>
<b>overflow:hidden</b>
<iframe style='overflow:hidden;' src="test2.htm"></iframe>
<b>seamless srcdoc</b>
<iframe seamless srcdoc="<b style='color:#fff;'>seamless srcdoc</b>"></iframe>
</pre>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<style type="text/css">
b {
color: #000000;
background-color: #ffffff;
border-radius: 5px;
padding: 4px;
}
</style>
<body>
<b>背景色なし</b>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<style type="text/css">
b {
color: #000000;
background-color: #ffffff;
border-radius: 5px;
padding: 4px;
}
body {
background-color: #c0c0c0;
}
</style>
<body>
<b>背景色あり/本来スクロールあり</b>
<pre>
</pre>
</body>
</html>
Google Chrome のスクリーンショット
さくらインターネットは、ドメインを取得している必要がありますが、通常さくらインターネット内でサブドメインを作る手順とは異なり、サーバーコントロールでは無く「会員メニュー」のドメインメニューを使用します。
さらにその中の左側下部にあるネームサーバーメニューで「CNAME」(別名)を追加します
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
