七鍵＠楽天

コメント新着

うしまる＠ @ Re:タグを覚えよう【第１５回目】　-　中央寄せ表示の際の小技(08/21) タグの検索でぐぐってたらコチラに辿り着…

k.kyouka @ すきやき占い『しいたけ』の重要度27% 『しいたけ』…

なな@ Re:迷っています(11/01) レオ　がいいですよ☆★

マロン@ かわいいキュート

ｆｏｏｌｉｓｈ☆ｆｏｏ @ Re[1]:お久しぶりです。(07/15) ＞実演を踏まえてテストをしておりました…

バックナンバー

Dec , 2024
Nov , 2024

Oct , 2024

フリーページ

HTMLタグに挑戦

< 新しい記事

新着記事一覧(全310件)

過去の記事 >

Aug 20, 2004

タグを覚えよう【第１４回目】　-　楽天で使えるIFRAMEもどき

(15)

テーマ：タグに挑戦！(102)

カテゴリ：カテゴリ未分類

IFRAMEタグってご存知ですか？

Webページの中に更にWebページを埋め込むために使われる技術のことです。
よくわかりませんね(´･ω･`)
ってなわけで、例をみてみましょう（笑

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

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

ぜひ使い方をマスターしてください。

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

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


HTML タグをいっしょに覚えましょ(〃⌒▽⌒)
ここに書いてあるタグは自由にこぴぺして使って下さいね。
HP作成で分からないことがあったら掲示板の方で気軽に聞いて下さい(ﾟ▽^*)ﾉ⌒☆



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

そこで「P」タグでまずひとかたまりの段落であることを定義し、
ついでにそのかたまりを表示するための領域（Webページ上のスペース）を確保します。

ただ、「overflow:scroll」がスタイルに指定された場合は別で、
範囲にスクロールバーを表示してくれるのです(￣▽￣人)
そうしたら・・・あら不思議。
インラインフレームもどきのできあがり(〃⌒▽⌒)
となるわけですねー。

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

例）

文章（省略）


表示結果）

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

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

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

例）

文章（省略）


表示結果）

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

例）

文章（省略）


表示結果）

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

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

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

お気に入りの記事を「いいね！」で応援しよう