七鍵@楽天

PR

×

コメント新着

k.kyouka @ すきやき占い 『しいたけ』の重要度27% 『しいたけ』…
なな@ Re:迷っています(11/01) レオ がいいですよ☆★
マロン@ かわいい キュート
foolish☆foo @ Re[1]:お久しぶりです。(07/15) >実演を踏まえてテストをしておりました…

バックナンバー

Oct , 2026
Sep , 2026
Aug , 2026

フリーページ

タグ辞書【A】


タグ辞書【ABBR】


タグ辞書【ACRONYM】


タグ辞書【ADDRESS】


タグ辞書【APPLET】


タグ辞書【AREA】


タグ辞書【B】


タグ辞書【BASE】


タグ辞書【BASEFONT】


タグ辞書【BDO】


タグ辞書【BGSOUND】


タグ辞書【BIG】


タグ辞書【BLINK】


タグ辞書【BLOCKQU…】


タグ辞書【BODY】


タグ辞書【BR】


タグ辞書【BUTTON】


タグ辞書【CENTER】


タグ辞書【CITE】


タグ辞書【CODE】


タグ辞書【COL】


タグ辞書【COLGROUP】


タグ辞書【COMMENT】


タグ辞書【CAPTION】


タグ辞書【DD】


タグ辞書【DEL】


タグ辞書【DFN】


タグ辞書【DIR】


タグ辞書【DIV】


タグ辞書【DL】


タグ辞書【DT】


タグ辞書【EM】


タグ辞書【EMBED】


タグ辞書【FIELDSET】


タグ辞書【FONT】


タグ辞書【FORM】


タグ辞書【FRAME】


タグ辞書【FRAMESET】


タグ辞書【H】


タグ辞書【HEAD】


タグ辞書【HR】


タグ辞書【HTML】


タグ辞書【I】


タグ辞書【IFRAME】


タグ辞書【ILAYER】


タグ辞書【IMG】


タグ辞書【INPUT】


タグ辞書【INS】


タグ辞書【ISINDEX】


タグ辞書【KBD】


タグ辞書【LABEL】


タグ辞書【LAYER】


タグ辞書【LEGEND】


タグ辞書【LI】


タグ辞書【LINK】


タグ辞書【LISTING】


タグ辞書【MAP】


タグ辞書【MARQUEE】


タグ辞書【MENU】


タグ辞書【META】


タグ辞書【MULTICOL】


タグ辞書【NOBR】


タグ辞書【NOEMBED】


タグ辞書【NOFRAMES】


タグ辞書【NOLAYER】


タグ辞書【NOSCRIPT】


タグ辞書【OBJECT】


タグ辞書【OL】


タグ辞書【OPTGROUP】


タグ辞書【OPTION】


タグ辞書【P】


タグ辞書【PARAM】


タグ辞書【PLAINTEXT】


タグ辞書【PRE】


タグ辞書【Q】


タグ辞書【RB】


タグ辞書【RP】


タグ辞書【RT】


タグ辞書【RUBY】


タグ辞書【S】


タグ辞書【SAMP】


タグ辞書【SCRIPT】


タグ辞書【SELECT】


タグ辞書【SMALL】


タグ辞書【SPACER】


タグ辞書【SPAN】


タグ辞書【STRIKE】


タグ辞書【STRONG】


タグ辞書【STYLE】


タグ辞書【SUB】


タグ辞書【SUP】


タグ辞書【TABLE】


タグ辞書【TBODY】


タグ辞書【TD】


タグ辞書【TEXTAREA】


タグ辞書【TFOOT】


タグ辞書【TH】


タグ辞書【THEAD】


タグ辞書【TITLE】


タグ辞書【TR】


タグ辞書【TT】


タグ辞書【U】


タグ辞書【UL】


タグ辞書【VAR】


タグ辞書【WBR】


タグ辞書【XMP】


タグ辞書【コメントアウト】


タグ辞書【!DOCTYPE】


piyo


サンプル


HP作成のためのコラム


スタイルシートをゼロからお勉強


HTMLタグに挑戦


Aug 20, 2004
XML
カテゴリ: カテゴリ未分類
IFRAMEタグってご存知ですか?
インラインフレームと呼ばれ、
Webページの中に更にWebページを埋め込むために使われる技術のことです。
よくわかりませんね(´・ω・`)
ってなわけで、例をみてみましょう(笑

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

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

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

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

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

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

</p>

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

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

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

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

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

表示結果)


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



この例では、幅170、高さ170の領域を確保したことになります。
そして「border:solid 1px #9999ff;」とすることにより、境界線の指定を行っていることとなります。
この記述は何回も登場しましたよね(〃⌒▽⌒)
幅1の一本線を「#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%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば(しかも本気で!)、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。



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

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

では、またあしたー(゚▽^*)ノ⌒☆





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

最終更新日  Aug 20, 2004 11:36:15 PM
コメント(15) | コメントを書く


■コメント

お名前
タイトル
メッセージ
画像認証
上の画像で表示されている数字を入力して下さい。


利用規約 に同意してコメントを
※コメントに関するよくある質問は、 こちら をご確認ください。


おはようございます  
ゆりん☆  さん
毎日、お勉強になります。
頭がよくなりそうな気がします。(気のせい?)

imageの替わりに、bgcolorを指定する事も出来るんですね。
そういう時は、
<p style="width:170px;height:170px;overflow:scroll;border:solid 1px #9999ff;" ココに入れる?>
bgcolor=#f5f5dc みたいに・・・・?



(Aug 21, 2004 08:17:29 AM)

おはようございます  
な~~る  さん
いつも大変初心者でも分かりやすく書いてくださるので、参考にさせていただいております。
例えば、楽天のHPの表紙って標準であるもの以外を使いたい場合はどのようにしたらよいのでしょうか?良ければ教えてください。 (Aug 21, 2004 11:32:36 AM)

Re:おはようございます(08/20)  
#七鍵  さん
ゆりん☆さん

いらっしゃいませー(〃⌒▽⌒)
残念ながら・・・
「P」タグには「bgcolor」使えないんですよ(´・ω・`)
ってなわけでこいつもスタイルシートで指定します。

<p style="width:170px;height:170px;overflow:scroll;border:solid 1px #9999ff;background-color:#f5f5dc;">

みたいな感じですよ(〃⌒▽⌒)


(Aug 21, 2004 12:24:44 PM)

Re:おはようございます(08/20)  
#七鍵  さん
な~~るさん

いらっしゃいませー(〃⌒▽⌒)
どのようなことをしたいかにもよりますが・・・
楽天の表紙はどれも洗練されたスタイルで(笑
標準のまま使われるのが一番だと思いますよ。
よく標準以外のスタイルで(無理やり)表紙を作っている方をみられますが・・・
多くの場合見にくく、IE以外のブラウザでは大きくデザインがくずれ・・・
いいこと無いですよ(´・ω・`)

まぁ、どうしてもってことでしたら
表示項目の設定から自由欄以外を全て非表示にし、
そして自由欄で自由な設定を行えば・・・
どのような表示方法でも行うことができますよー(〃⌒▽⌒)

(Aug 21, 2004 12:35:41 PM)

今日は頑張って  
RainbowAngel  さん
最後まで読んでみた~よ♪
でも頭が働いてないので理解はしてません(´・ω・`)

本もね、面白そうなのしか読めないのよw
「感覚的」なの以外は頭に入ってこなくって…
ふふふ(´・ω・`)

もうすぐね、新しい歌詞が出来そうな予感♪
出来たらUpするので楽しみにしててねーヽ(*⌒∇⌒*)ノ


(Aug 21, 2004 09:16:20 PM)

Re[1]:おはようございます(08/20)  
な~~る  さん
#七鍵さん
>な~~るさん
>
>いらっしゃいませー(〃⌒▽⌒)
>どのようなことをしたいかにもよりますが・・・
>楽天の表紙はどれも洗練されたスタイルで(笑
>標準のまま使われるのが一番だと思いますよ。
>よく標準以外のスタイルで(無理やり)表紙を作っている方をみられますが・・・
>多くの場合見にくく、IE以外のブラウザでは大きくデザインがくずれ・・・
>いいこと無いですよ(´・ω・`)
>
>まぁ、どうしてもってことでしたら
>表示項目の設定から自由欄以外を全て非表示にし、
>そして自由欄で自由な設定を行えば・・・
>どのような表示方法でも行うことができますよー(〃⌒▽⌒)
-----
なるほど~~~。そうだったのかっ!!ありがとう御座います。
そして、又もやお聞きしますと字を縦に表示したい場合は、どのようにしたらよいのでしょう~~か??ぜひ、ご伝授お願い致します。(^^;)ゞ (Aug 22, 2004 12:28:46 AM)

Re[2]:おはようございます(08/20)  
#七鍵  さん
な~~るさん

いらっしゃいませー(〃⌒▽⌒)
字を縦書きですね?
本日の日記に書かせてもらいます(笑
少々お待ちくださいね(〃⌒▽⌒)

(Aug 22, 2004 02:10:29 AM)

Re:今日は頑張って(08/20)  
#七鍵  さん
RainbowAngelさん

HPはためしに作ってみるのが一番よ(〃⌒▽⌒)
あ、これおもしろそう
って思ったら即自分のページに適用
じゃないといつまで経っても覚えれないよー

詩まだできてなかったね(笑
また見に行くね(゚▽^*)ノ⌒☆

(Aug 22, 2004 02:56:11 AM)

Re:タグを覚えよう【第14回目】 - 楽天で使えるIFRAMEもどき(08/20)  
まなな♪  さん
こんにちは(*^^*)
はじめまして♪

ランダムで飛んできたらちょうど悩んでいたこのスクロールのがありましたので
足が止まってしまい、お勉強させていただきました(*^-^*)>"

いきなり来て早速質問で図々しく申し訳ございません(^^;)

背景はここの楽天の画像倉庫に一旦登録しないといけないのでしょうか?
うまく貼れないのです・・・(x_x;)

本当に図々しくてすみませんm(_ _)m
(Feb 20, 2005 05:52:38 PM)

Re[1]:タグを覚えよう【第14回目】 - 楽天で使えるIFRAMEもどき(08/20)  
#七鍵  さん
まなな♪さん

こんにちは、はじめましてm(_ _)m

楽天で画像を表示する際には画像倉庫にいったん画像をアップロードし、
その画像を日記やフリーページで表示する
といった流れになります。
登録の仕方は分かりますよね?

http://plaza.rakuten.co.jp/hacdic/diary/200408100000/

の辺りが参考になると思います(〃⌒▽⌒)
図図しいなどおっしゃらず、じゃんじゃん質問下さいね(゚▽^*)ノ⌒☆

(Feb 20, 2005 06:26:58 PM)

すごいです!  
熟子  さん
今まで、<P>タグなんて、そう重要視していなかったのに、IFRAMEに変わってこんなことが出来るなんて、驚きました。
ぜひ、楽天で使ってみようと思います。 (Mar 4, 2005 02:17:19 PM)

初めまして・・・  
 色々、読ませていただきました~。知らない事ばかりだし・・・とても勉強になりました☆
これからもヨロシクお願い致します。

 いきなりの質問で申し訳ないのですが、1つお聞きしても宜しいですか?
早速、上のようなインラインフレームもどき(笑)を作成する事が出来たのですが・・・その枠の横に別の画像をUPしたいのですが、下に行ってしまいます・・・横に画像UPは可能でしょうか?教えて頂けたら嬉しいです! (Mar 6, 2005 05:05:11 PM)

Re:初めまして・・・(08/20)  
#七鍵  さん
めぐ。はは♪さん

いらっしゃいませ、はじめましてm(_ _)m

例としまして本日の日記で説明させてもらいました。
もちろん画像では…

文字→<img src~>なんて記述に変更すればできますよ(〃⌒▽⌒)
参考にして下さい。

(Mar 6, 2005 06:31:56 PM)

Re[1]:初めまして・・・(08/20)  
 (*・0・*)ワオ~早速のお返事ありがとうございますm(_ _)m すごく感動しました!しかも・・・日記に書いて頂けるなんて。今、見ましたらとても分かりやすくて感動致しました。今日は時間がないので、出来ないのですが(かなり残念です)・・・時間が出来ましたら早速、使わせて頂きます♪本当に、ありがとうございました!
 これからもヨロシクお願い致します。 (Mar 6, 2005 10:39:40 PM)

Re[2]:初めまして・・・(08/20)  
#七鍵  さん
めぐ。はは♪さん

いらっしゃいませ(〃⌒▽⌒)

こちらこそありがとうですm(_ _)m
これからも宜しくお願いしますね。
ネタ振りの方も( ̄▽ ̄人)

(Mar 8, 2005 12:59:20 AM)

【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! -- / --
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
X

© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: