前のページでは、インラインフレームのお話をしました。
こんなヤツ↓
インラインフレームでは、この枠内に別のページを表示させています。
そのため、利点と欠点があります。
枠内に表示されるのは、別に作ったページです。リンクタグなどで、その枠内にさらに他のページを表示させるように切り替えることも簡単です。つまりその枠内にいろいろなページを表示させることが出来るのは利点ですね。
でも、逆に、その枠内に表示させるのに、わざわざ別のページを作らなければいけません。
もし、枠内の表示内容を切り替える必要もなく、また、わざわざ別のページを作るほどのこともない簡単な内容を表示させたい時には、かえって面倒です。
と言うわけで、今回は別のページを作らずに、つまり一つのページで、このインラインフレームの様な表示をする方法のお話です。
で・・早速ですが、↓これはいったい何だろう？（・・って、そんなこと聞かれても困る？）
ページの中に枠を作ってこのように表示できます。
たとえば、更新履歴などをこの枠内に表示したり、
長い文章を、狭い枠内の中に表示したり等々、
いろいろ使えます。
枠内に収まりきらない部分があれば、
スクロール出来るようにもなります。
ところで、関係ないけど、↓これは私が描いた絵。
われながら、うまい！
（*￣m￣)ぷっ！
実は、これはインラインフレームの様でインラインフレームではありません。でも、枠があってその中の内容はスクロールバーでスクロールできます。
この枠とスクロールバーは、インラインフレームではなく、ｄｉｖタグとスタイルシートで作っています。
そして、この四角い枠の中に表示されているのは、別に作ったページではなく、今見てくださっているこのページに書かれた内容です。
そして、これがそのソースです。
<!--これが枠となるｄｉｖタグ、ちょいと長いので改行して書きました。-->
<div
style=" border-style:inset;
border-width:2px;
width:260px;
height:180px;
overflow:scroll;
font-family:'ＭＳ Ｐゴシック';
font-size:12pt;
color:#000000;
line-height:1.1;
background:#ffffdd">
<!-- 上の赤い字のところがスクロールバー付きの枠を作っている部分です。-->
<!-- 上の青い字のところは、このｄｉｖタグの中の文字と背景色の設定です。
つまり、枠内に表示される文字や背景色の設定です。-->
<!--この茶色の文字色の部分が、枠の中に表示される内容です。-->
<span style="background:#00ff00;
font-family:'ＭＳ Ｐゴシック';
font-size:17pt;
color:#800000">
ページの中に枠を作ってこのように表示できます。
</span>
<br>
<br>
たとえば、更新履歴などをこの枠内に表示したり、<br>
長い文章を、狭い枠内の中に表示したり等々、<br>
いろいろ使えます。<br>
<br>
枠内に収まりきらない部分があれば、<br>
スクロール出来るようにもなります。<br>
<br>
ところで、関係ないけど、↓これは私が描いた絵。<br>
<img src="../hpmake/pic/takis.jpg" width="276" height="223" border="0">
<br>
<br>
われながら、うまい！<br>
（*￣m￣)ぷっ！
</div>
|
基本的な構造は、
<div>茶色で書いた部分</div>となっています。
そして、
<div style="ここに枠の幅、高さ、枠線、はみ出す部分の設定などのスタイルシート">茶色で書いた部分</div>となっていて、そのスタイルシートの部分が、このまるでインラインフレームの様な枠を作っています。
border-style:inset;→枠線の形を決めています。
これについては別の機会に詳しくやります。
border-width:2px;→枠線の太さです。これも別の機会に詳しく！
width:260px;と
height:180px;→これは重要！枠の横幅と高さを決めています。
この設定によって、横幅２６０ピクセル、高さ１８０ピクセルの枠となります。
これを設定しなければ、ＩＥの場合、横幅は自動的に最大の幅になりますし、表示する中身の大きさに合わせて、高さも広がってしまうので、”収まりきらない部分”と言うのがなくなっちゃいます。
そうすると、”収まりきらない部分”をどうするか？という次の
overflowが、無意味になります。
overflow:scroll;→これは、設定した横幅と高さに収まりきらない部分については、”スクロールバーを表示する”と設定しているのです。
以上で、四角い枠の線と横幅、高さ、そしてスクロールバーが設定されます。
すると・・なんとインラインフレームの様ではありませんか！
◆
そして、この
overflowについて、もう少し詳しくお話ししましょう。
先述の様に、これは”横幅と高さを設定した四角い範囲に収まり切らない部分”つまり、はみ出しちゃう部分をどう扱うか？という設定のためのスタイルシートです。
それついては何通りかの設定があります。
- overflow:scroll
- もちろん言うまでもなく、スクロールバーを表示してスクロールできるようにすると言うものです。もし、中身がはみ出さないときでもスクロールバーが表示されます。
- overflow:auto
- これは、中身が四角い領域からはみ出すとスクロールバーが出て、はみ出さないときは出ません。
- overflow:hidden
- はみ出した部分は表示されません。スクロールバーも表示されません。
- overflow:visible
- はみ出した部分があると、四角い領域を自動的に広げます。つまり設定した横幅、高さが広がって中身がすべて表示されます。
最後に、参考までにそれぞれの表示例を！
overflow:scrollの場合
ページの中に枠を作ってこのように表示できます。
この領域は width:260px;height:180pxに設定しています。
ところで、関係ないけど、↓これは私が描いた絵。
|
ページの中に枠を作ってこのように表示できます。
この領域は width:350px;height:380pxに設定しています。
ところで、関係ないけど、↓これは私が描いた絵。
|
overflow:autoの場合
ページの中に枠を作ってこのように表示できます。
この領域は width:260px;height:180pxに設定しています。
ところで、関係ないけど、↓これは私が描いた絵。
|
ページの中に枠を作ってこのように表示できます。
この領域は width:350px;height:380pxに設定しています。
ところで、関係ないけど、↓これは私が描いた絵。
|
overflow:hiddenの場合
ページの中に枠を作ってこのように表示できます。
この領域は width:260px;height:180pxに設定しています。
ところで、関係ないけど、↓これは私が描いた絵。
|
ページの中に枠を作ってこのように表示できます。
この領域は width:350px;height:380pxに設定しています。
ところで、関係ないけど、↓これは私が描いた絵。
|
overflow:visibleの場合
ページの中に枠を作ってこのように表示できます。
この領域は width:260px;height:180pxに設定しています。
ところで、関係ないけど、↓これは私が描いた絵。
|
ページの中に枠を作ってこのように表示できます。
この領域は width:350px;height:380pxに設定しています。
ところで、関係ないけど、↓これは私が描いた絵。
|