フレームで画面を９分割

###前提・実現したいこと
HTMLで3x3の９分割画面を作っています

###発生している問題
上手くフレームで9分割に出来ない

###該当のソースコード

html
1<html>
2
3<frameset cols="33%,*">
4 <frameset rows="33%,*">
5	<frame src="1.html">
6  <frame src="1.html">
7  <frame src="1.html">
8 </frameset>
9 <frameset cols="33%,*">
10	<frame src="1.html">
11  <frame src="1.html">
12  <frame src="1.html">
13 </frameset>
14 <frameset rows="33%,*">
15	<frame src="1.html">
16  <frame src="1.html">
17  <frame src="1.html">
18 </frameset>
19</frameset>
20
21</html>

行動規範の内容に同意します

回答3件

既に解決済みになった質問ですが、flexを使った方法以外にも、floatプロパティを使用することでも実現できると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10            -moz-box-sizing: border-box;
11            box-sizing: border-box;
12        }
13
14        iframe {
15            border: 1px solid blue;
16            float: left;
17            width: 33.3%;
18        }
19
20        .box {
21            width: 100%;
22            background-color: black;
23        }
24    </style>
25</head>
26<body>
27<div class="box">
28    <iframe src="URL"></iframe>
29    <iframe src="URL"></iframe>
30    <iframe src="URL"></iframe>
31    <iframe src="URL"></iframe>
32    <iframe src="URL"></iframe>
33    <iframe src="URL"></iframe>
34    <iframe src="URL"></iframe>
35    <iframe src="URL"></iframe>
36    <iframe src="URL"></iframe>
37</div>
38</body>
39</html>

投稿2017/03/04 12:55

s8_chu

総合スコア14731

ベストアンサー

frameset、frame は共に非推奨です。

別ページを読み込む場合は iframe を使います。

【<frameset> - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/frameset

非推奨
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

【<frame> - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/frame

非推奨
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

こういう感じでしょうか。

HTML
1<iframe src="example.com" frameborder="0"></iframe>
2<iframe src="example.com" frameborder="0"></iframe>
3<iframe src="example.com" frameborder="0"></iframe>
4<iframe src="example.com" frameborder="0"></iframe>
5<iframe src="example.com" frameborder="0"></iframe>
6<iframe src="example.com" frameborder="0"></iframe>
7<iframe src="example.com" frameborder="0"></iframe>
8<iframe src="example.com" frameborder="0"></iframe>
9<iframe src="example.com" frameborder="0"></iframe>

CSS
1html, body, iframe {
2	margin: 0;
3	padding: 0;
4	overflow: hidden;
5}
6html, body {
7	height: 100vh;
8	width: 100vw;
9}
10body {
11    display: flex;
12    flex-wrap: wrap;
13}
14iframe {
15	flex: 1 1 33%;
16}
17```**動くサンプル：**[https://jsfiddle.net/m39prv0x/](https://jsfiddle.net/m39prv0x/)