#author("2021-02-25T12:05:15+09:00","","")
#author("2021-02-25T12:05:55+09:00","","")
#nofollow
#norelated
総数:&counter(total); 今日:&counter(today); 昨日:&counter(yesterday);

* もくじ [#hda78f2b]

#contents

&size(22){&color(blue){HTMLでフレームページを作成 HTML5からはiframe};};&br;

参考url: [[HTMLでフレームページを作成してみよう！HTML5からはiframeのみ利用推奨！>https://style.potepan.com/articles/22060.html#HTML5]]

*画面3分割のサンプルコード [#kdeec3dd]

**left.html [#z58ad3c7]
 <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
   <title>Left</title>
 </head>
 <body>
   <h1>左側表示用のhtmlです。</h1>
 </body>
 </html>

**right1.html [#if30fb1d]
 <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
   <title>Right1</title>
 </head>
 <body>
   <h3>右上表示用のhtmlです。</h3>
 </body>
 </html>


**right2.html [#c32c60fd]
 <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
   <title>Right2</title>
 </head>
 <body>
   <h5>右下表示用のhtmlです。</h5>
 </body>
 </html>


**index.html [#iacf1340]
 <!doctype html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
   <title>Frame Sample</title>
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
   <div class="base"> ←★土台となるindex.htmlの画面全体を指定するdivタグに「base」クラスを指定
     <div class="class1">←★画面左側エリアを指定する目的のdivタグに「class1」クラスを指定
       <iframe name="left_screen" src="left.html" width="100%" height="100%"></iframe>
     </div>
     <div class="class2">←★「class2」のdivタグの内側に配置された要素が、縦並びで表示されます。
       <iframe name="right_upper_screen" src="right1.html" width="100%" height="40%"></iframe>←★上下の割合は、iframeタグのheight属性を利用して、上側が40%、
       <iframe name="right_lower_screen" src="right2.html" width="100%" height="60%"></iframe>←★下側が60%になるように指定
     </div>
   </div>
 </body>
 </html>
 
**style.css [#n4d9847f]

 .base {←★土台となる画面全体を指定するdivタグ用の「base」クラス
   display: flex; ←★「flex-box」を指定
   flex-direction: row;←★「flex-direction」プロパティに「row」を指定することで、横並びに要素が配置されていく
   width: 100vw;←★常に画面いっぱいのサイズになるように調整する指定方法
   height: 100vh;←★常に画面いっぱいのサイズになるように調整する指定方法
 }

 
 .class1 {←★画面左側エリアを指定する目的のdivタグ用の「class1」クラス
   width: 30%;
 }
  
 .class2 {←★画面右側エリアを指定する目的のdivタグ用の「class2」クラス
   display: flex;
   flex-direction: column;←★画面右側エリアでhtmlファイルを縦並びにする指定
   width: 70%;
 }



*サンプルコードを解説 [#fee62c59]

**画面を左右に分割 [#lf4ede0e]
-まず土台となるindex.htmlの画面全体を指定するdivタグに「base」クラスで「flex-box」を指定しています。
-「flex-direction」プロパティに「row」を指定することで、横並びに要素が配置されていきます。
-「width: 100vw」「height: 100vh」は常に画面いっぱいのサイズになるように調整する指定方法です。
 
**画面右側のエリアを上下に分割 [#y47cacbf]
-画面右側エリアでhtmlファイルを縦並びにしているのは「class2」に指定した「flex-direction:column」によるものです。
-「class2」のdivタグの内側に配置された要素が、縦並びで表示されます。
-上下の割合は、iframeタグのheight属性を利用して、上側が40%、下側が60%になるように指定しています。


* ''次は'' [#t7ccd53a]
トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS