フレームを使わずに画面分割するHTMLページ作成方法
最近HTMLでサイトを構築しているが
フレームで画面分割すると
目的のページのURLに
直接リンクしたときに
問題が発生する
フレームが表示されないのだ
そこで
フレームを使わずに
画面を分割する方法を調査した
CSS3のflexというプロパティによって
実現可能だと分かった
フレックスボックスとか
呼ばれているらしい
試しに作ってみたら
うまく行った
書かなければならないが
それほど複雑ではない
とりあえず
ソースコードを見てくれ
まずはスタイルシートから
body { margin: 0; padding: 0; } .flex_container { height: 100vh; display: flex; flex-direction: row; } .flex_row { flex-grow: 1; display: flex; flex-direction: row; } .flex_column { flex-grow: 1; display: flex; flex-direction: column; } .flex_main { flex-grow: 1; background-color: #ffffe0; overflow: auto; } .flex_left { background-color: #e0e0ff; width: 200px; overflow: auto; } .flex_right { background-color: #e0f0c0; width: 150px; overflow: auto; } .flex_top { background-color: #ffe0f0; min-width: 100%; height: 86px; text-align:center; } .flex_bottom { color: #e0e0e0; background-color: #808080; height: 24px; font-size: small; text-align:right; } .flex_inner { padding: 3px 5px 0; max-width: 100rem; }
bodyのマージンがあると
ボックスの周りに
隙間が出来てしまうので
ゼロにしてある
念のためパディングもゼロにしたが
これは無くても良い
.flex_containerクラスはdivタグと組み合わせて使用する
ほかのクラス設定プロパティもそう
.flex_containerクラスは
すべてのフレックスボックスの
一番外側のボックスつまりコンテナだ
.flex_rowクラスは行方向の分割のためのコンテナだ
この中にdivタグでボックスを並べると
各ボックスは行方向に分割される
同様に.flex_columnクラスは桁方向の分割用コンテナで
各ボックスは桁方向に分割される
つまり縦に分割する
この2つのコンテナクラスは
いくつでも入れ子にできるので
かなり複雑な画面分割も可能となる
私はこのように分割した
縦横に合計5個のボックスに分割している
フレックスボックスの使用方法を
ネット検索した結果
見つかったサイトの使用例では
すべてのサイトで
ヘッダー部分とフッター部分を
横幅いっぱいにしてあったのだが
ヘッダー部とフッター部は
そもそも表示情報量が少ないので
横幅が大きすぎるのは無駄である
そのため
私は縦横に入れ子で
分割する方法を
考案したのである
再びスタイルシートの説明に戻るが
flex-grow: 1;というプロパティは
このボックスは伸び縮みするという意味らしい
display: flex;というのは
これはコンテナであるという意味
.flex_mainクラスは
このページのメインコンテンツとなる
divタグボックス用のクラスである
.flex_leftクラスは固定幅の左側サイドバー用
.flex_rightクラスは固定幅の右側サイドバー用である
同様に.flex_topクラスは固定高さのヘッダー用
.flex_bottomクラスはフッター用である
最後に.flex_innerクラスは
ボックスの中身を書くためのボックスで
見やすいようにパディングを設定してある
max-width: 100rem;というプロパティは
ボックス内のテキストの幅が
ボックスの幅を超えてしまったときの
対処用のプロパティである
これがないと
画面がぐちゃぐちゃに
なってしまうのだ
次にHTML側の
ソースコードを見てくれ
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>サイトのタイトル</title> <meta charset="utf-8" /> <meta name="copyright" content="Copyright 所有者 All right reserved." /> <meta name="robots" content="INDEX,FOLLOW" /> <meta name="google-site-verification" content="Google検索対応用の暗号" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="所有者" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta property="og:url" content="サイトのURL" /> <meta property="og:title" content="ページのタイトル" /> <meta property="og:description" content="ページの説明" /> <meta property="og:image" content="アイコンのURL" /> <link rel="shortcut icon" href="アイコンのサイト内パス" /> <link rel="stylesheet" type="text/css" href="スタイルシートのサイト内パス"> <script src="/js/スクリプトのサイト内パス"></script> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8" ></script> </head> <body> <div class=flex_container> <div class=flex_left><script>WriteHtml("/contents/flex_left.html");</script></div> <div class=flex_column> <div class=flex_top><script>WriteHtml("/contents/flex_top.html");</script></div> <div class=flex_row> <div class=flex_column> <div class=flex_main> <!-- 本文 --------------------------------------------------------------------> <div class=flex_inner id="head"> ~~~ ここにページの本文を書く ~~~ > <a href="#head">このページの先頭へ戻る</a> <br /> <br /> <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false" >Tweet</a> </div> <!-- 終了 --------------------------------------------------------------------> </div> <div class=flex_bottom><script>WriteHtml("/contents/flex_bottom.html");</script></div> </div> <div class=flex_right><script>WriteHtml("/contents/flex_right.html");</script></div> </div> </div> </div> </body> </html>
<head>部分は普通なので飛ばして
<body>について説明する
基本構造は以下の通りで
これはどのページのHTMLも
同じである
<body> <div class=flex_container> <div class=flex_left><script>WriteHtml("/contents/flex_left.html");</script></div> <div class=flex_column> <div class=flex_top><script>WriteHtml("/contents/flex_top.html");</script></div> <div class=flex_row> <div class=flex_column> <div class=flex_main> <div class=flex_inner id="head"> ~~~ ページ本文 ~~~ </div> </div> <div class=flex_bottom><script>WriteHtml("/contents/flex_bottom.html");</script></div> </div> <div class=flex_right><script>WriteHtml("/contents/flex_right.html");</script></div> </div> </div> </div> </body>
divタグでコンテナとボックスを
入れ子で定義している
分割方向が縦と横で変化する部分は
それぞれの分割用コンテナで入れ子にする
そして本文以外の各ボックスは
常に同じ内容が表示されるため
内容をスクリプトで表示している
今回の例では
ヘッダー、フッター、左側サイドバー、
右側サイドバーがそれにあたる
WriteHtml()という関数は
サイト内のHTML文書のパスを
引数として受け取り
それをその場所に表示する
<script> WriteHtml("サイト内HTMLパス"); </script>
とすることで
このページ以外の
他のHTML文書を表示するのだ
それでは
ソースコードを見てくれ
function WriteHtml(path) { var url = "http://" + document.domain + path; var data = "読み込み失敗!"; var http = new XMLHttpRequest(); http.open("GET", url, false); http.onreadystatechange = function () { data = http.responseText; } http.send(null); document.write(data); }
たったこれだけだ
ネット検索して
やり方を調べただけなので
詳しいことは良く分からないが
XMLHttpRequestというオブジェクトが
面倒臭いことを
全部やってくれるようだ
以上です。