HTMLに要素を埋め込むと、CSSスタイルを追加する2つの機会があります。
- あなたは
IFRAME 自体。
- ページのスタイルを
IFRAME （特定の条件下で）。
CSSを使用してIFRAME要素をスタイルする
iframeをスタイリングする際にまず考慮すべき点は、
IFRAME
マージン：0; パディング：0; ボーダー：なし; 幅： 値 ; 高さ： 値 ; とともに 幅
そして 高さ
私の文書に収まるサイズに設定してください。ここには、スタイルのないフレームの例と、基本的なスタイルのフレームの例があります。ご覧のように、これらのスタイルはほとんどの場合iframeの周りの枠線を削除しますが、すべてのブラウザで同じ余白、パディング、および寸法を持つiframeを表示するようにします.HTML5では、 オーバーフロー
プロパティを使用してスクロールバーを削除することはできますが、それは信頼できません。したがって、スクロールバーを削除または変更する場合は、 スクロール
あなたのiframeにも属性があります。使用するには スクロール
他の属性と同様に追加し、次に3つの値のいずれかを選択します。 はい
, いいえ
、または オート
はい
スクロールバーが必要ない場合でも常にスクロールバーを含めるようブラウザに指示します。 いいえ
すべてのスクロールバーを必要に応じて削除するかどうかを指定します。 オート
デフォルトのスクロールバーが必要な場合はスクロールバーを含め、スクロールバーがない場合はスクロールバーを削除します。ここではスクロールバーをオフにする方法を示します スクロール属性：スクロール= "いいえ"> HTML5のスクロールを無効にするには、 オーバーフロー
プロパティ。しかし、これらの例でもわかるように、まだすべてのブラウザで確実に動作するわけではありません。ここでは、いつもスクロールをオンにする方法があります オーバーフロープロパティ：スタイル= "オーバーフロー：スクロール;"> がある とんでもない スクロールを完全にオフにするには オーバーフロー
プロパティ。多くのデザイナーは、iframeがページの背景と混ざり合って、iframeが存在することを読者が知らないようにします。しかし、スタンドを外すためにスタイルを追加することもできます。 iframeがより簡単に表示されるように罫線を調整するのは簡単です。ちょうど 境界
スタイルのプロパティ（またはそれに関連する ボーダートップ
, ボーダー右
, ボーダー左
、および ボーダーボトムプロパティ）を使用して枠線をスタイルします。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のコンテンツのスタイルを設定することは、他のウェブページのスタイル設定と同じです。しかし、あなた ページの編集にアクセスできる必要があります 。ページを編集できない場合（たとえば、別のサイトにある場合） ページを編集できる場合は、サイトの他のWebページと同じように、外部スタイルシートまたはスタイルをドキュメントに追加することができます。
これはiframeです。
これはiframeです。
Iframeコンテンツのスタイル設定
