Entries


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-件のコメント

コメントの投稿

新規

※設定NGワードは『http』です

投稿した内容は管理者にだけ閲覧出来ます

-件のトラックバック

トラックバックURL
http://pugiemonn.blog6.fc2.com/tb.php/1036-1409ae24

CSSでiframeみたいなインラインフレームを作るには


2ch系のまとめブログを見ていると,ヘッダー部分に自分のブログのRSSを読み込む手法を多く見かけます.初めてみたときに,SEO的にうまい手法があったものだと感心したものです.

そのヘッダーのRSS読み込み部分は大抵インラインフレームのような作りになっていまして,フレーム内がスクロール可能になっています.パッと見でiframeを使ってやっているのかと思ったのですが,iframeを使っていないところがむしろ多くて驚きました.普通のdivタグにスタイルシートを指定すればできるんですね.

試しにやってみるとこんな感じです.

text

text

text

text

text

text

text

text




やり方は簡単です.heightを指定してい無い場合,テキストが増えると縦方向にdivのボックスが拡大してしまいます.なのでheightをまず指定してから,divのボックスにoverflowのautoを指定してあげるだけでiframeのようなインラインフレームが実現できました.
div {
width : 400px;
height : 150px ;
overflow : auto;
}

ここだとこんな感じでしょうか.
とても簡単ですね.
heightを指定しただけでoverflowを設定しないと,ボックス内の文字が下へ突き抜ける可能性があります.

0件のコメント

コメントの投稿

新規

※設定NGワードは『http』です

投稿した内容は管理者にだけ閲覧出来ます

0件のトラックバック

トラックバックURL
http://pugiemonn.blog6.fc2.com/tb.php/1036-1409ae24

Appendix

プロフィール

川崎修

  • Author:川崎修
  • インターネット大好き!
    調布周辺で自宅警備してます



    メール:pugiemonn@gmail.com
    skype:pugiemonn
    twilog:Twilog
    mixi:mixi
    facebook:facebook
My Profile by iddy
FC2ブログ

カレンダー

10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -

最近の記事

Twitter

コミュニティ

ブログ内検索

ブロとも申請フォーム

この人とブロともになる

Adsense

月別アーカイブ

はてぶ数

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。