hidakas1961のブログ

プログラミング専門

フレームを使わずに画面分割するHTMLページ作成方法

最近HTMLでサイトを構築しているが

フレームで画面分割すると

目的のページのURLに

直接リンクしたときに

問題が発生する

 

フレームが表示されないのだ

 

そこで

フレームを使わずに

画面を分割する方法を調査した

 

CSS3のflexというプロパティによって

実現可能だと分かった

 

フレックスボックスとか

呼ばれているらしい

 

試しに作ってみたら

うまく行った

 

スタイルシートJavaScript

書かなければならないが

それほど複雑ではない

 

とりあえず

ソースコードを見てくれ

 

まずはスタイルシートから

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つのコンテナクラスは

いくつでも入れ子にできるので

かなり複雑な画面分割も可能となる

 

私はこのように分割した

f:id:hidakas1961:20190309164020j:plain

縦横に合計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というオブジェクトが

面倒臭いことを

全部やってくれるようだ

 

以上です。