- ベストアンサー
iframe？をCSSで作成することは可能でしょうか？
現在ホームページを作成していまして、iframeというのでしょうか？ 更新情報などで使われているスクロールできる部分なんですが、ソースを見ると「iframe」などのタグは書かれていなく、divが指定されているのみでした・・・ CSSで作成しているのできればCSSで作成したいと考えているのですが、作成することは可能でしょうか？ どうかよろしくお願いいたします。
- HTML
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
例を書いてみましたので参考になさってください。 CSS記入例 .title{/*更新情報のタイトル部分*/ width: 250px;/*タイトルの幅*/ color: #000000;/*タイトルの文字色*/ font-size: 11pt;/*タイトルの文字の大きさ*/ text-align: center;/*タイトルの文字の大きさ*/ font-family: Arial,sans-serif;/*文字の種類（任意）*/ padding: 0.3em 0 0.3em;/*文字周りの上下に余白を指定*/ } .newbox{/*更新情報の内容*/ overflow: auto; width: 250px;/*更新情報の幅*/ height: 150px;/*更新情報の高さ*/ color: #000000;/*更新情報の文字色*/ font-size: 10pt;/*更新情報の文字の大きさ*/ background-color: #ffffff;/*更新情報の背景色*/ border: solid 1px #000000;/*枠線の色*/ padding: 0.5em;/*文字周りの上下左右に余白を指定*/ scrollbar-3dlight-color: #7f7f7f;/*スクロールの色（ここから）*/ scrollbar-arrow-color: #555555; scrollbar-darkshadow-color: #e2e2e2; scrollbar-face-color: #ffffff; scrollbar-highlight-color:#e2e2e2; scrollbar-shadow-color: #7f7f7f; scrollbar-track-color: #ffffff;/*スクロールの色（ここからまで）*/ } html記入例 <body> <div class="title">++++ 更新情報 ++++</div> <div class="newbox"> <p>■ああああああああああ（2007.11.11）</p> <p>■いいいいいいいいいい（2007.11.10）</p> <p>■うううううううううう（2007.11.9）</p> <p>■ええええええええええ（2007.11.8）</p> <p>■おおおおおおおおおお（2007.11.7）</p> </div> </body> 「更新情報のタイトル部分」については不必要であれば削除してください。 その際にはhtml部分の「<div class="title">++++ 更新情報 ++++</div>」も削除してください。 使用されるのであれば、タイトルの幅と更新情報の幅は一緒にしてください。 また「幅」や「更新情報の高さ」も任意で変更してください。 但し、#1さんが書かれていらっしゃる通り文字が高さをオーバーしないとスクロールは発生しません。 その他「文字色」「文字の大きさ」「背景の色」「枠線の色」「文字周りの余白」についても 任意で変更してください。「文字の種類」はあくまでも任意です。 「スクロールの色」が必要であれば記入なさってください。（色は任意で変更してください） IEとFirefoxの両方できちんと表示されるかどうか確認済みです。
その他の回答 (3)
#3です。一部記述間違いがありましたので訂正いたします。 .title{/*更新情報のタイトル部分*/ width: 250px;/*タイトルの幅*/ color: #000000;/*タイトルの文字色*/ font-size: 11pt;/*タイトルの文字の大きさ*/ text-align: center;/*タイトルの文字をセンタリング*/ ←ここが間違っていました。 font-family: Arial,sans-serif;/*文字の種類（任意）*/ padding: 0.3em 0 0.3em;/*文字周りの上下に余白を指定*/ }
- thila
- ベストアンサー率73% (45/61)
あぁ、すみません。 >文字が幅（高さ）をオーバーしないとスクロールは発生しません。 に関しては、autoを指定した際の挙動でした。 いつもautoを使っているもので、つい思い込みで…失礼致しました； DIVに限らずブロック要素であれば、この指定は可能です。 ブロック要素というのは簡単に言ってしまえば、閉じタグの後ろにBRを挿入しなくても勝手に改行が挿入されるタイプのもののことをさします。 ※ブロック要素とインライン要素について http://www.tagindex.com/html_tag/basic/blo_element.html Pもブロック要素になりますので、スクロールを発生させることは可能です。 因みにIE限定でこんな指定もあります。 http://www.tagindex.com/stylesheet/box/overflow2.html
- thila
- ベストアンサー率73% (45/61)
overflowのことだと思います。 文字が、指定した領域よりはみ出してしまった場合の処理方法の指定です。 ※幅・高さを指定していないと思ったような挙動になりません。 ※文字が幅（高さ）をオーバーしないとスクロールは発生しません。 overflowに関しては、こちらで丁寧に解説されていますので、目を通して見てください。 http://www.tagindex.com/stylesheet/box/overflow.html
関連するQ&A
- CSSを使ってのiframe
xhtmlとcssでhpを作ってます。 iframeをcssで表現したいんですが、どうしてもフレーム枠に１pxほどの枠が出てしまいますので、それを無くしたいのと、スクロールバーが出ないようにしたいのですが、どのような書き方がベストでしょうか？ どなたかアドバイスをお願いします。 現状では以下の書き方をしております。 -----css----- #top{ float:left; text-align:left; width:300px; } #top_iframe{ overflow:auto; width:300px; height:150px;} -----html----- <div id="top"> <iframe src="xxx.html" title="top">更新</iframe> </div> 希望としては現状の幅300px 高さ150pxで、枠が無くスクロールバーもでないようにしたいのですが・・・ <<当方初心者なので、お返事頂けるさいにはcssとhtmlのタグでご回答願います。>>
- ベストアンサー
- HTML
- iframeの機能をcss(divタグ)で表現する方法
タイトル通りです。 cssでiframeの機能を使いたいです。 iframeのフレーム内にフレーム外からのリンクを表示する機能なんですが、iframeタグを使わずcssで代替した時の書き方がわかりません。 -----------------------ソース------------------------------ css----------- div.iframe { padding:10px; width:300px; height:200px; border:solid 1px pink; overflow:scroll; } <div class="iframe"> 内容 </div> ----------------------------------------------------------- わかる人がいたら教えて頂きたいです。 よろしくお願いします。
- ベストアンサー
- HTML
- iframeを使わずに…
いつもお世話になっております。 毎度毎度申し訳ありませんが、お知恵を貸してください。 今ネットショップを作ろうとサイト作成しています。 トップページ右上、一部のスペースに、管理人の紹介や更新情報などを載せたいと考えています。 最初、ここにはiframeを使おうと考えていました。 トップページ右上の小さなスペースを利用して、管理人の紹介や更新情報などのページを、iframeを使って切り替えていこう、と。 でもframeやiframeはSEO的にあまりオススメされない方法だと知り、iframeを使わずに同様のことが出来ないかと調べていました。 でも、iframeを使わずにスクロールバーを出す方法や、SSIを利用したリンク管理の効率化などの情報はあったのですが、埋め込んだページだけをリンクで切り替える、という私の探す情報は見つかりませんでした。 そこで質問なのですが、このようなことはiframeを使わなければ出来ないことなのでしょうか？ 以前、CSSで似たようなことをしていたサイトがあるという話しを聞いたことがあるのですが、探し出すことが出来ませんでした。 もしよろしければ、アドバイスを御願い致します。
- ベストアンサー
- CSS
- iframeの横スクロール
iframeを使ってほかのページを表示させているのですが、 どうしても横スクロールバーが出てしまうのでcssのbody要素に 「overflow-x: hidden;」と入れました。 確かにiframeの横スクロールバーは消えましたが、ページの横スクロールも消えてしまいました。 div idでiframeを囲ってcssでその場所だけに「overflow-x: hidden;」を入れると今度は横スクロールバーが消えません。。 色々調べてみたのですが同じような人がいないようで； 詳しい方教えていただけないでしょうか。 （説明がへたくそですみませんm(_ _)m）
- ベストアンサー
- その他([技術者向] コンピューター)
- FrameSet後のiframeで
ホームページ初心者です。 よろしくお願いします。 HTMLエディタを使い記述していますが、 画面をFrameタグを使い、いくつかに分割しました。 そのひとつのFrameの中に「iframe」タグを使い、地図データを表示させようとしています。 ソースのパス指定を絶対パス、相対パス双方試しましたが、iframe内が真っ白な状態です。ブラウザは「ページが表示されました。」と返してきています。 オフラインの状態でframeタグを宣言しているhtmlをとばし、直接iframeを宣言しているhtmlを見ると、ちゃんと表示されます。 「Frame」「iFrame」タグを使った場合に、パス指定等何か別の決まりがあるのでしょうか。
- ベストアンサー
- HTML
- フレームの外枠を消したい HTML、CSS
<iframe></iframe> このタグを使ってページ内にフレームを作成しました。 このフレームの外枠(ボーダー？)を消したいのですが・・・。 タグ内にborder=0を入れ <iframe border=0></iframe> としましたが、外枠は消えません。 CSSも少しならわかるので、CSSを使用する方法でもいいのですが・・・。どちらにしろHTMLで作られている外枠部分を消す必要がありますよね？考え方が間違っていたらおかしなこと言ってるのかもしれません。 とにかく<iframe></iframe>タグで作成したフレームの外枠を消したい。ということで質問させていただきます。わかる方どうぞよろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- CSSについて
CSSについて質問させてください。 CSSをタグの中に直接書き込む場合 <div style="color:#ffa500; font-size:20pt; font-weight:bold; text-decoration:underline;"> このような場合のstyle="部分は、styleタグと呼んで いいのでしょうか？ divタグの中に記述しているので、styleプロパティと 呼ぶのでしょうか？ CSSのリファレンスにはstyleプロパティはありません。 ということは、やっぱりdivタグのstyleプロパティで CSSを指定していると考えるのでしょうか？
- 締切済み
- HTML
- cssについて
ホームページでcssにしたいページがあります。そこで判らない点がありまして皆さんの教えを乞いたいと思い質問した次第です。 1.cssを作成したページはcssのフォルダを作って、その中にcssのソース(HTML)を格納し、サーバーに転送するそうなんですが、これはページ全体のソースのことですか。cssの部分だけですか？ 2.cssのページはバック(壁紙)が“白”と“緑”のページがありますが、この場合はcssのフォルダを別々に作るのですか？ 3.cssフォルダによってページが一括管理出来て更新が簡単になるとのことですが、ページ全体をcssにした方が管理しやすいですか？ 4.cssのソースはホームページを作ってるソフト以外のエディタにコピーしても宜しいですか？ Dreamweaver3で作成してますが、以外とアバウトなソフトなので、細かい設定はソフトの機能に頼らず、ソフトのタグをいじっています。なんせ初心者です。判りやすく解説お願いします。
- ベストアンサー
- ホームページ作成ソフト
- iframeタグで左端があいてしまう。
以前質問させていただいたのですが人の少ない時間でしたので、再度させていただきます。 ホームページ作成に関してはまるっきり独学なので、もしかしたらくだらないことなのかもしれませんが、二つほど質問させていただきます。 まずiframeタグに関してです。 ifameタグでhspace=0とすれば、ブラウザを小さくしたときに左端に隙間ができないと思ったのですが、どうしても2ミリぐらいの隙間があいてしまいます。タグの部分はこんな感じです。 <iframe height="800" width="600" frameborder="0" src="＊＊.html" align="center" hspace=0> もう少し細かい情報が必要でしたら、その都度補足いたします。 あともう一つですが、align="center"と指定していてもGecko系だと中央に表示されないのですが(IEは大丈夫でした)、これは仕様なのでしょうか？ 一応今はcenterタグでなんとかしてはいるのですが。 少しでもわかることがあったら、どんなことでも良いので教えていただけたら幸いです。よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
お礼
ありがとうございます。 overflowですか。はじめて聞きました。勉強になります！ ちなみに参考にしているサイトは文字のみですべて一行ではみ出してるようすはなかったのですが・・・ すべて・・・ ■ああああああああああ（2007.11.11） で<p>で括ってありました。 いろいろ勉強してみます。 ありがとうございました。