七鍵＠楽天

IFRAMEタグってご存知ですか？
インラインフレームと呼ばれ、
Webページの中に更にWebページを埋め込むために使われる技術のことです。
よくわかりませんね(´･ω･`)
ってなわけで、例をみてみましょう（笑

インラインフレーム解説ページ

ただ、このインラインフレームは残念ながら「楽天」内では使うことができません。
ってなわけで、今回は「楽天」内で使用できる「インラインフレームもどき」を紹介します(〃⌒▽⌒)
どんなもの？って方は私のTOPページを見てください。
スクロールできる小窓がありますよね？
縦長になりすぎるメニューや長い文章にはもってこいですよね(￣▽￣人)
ぜひ使い方をマスターしてください。

ささーっとタグの例だけ挙げても良いのですが・・・
それでは当サイトの意味もなくなるというもの（笑
まずは解説をしておきましょう。
特に興味の無い方は読み飛ばしてください。

このインラインフレームもどきですが、「P」タグと呼ばれるものを使用します。
この「P」タグですが、

<p>
HTML タグをいっしょに覚えましょ(〃⌒▽⌒)
ここに書いてあるタグは自由にこぴぺして使って下さいね。
HP作成で分からないことがあったら掲示板の方で気軽に聞いて下さい(ﾟ▽^*)ﾉ⌒☆
上級者様向けの HD 本館 もどうぞよろしくm（_ _）m
</p>

のように使用し、囲まれた範囲が一つの段落であることを示します。
段落であることを示し、囲まれた範囲の前後に改行を挿入することが「P」タグの機能となっています。

そこで「P」タグでまずひとかたまりの段落であることを定義し、
ついでにそのかたまりを表示するための領域（Webページ上のスペース）を確保します。
通常インターネットエクスプローラは、その確保した領域に中身が収まりきらなかった場合は中身にあわせて領域を広げます。
ただ、「overflow:scroll」がスタイルに指定された場合は別で、
範囲にスクロールバーを表示してくれるのです(￣▽￣人)
そうしたら・・・あら不思議。
インラインフレームもどきのできあがり(〃⌒▽⌒)
となるわけですねー。

では実際に例を見てみましょう。

例）
<p style="width:170px;height:170px;overflow:scroll;border:solid 1px #9999ff;">
文章（省略）
</p>

表示結果）

うちのハッカーは見積もりを出してくれません。
あなたのとこのハッカーは、まだその問題の困難さの程度を解析しきれていません。大部分の労働者と違い、ハッカーは問題を確かに理解したと納得できるまで、見積もりを出すことに大きな抵抗を示すでしょう。時には、理解しようとしている間に問題を解いてしまうことさえありえます。
優秀な技術者は、決して95%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。

この例では、幅１７０、高さ１７０の領域を確保したことになります。
そして「border:solid 1px #9999ff;」とすることにより、境界線の指定を行っていることとなります。
この記述は何回も登場しましたよね(〃⌒▽⌒)
幅１の一本線を「＃9999ff」という色で引いてください、ってことでしたよね。

こうすることにより、インラインフレームもどきが完成するというわけです。
次はこれに背景画像をつけてみましょう(￣▽￣人)

例）
<p style="background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg);width:170px;height:170px;overflow:scroll;border:solid 1px #9999ff;background-attachment:fixed;">
文章（省略）
</p>

表示結果）

うちのハッカーは見積もりを出してくれません。
あなたのとこのハッカーは、まだその問題の困難さの程度を解析しきれていません。大部分の労働者と違い、ハッカーは問題を確かに理解したと納得できるまで、見積もりを出すことに大きな抵抗を示すでしょう。時には、理解しようとしている間に問題を解いてしまうことさえありえます。
優秀な技術者は、決して95%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。

あまり見たこと無いでしょ？（笑
こちらも使い方次第でいろいろとおもしろいことができると思います(￣▽￣人)
念のため解説を付け加えておきますね。
「background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg);」にて背景画像のURLを指定します。
そして、「background-attachment:fixed;」という記述で背景画像を固定し、スクロールとともに背景画像が動かないようにしています。
ということは・・・

例）
<p style="background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg);width:170px;height:170px;overflow:scroll;border:solid 1px #9999ff;">
文章（省略）
</p>

表示結果）

うちのハッカーは見積もりを出してくれません。
あなたのとこのハッカーは、まだその問題の困難さの程度を解析しきれていません。大部分の労働者と違い、ハッカーは問題を確かに理解したと納得できるまで、見積もりを出すことに大きな抵抗を示すでしょう。時には、理解しようとしている間に問題を解いてしまうことさえありえます。
優秀な技術者は、決して95%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。

のようにしたらスクロールと一緒に背景画像もスクロールする、ってことになりますね(〃⌒▽⌒)

以上、インラインフレームもどきでしたがいかがですか？
見た目複雑そうな記述ですが・・・
少しずつ意味を理解していけば簡単でしょ？
あとはこれをそのままこぴぺで使うも良し(〃⌒▽⌒)
改良を加えてオリジナルな使い方をあみだすも良し(〃⌒▽⌒)
がんばってくださいね(￣▽￣人)

では、またあしたー(ﾟ▽^*)ﾉ⌒☆