うにぐ

こんにちわ。
うにです。

昨晩は仕事疲れなのか風邪なのか、頭痛が酷かったので何もせず飯食って就寝しました。

前回GMS SKINのフレーム化をすると書きましたが、フレーム化ではなく擬似フレームで書き始めてます。

擬似フレームってなに？
フレームと擬似フレームってどう違うの？

って思う人が殆どだと思います。
まずフレームは分かると思いますが、一つのページの中に複数のhtmlファイルを読み込ませる事ですね。
海栗海胆雲丹ではメニューページでフレームを使用しています。

んで擬似フレームですが、こちらはCSSを活用して段落を作っています。
段落というとhtmlタグでいうなれば<q>もしくは<blockquote>を使用すると段落になるんですが、普通の文章（手順書等）を書くのであればそれでもいいんですが、複数段落を作成するとなると上記タグは使用できません。

ではどうするか？
スタイルシートを使って段落化（擬似フレーム化）するわけですね。
まぁうにぐでも擬似フレームを使用しているわけですが＾＾

まぁ文章で言ってもよくわかんないと思うので例を挙げてみます。
下の表？を見てください。

ヘッダー

メインのコンテンツ(右側)

端のコンテンツ(左側)

フッター

こちらはtableタグを使ってそうですが、tableは一切使ってません。
html的にはdivタグのみ使ってます。
ソースはこんな感じになります。

<style>
<!--
#main { float: right; border-width: 1px; border-style: solid; }
#left { border-width: 1px; border-style: solid; }
#head { border-width: 1px; border-style: solid; }
#foot { border-width: 1px; border-style: solid; }
-->
</style>
<div id="head">ヘッダー</div>
<div id="main">メインのコンテンツ(右側)</div>
<div id="left">端のコンテンツ(左側)</div>
<div id="foot">フッター</div>

これをコピペしてテキストファイルに貼り付け、拡張子をhtml（もしくはhtm）にして実行してみてください。
上と同じようになると思います。

簡単に説明するとmainの部分を右寄せにするわけですが、ただ<div align="right">とかにすると文章は右寄せになりますが枠が改行されてしまいます。
<table>を<div>で囲めば別ですが、今回はtableは使わない前提としているので。

まぁこれをスタイルシートでfloat: right;と付け加える事により表現しているわけです。

各idにwidth: 500px とか入れることにより横幅指定も可能です。

擬似フレームは今回紹介したCSSとの連携以外にも方法はあります。
インラインフレームを使う方法です。

うにぐのサイドバーにある[来訪者情報]がそれにあたります。
一つのhtmlからある範囲内に別のページを表示させる、というものです。
フレームと同じじゃないの？と思うでしょうけど、違うんですｗ

フレームとしてはベースとなるページにフレームとして呼び出すページ、計３つのhtmlファイルが必要になります。
ですがインラインフレームの場合は名称のまんま、一つのページの中に別のページを呼び出すというものです。
まぁ利点を一言でいうなれば、「動作が軽い」ってことですね。

インラインフレームを使用すると呼び出すページによってはスクロールバーが表示されるのでその分余計な横幅を取ってしまうためあんま使いたくないんですけどね＾＾
まぁ範囲を余分にとってスクロールしないように（スクロールバーも表示させない）すればいいんですけどね＾＾

CSSでの擬似フレームがうまくGMSに使えなければインラインフレームも考えてみます。
まぁ人によって使い道が違うので数タイプ用意するのが一番いいんでしょうけどね。

前回WEB関連のカテゴリを追加したので書いてみました＾＾
（本音はMMOネタがないだけだけどｗｗｗ）

まぁ興味のある人は調べてみてくださいｗ
（全てを説明するととんでもなく長い日記になっちゃうのでｗ）

ほいじゃ今日はこんなところで＾＾
またなにかあれば書きます。

(=ﾟωﾟ)ﾉｼﾞｬ､ﾏﾀ!!