Webサイト制作コースのお申し込みはこちら Webサイト制作コースのお申し込みはこちら

HTMLでWebサイトを作成する際に、画面を分割したようなデザインは頻繁に利用されます。

本記事では、HTML4まで利用されていた「frameset要素」「frame要素」での実装方法と、HTML5からも利用可能な「iframe要素」の使い方についてご紹介していきたいと思います。

HTML5以降は「iframe」タグ以外は廃止となっていますが、既存コードで利用されていることも多いため、従来の実装方法も含めてしっかりと理解しておきましょう。

HTMLでのフレームページとは


HTMLのフレームとは、画面を複数に分割し、それぞれに別々のhtmlを表示する機能を指します。

フレームページでは、分割方法を指定する土台となるhtmlと、分割した部分に表示するhtmlで、最低3つ以上のhtmlが必要です。

HTML4までのフレームページ

HTML4までのフレームページ作成においては、「frameset」タグと「frame」タグを組み合わせて、分割ページを実現していました。

「frameset」タグでページの分割方法を指定し、「frame」タグで読み込むhtmlを指定します。

HTML5からはiframe以外のフレームタグが廃止

HTML5からは「iframe」以外のフレームタグが廃止され、画面分割はCSSで記述することが推奨されるようになりました。

「iframe」タグは、インラインフレームと呼ばれ、HTML文書の中に、別のhtmlファイルを読み込むことが可能です。

厳密には、「frameset」のような画面分割のためのタグではありませんが、CSSと組み合わせることで従来のような複数htmlで構成されたフレームページ作成が可能となります。

HTML4までで利用されてきたフレームページの作り方


HTML4までで利用されてきた従来の方法で画面を3分割したWebサイトを表示してみたいと思います。

画面3分割のサンプルコード

まずはサンプルコードとして左右画面分割した上で、右側のみ上下にも分割する3分割画面を作成してみたいと思います。

土台となるファイルを「index.html」、左側表示用ファイルを「left.html」、右上表示用ファイルを「right1.html」右下表示用ファイルを「right2.html」として作成します。

index.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  2.         "http://www.w3.org/TR/html4/frameset.dtd">
  3. <html>
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Frame Sample</title>
  7. </head>
  8.   <frameset cols="30%, *">
  9.     <frame src="left.html">
  10.     <frameset rows="40%, *">
  11.       <frame src="right1.html">
  12.       <frame src="right2.html">
  13.     </frameset>
  14.   </frameset>
  15. </html>

left.html

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Left</title>
  6. </head>
  7. <body>
  8.   <h1>左側表示用のhtmlです。</h1>
  9. </body>
  10. </html>

right1.html

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Right1</title>
  6. </head>
  7. <body>
  8.   <h3>右上表示用のhtmlです。</h3>
  9. </body>
  10. </html>

right2.html

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Right2</title>
  6. </head>
  7. <body>
  8.   <h5>右下表示用のhtmlです。</h5>
  9. </body>
  10. </html>

実際にブラウザ上で表示した画像が下記の通りです。

サンプルコード解説

サンプルコードでチェックしておきたいポイントを簡単に解説していきたいと思います。

DOCTYPE宣言

index.htmlのDOCTYPE宣言が普段見慣れた記述方法と若干違うことを確認してください。

framesetを利用する場合には、通常DOCTYPE宣言にframesetを利用することを明示してあげる必要があります。

framesetタグ

framesetタグでは、「cols」属性と「rows」属性を利用しているのがご確認頂けます。

「cols」属性は横の分割を指定する属性で、サンプルでは「30%, *」と記載することで、左側のhtmlを30%、残りの割合(=70%)を右側のhtmlと指定しています。

「rows」属性は縦の分割を指定する属性で、サンプルでは「40%, *」と記載することで、上側のhtmlを40%、残り60%を下側のhtmlと指定しています。

frameタグ

frameタグでは、htmlを表示する枠組みを作成します。

frameタグの「src」属性にhtmlファイルのパスを指定することで、該当のhtmlファイルが画面上に表示されます。

ポテパンダの一言メモ

サンプルのようにファイル名だけを記述した場合には、土台となるhtmlファイル(=index.html)と同一階層に格納されているファイルという意味合いになります。

HTML5以降も利用可能なフレームページの作り方


上述したサンプルコードをHTML5ではどのように実現するのか確認していきましょう。

iframeを利用したサンプルコード

iframeを利用したサンプルコードを確認してみましょう。

CSSでデザインを整えながらiframeでそれぞれのhtmlファイルを表示していることをご確認頂けます。

ポテパンダの一言メモ

「left.html」「right1.html」「right2.html」については上述したHTML4のサンプルと全く同じですので、省略しています。

index.html

  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Frame Sample</title>
  6.   <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9.   <div class="base">
  10.     <div class="class1">
  11.       <iframe src="left.html" width="100%" height="100%"></iframe>
  12.     </div>
  13.     <div class="class2">
  14.       <iframe src="right1.html" width="100%" height="40%"></iframe>
  15.       <iframe src="right2.html" width="100%" height="60%"></iframe>
  16.     </div>
  17.   </div>
  18. </body>
  19. </html>

style.css

  1. .base {
  2.   display: flex;
  3.   flex-direction: row;
  4.   width: 100vw;
  5.   height: 100vh;
  6. }
  7. .class1 {
  8.   width: 30%;
  9. }
  10.  
  11. .class2 {
  12.   display: flex;
  13.   flex-direction: column;
  14.   width: 70%;
  15. }
  16.  

サンプルコードを解説

HTML5での実装方法についても簡単にご紹介しておこうと思います。

画面を左右に分割

まず土台となるindex.htmlの画面全体を指定するdivタグに「base」クラスで「flex-box」を指定しています。

「flex-direction」プロパティに「row」を指定することで、横並びに要素が配置されていきます。

「width: 100vw」「height: 100vh」は常に画面いっぱいのサイズになるように調整する指定方法です。

「base」クラスの内側で更にdivタグを配置し、「class1」と「class2」のwidth属性で横幅の割合を決定しています。

画面右側のエリアを上下に分割

画面右側エリアでhtmlファイルを縦並びにしているのは「class2」に指定した「flex-direction:column」によるものです。

「class2」のdivタグの内側に配置された要素が、縦並びで表示されます。

上下の割合は、iframeタグのheight属性を利用して、上側が40%、下側が60%になるように指定しています。

サンプルコードを実行した結果が下記の画像です。

さいごに：HTMLにおけるフレームの役割を理解しよう


本記事では、HTMLでフレームページの作成方法についてご紹介してきました。

今回HTML5でiframeを活用した画面分割についても紹介しましたが、iframeとframesetでは元々役割が異なります。

2020年現在までのところ、無理にframesetで作成されたページをiframeで置き換えることはおすすめ出来ると言えません。

HTML5で新たに作成するページはCSSとiframeで構築し、HTML4以前に作られたサイトは現状のまま留めておくのが良いでしょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか？

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。