IFrameがウェブサイトデザインでどのように機能するかを理解する
HTMLに要素を埋め込むと、 CSSスタイルを追加する2つの機会があります 。
- IFRAME自体をスタイルすることができます。
- IFRAME内のページを特定の条件の下でスタイルすることができます。
CSSを使用してIFRAME要素をスタイルする
iframeをスタイリングする際にまず考慮すべき点は、IFRAME自体です。 ほとんどのブラウザでは余分なスタイルがなくてもiframeが含まれていますが、一貫性を保つためにいくつかのスタイルを追加するのは良い考えです。
私のiframeに必ず含めるCSSスタイルをいくつか紹介します：
- マージン：0;
- パディング：0;
- ボーダー：なし;
- 幅： 値 ;
- 高さ： 値 ;
幅と高さをドキュメントに収まるサイズに設定します。 ここには、スタイルのないフレームの例と、基本的なスタイルのフレームの例があります。 ご覧のとおり、これらのスタイルはほとんどの場合、iframeの周りの枠線を削除するだけですが、すべてのブラウザで同じ余白、パディング、および寸法のiframeを表示するようにしています。
HTML5では 、オーバーフロープロパティを使用してスクロールバーを削除することをお勧めしますが、それは信頼できません。 したがって、スクロールバーを削除または変更する場合は、iframeにスクロールアトリビュートを使用する必要があります。 スクロールアトリビュートを使用するには、他のアトリビュートと同じようにアトリビュートを追加し、yes、no、またはautoの3つの値のいずれかを選択します。 yesは、スクロールバーが必要ない場合でも常にスクロールバーを含めるようブラウザに指示します。 いいえ、すべてのスクロールバーを削除する必要があるかどうかはわかりません。
autoがデフォルトであり、必要な場合はスクロールバーが含まれ、スクロールバーがない場合はスクロールバーが削除されます。
スクロールアトリビュートでスクロールを無効にする方法は次のとおりです。
スクロール= "いいえ" >
これはiframeです。
HTML5のスクロールを無効にするには、overflowプロパティを使用する必要があります。 しかし、 これらの例でもわかるように、まだすべてのブラウザで確実に動作するわけではありません。
オーバーフロープロパティで常にスクロールをオンにする方法は次のとおりです。
style = "overflow：scroll;" >
これはiframeです。
オーバーフロープロパティでスクロールを完全に無効にする方法はありません 。
多くのデザイナーは、iframeがページの背景と混ざり合って、iframeが存在することを読者が知らないようにします。 しかし、スタンドを外すためにスタイルを追加することもできます。 iframeがより簡単に表示されるように罫線を調整するのは簡単です。 境界線のスタイルを設定するには、境界線スタイルプロパティ（またはそれに関連するborder-top、border-right、border-left、およびborder-bottomプロパティ）を使用してください：
iframe {
ボーダートップ：＃c00 1px点在;
border-right：＃c00 2px dotted;
border-left：＃c00 2px点在;
border-bottom：＃c00 4px dotted;
}
しかし、あなたのスタイルのスクロールや枠線を止めるべきではありません。 iframeには他の多くのCSSスタイルを適用することができます。 この例では、CSS3スタイルを使用してiframeにシャドー、角を丸め、20度回転させています。
iframe {
margin-top：20px;
margin-bottom：30px;
-moz-border-radius：12px;
-webkit-border-radius：12px;
border-radius：12px;
-moz-box-shadow：4px 4px 14px＃000;
-webkit-box-shadow：4px 4px 14px＃000;
ボックスシャドウ：4px 4px 14px＃000;
-moz-transform：回転（20度）;
-webkit-transform：回転（20度）;
-o-transform：回転（20度）;
-ms-transform：rotate（20deg）;
フィルタ：progid：DXImageTransform.Microsoft.BasicImage（rotation = .2）;
}
Iframeコンテンツのスタイル設定
iframeのコンテンツのスタイルを設定することは、他のウェブページのスタイル設定と同じです。 ただし、 ページを編集するためのアクセス権が必要です 。 ページを編集できない場合（たとえば、別のサイトにある場合）
ページを編集できる場合は、サイトの他のWebページと同じように、 外部スタイルシートまたはスタイルをドキュメントに追加することができます。