CSSでiframe要素をカスタマイズするには？親ページから上書きする方法も解説
CSSでiframeを装飾したいけれど、やり方が分からない。そんな悩みはありませんか？
iframeで外部ページを埋め込むことができても、表示を整えないと見づらくなってしまいますよね。
今回は、iframeを使って外部ページを読み込みたいという方のために、
- iframeとは？
- iframeをCSSで装飾する方法
- iframeの注意点
以上の項目に沿って、解説していきますね。
この記事を読めば、iframeをCSSでカスタマイズする方法が分かるようになりますよ。
ぜひ最後まで読んでくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
iframeって何？どんな時に使うもの？
iframeを使うと、Webページの中に外部ページを埋め込むことができます。
具体的には以下のように記述します。
<iframe id="test" src="test.html"></iframe>str属性で指定したページをそのまま表示させることができます。
iframeは、YouTubeやGoogleMapsの埋め込みなどにも利用されています。
iframeをCSSで装飾する
iframeを装飾する際に、以前は枠線を表示するframeborder属性や、スクロールバーのscrolling属性などを指定していました。
これらの属性は、HTML5では非推奨となっていますので、CSSでスタイルを適用させましょう。
iframe {
border: none;
margin: 0px;
width: 350px;
height: 350px;
overflow: hidden;
}こうすることで、高さと幅を決定し、枠線とはみ出た部分の処理を指定することができました。
レスポンシブに対応させる
高さと幅を一定にするのではなく、ブラウザに合わせて変化するようにレスポンシブ化させたいときもあるかと思います。
ここでは、YouTube動画を埋め込む際に、どの端末でも縦横比が保たれたまま表示される方法を説明します。
HTMLは以下のように記述します。
<div class="iframeWrap">
<iframe width="560" height="315" src="#" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>iframeの部分は、YouTubeから取得した埋め込みコードを貼り付けます。
iframeをdiv要素で囲い、「class=”iframeWrap”」を指定してCSSでスタイルを書いていきます。
.iframeWrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.iframeWrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}YouTube動画の縦横比が16:9であるため、その比率を「padding-bottom: 56.25%」で指定しています。
こうすることで、横に対する高さの比率が一定になり、どの端末でも動画を16:9で表示させることができます。
iframe要素自体は、幅と高さを合わせるために、100%にしています。
iframeを使うときの問題点と解決方法
iframeの使用にはいくつか問題点があります。
iframeは指定したページ全体を読み込むため、目的の情報が下部にある場合には、長いスクロールをする必要が出てしまいます。
YouTubeやGoogleMapsなど、すぐに目的の情報が得られるものであれば問題ないですが、長いページを読み込む際には注意した方が良いですね。
どうしても外部ページを読み込みたい場合を除いて、極力使用しないようにしましょう。
iframe要素を使わず、スクロールバーのついた疑似インラインフレームを作成する方法を紹介します。
また、iframeで埋め込んだ外部ページは、CSSでスタイルの調整を行うことができません。
JavaScriptを使って、iframeに表示している要素を書き換える方法も解説していきます。
ただしこの方法は、外部ページのある場所が、表示しているWebページと同じWebサーバー上にある場合にしか適用できません。
overflowプロパティを使って擬似的にフレームを作る
CSSのoverflowプロパティを使用すると、iframeのようなインラインフレームを疑似的に作ることができます。
<style>
.inlineFrame {
background-color: #fff;
width: 410px;
height: 410px;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
<div class="inlineFrame">
疑似インラインフレームの中身
</div>高さと幅を指定し、overflowではみ出した部分の表示方法を選択します。
これで、スクロールバー付きのフレームが作成できました。
親ページからiframe内のコンテンツを調整
iframe内のコンテンツの操作は、JavaScriptを使用します。
「iframe要素がある親ページ」と「親ページに埋め込むページ」を用意し、親ページの方でJavaScriptを使います。
親ページは以下のように記述します。
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>親ページ</title>
<style>
#sample {
border: none;
width: 410px;
height: 410px;
}
</style>
</head>
<body>
<iframe id="sample" src="sample.html"></iframe>
<input type="button" value="クリック" onclick="func()">
<script>
const sample = document.getElementById("sample");
function func() {
const item = sample.contentWindow.document.getElementById("test");
item.classList.remove('box1');
item.classList.add('box2');
}
</script>
</body>続いて、iframeで読み込む「sample.html」の中身を記述します。
<head>
<meta charset="UTF-8" />
<title>フレーム内のページ</title>
<style>
body {
margin: 0px;
}
.box1 {
width: 330px;
height: 330px;
border: solid 1px #333;
background-color: blue;
}
.box2 {
width: 330px;
height: 330px;
border-radius:15px;
background-color: red;
}
</style>
</head>
<body>
<div id="test" class="box1">iframe内のページです</div>
</body>JavaScript部分では、「id=”test”」の要素のclassから「box1」を削除し、「box2」を追加するコードを記述しています。
iframe要素の下のボタンをクリックすることで処理が行われます。
document.getElementById()を使って、「id=”sample」の要素を取得しています。
contentWindow.document.getElementById()を使い、その中の「id=”test”」にアクセスして、処理を行います。
要素.classList.remove()は、クラス名を削除し、要素.classList.add()は、クラス名を追加する処理です。
まとめ：iframe内のスタイル調整にはJavaScriptを使う
今回は、iframe要素をCSSで装飾する方法について紹介しました。
iframe内のスタイルを変更したい場合、CSSだけでなくJavaScriptを使用するということもお話ししましたね。
iframeはあまり使わない要素ですが、YouTube動画を埋め込むなどの特定の場合には必須知識となりますので、ぜひ覚えておきましょう。
iframeを使う際に、今回の記事が参考になれば幸いです。
プログラミングやパソコンを使って働きたい！
そのように考え、成長しているIT業界への転職を考えている方も増えてきました。
『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』
反対にこのような声も聞く事があります。
そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
