ベストアンサー HTML超初心者です。CSSでOverflowをautoにして ifr 2010/06/28 17:12 HTML超初心者です。CSSでOverflowをautoにして iframeのようにスクロール出来るようにしているのですが、スクロールバーのある右端ギリギリまで文字がいってるので、スクロールバーの左に文字との余白を作りたいです。出来なくて困っています。 余白をつくることは可能でしょうか、アドバイスをお願い致します。 画像を拡大する みんなの回答 (2) 専門家の回答 質問者が選んだベストアンサー ベストアンサー rurino ベストアンサー率55% (38/68) 2010/06/28 17:37 回答No.1 できますよ。 overflow: auto; を掛けている要素に、一緒に padding-right を掛けてあげて下さい。 数値は好みで。単位はpxです。 質問者 お礼 2010/06/28 18:03 出来ました! ありがとうございます☆ 頑張って精進いたします! 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 その他の回答 (1) zeff ベストアンサー率69% (137/198) 2010/06/28 17:38 回答No.2 右のpaddingを取ればいいんじゃ無いですか。 <p style="width:100px;height:100px;overflow:auto;padding-right:20px;">HTML超初心者です。CSSでOverflowをautoにして iframeのようにスクロール出来るようにしているのですが、スクロールバーのある右端ギリギリまで文字がいってるので、スクロールバーの左に文字との余白を作りたいです。出来なくて困っています。余白をつくることは可能でしょうか、アドバイスをお願い致します。</p> 質問者 お礼 2010/06/28 18:04 ご回答ありがとうございます。 おかげさまで解決いたしました☆ 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 カテゴリ [技術者向] コンピュータープログラミング・開発HTML 関連するQ&A CSS)overflow,スクロールについて 独学でホームページをツクッテいる者です。 overflow:scroll;をするとIE以外でうまく表示できません。 Firefoxなどでは、BOXの中の文字がスクロールバーごとBOXの外(右側)に大きくずれてしまいます。 IEですと、きちんとBOXの中に文字も収まり、スクロールバーも表示されます。 ためしにoverflow:scroll;をCSSから消して更新すると、文字はBOXの中に収まります。 FirefoxでもBox内がずれずにスクロールされる方法はないでしょうか? CSSを使ってのiframe xhtmlとcssでhpを作ってます。 iframeをcssで表現したいんですが、どうしてもフレーム枠に1pxほどの枠が出てしまいますので、それを無くしたいのと、スクロールバーが出ないようにしたいのですが、どのような書き方がベストでしょうか? どなたかアドバイスをお願いします。 現状では以下の書き方をしております。 -----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のタグでご回答願います。>> Dreamweaverでoverflow画像の位置 DreamweacerCS3です。 表示フレーム幅(1000px)よりも長い画像(2050px)をcssにてoverflow: auto に設定して、はみ出ることなく収めています。 水平スクロールバーをスライドすれば画像を全幅にわたって動かすことができています。 ページを開いたときは常にこの画像はスクロールバーが左端に寄った状態になっていますが、常時見るのは反対の右側なのでスクロールバーを右端に初期設定したいのですが方法がわかりません。ご伝授ください。 cssのプロパティを見ると100くらいのパラメータがあり、それらしきもの(float)を変えてみるのですが思うようになりません。 現在設定しているのはビューウィンドウのサイズ:(1000px, 410px)、overflow:autoのみです。 ネットワークエンジニアとは?技術職の未来を考える OKWAVE コラム CSSでの擬似フレームでのフレームのスクロールバーのサイズについて CSSで擬似フレームとしてoverflowのautoなどを使う方法がありますが、 そこで出来たフレームの枠にスクロールバーがあり、このスクロールバーのサイズをウインドウサイズの大小に合わせて可変させる事はできるものなのでしょうか? 通常のiframeを使用したインラインフレームであれば、ウインドウサイズを大きくしたり小さくしたりするとそれに合わせてスクロールバーの大きさも変わるのですが、CSSでの擬似フレームの場合、それが出来るのかどうか知りたいです。 分かる方、いらっしゃいましたらお願いいたします! overflow:auto で改行させたくない ページ上にリストを載せています。 <DIV style="width:100%;height:65px;overflow:auto;"></div> これで、枠以上のデータがあれば上下のスクロールバーが出来ますよね。 左右についてなんですけど、枠幅以上にデータがあった場合、改行してしまいますよね。これを改行させないでそのまま画面上は非表示とは出来ないでしょうか? 200x/xx/xx 表題 内容がここに|つらつらと内容が続く ここまでは画面上に表示 ↑ここから先はソースを見れば表示 Iframeの利用は考えていません。SEO対策の為、そのページに文字情報を多く詰め込みたいと思っています。 方法があれば教えてください。 CSSについてです。 私は初心者で、HTMLはわかるのですが CSSが CSSについてです。 私は初心者で、HTMLはわかるのですが CSSがわかりません。 ページをたくさんつくってサイドメニューだけは、同じにしたいのでCSSでページの枠組みを作りたいです。どうぞよろしくお願い致します。 iframeの横スクロール iframeを使ってほかのページを表示させているのですが、 どうしても横スクロールバーが出てしまうのでcssのbody要素に 「overflow-x: hidden;」と入れました。 確かにiframeの横スクロールバーは消えましたが、ページの横スクロールも消えてしまいました。 div idでiframeを囲ってcssでその場所だけに「overflow-x: hidden;」を入れると今度は横スクロールバーが消えません。。 色々調べてみたのですが同じような人がいないようで; 詳しい方教えていただけないでしょうか。 (説明がへたくそですみませんm(_ _)m) overflow:auto; の記述で横スクロールバーが表示される gooブログでカスタムテンプレートを使用しています。 縦のみにスクロールバーをつけたくて 「overflow:auto;」 の記述をいれました。 Operaとfoxでは縦のみにスクロールバーが表示されます。 ですがIE6だけ、縦にも横にもスクロールバーが表示されます。 どうすれば、IE6でも縦のみのスクロールバー表示になりますか? overflowを使ってのスクロール CSSのoverflowを使って、ページの一部をスクロールさせたいのですが 完全に下までスクロールができません。 具体的には以下のソースの"div2"をスクロールさせたく、overflowのauto を使っているのですが、一番下までスクロールができません。 どのようにしたらよいか、ご指摘お願いいたします。 HTMLのソースは以下の通りです。 このままコピペしてもらえば動作を確認してもらえると思います。 どうかよろしくお願いいたします。 <html> <head> <style type="text/css"> body { overflow: hidden; } div { border: 1px solid black; } #div2 { height: 100%; overflow: auto; } </style> </head> <body> <div id="div1"></div><br> <div id="div2"></div> </body> <script type="text/javascript"> var text = ""; for (var i=0; i<10; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div1').innerHTML = text; for (var i=0; i<150; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div2').innerHTML = 'BEGIN<br>' + text + 'END'; </script> </html> overflow: auto; 要素内をスムーススクロール はじめまして、よろしくお願い致します。 メニューとなるボタンをいくつか配置し、それぞれのボタン押下時に、 『overflow: auto;』の疑似フレームにて表示している要素内を スムースにスクロール移動させることは可能でしょうか。 (よくある「ページトップへ」で、ページ内リンクをスムースにスクロールさせる動きを、疑似フレームを対象に行いたいです。) 下記ページの「Section Scroller」のような方法も考えたのですが、 http://sandbox.leigeber.com/contentslider/slider.html スクロールバーが表示される仕様で実現できればと考えております。 分かりにくい説明で、サンプルコードも提示できない形での質問になりましたが、よろしくお願い致します。 【CSS】IEでのoverflow使用時のスクロールバー overflow:auto;で疑似フレームを使用しています。 IEのみでスクロールバーが表示はされるのですが、 固定されてしまっていてスクロールが出来ません。 ここ数時間webで調べていたのですが、解決方法が分かりません。 解決方法はあるのでしょうか。 DIV 領域内でのオートスクロール 当方はプログラミングやJavascriptなどにはとても疎く、サンプルなどは色々あるのですが、どのように改良すれば良いのかわかりません。 HTMLでWEBのページを作成しているのですが、下記の条件があります。 ・表示領域が600×300 ・ブラウザ標準スクロールバー使用禁止 ・<iframe>使用禁止 <body> ~~~ <div style="overflow:hidden;"> ここの部分だけJavascriptでオートスクロール </div> ~~~ </body> 駄文で申し訳ないですが、どなたかご回答願います。 AIは使う人の年齢や市場にも影響する?人工知能の可能性 OKWAVE コラム overflow:scrollのスクロールバーのデザイン overflow:scrollのスクロールバーのデザイン 自分のHPで、あるリストを overflow:scroll にして、縦横指定して使っているんですが、その時のスクロールバーのデザインって変えられないのでしょうか。cssで、bodyに打ち込んでもダメ、そのリストのclassで指定してもダメでした。 どなたか分かる人があれば教えてください。 <div style="overflow">でこんなことは出来ませんか? <div style="overflow: auto; height: **px;width:**px;"> というタグについて教えてください。 <div>で囲まれた内容が、height: **pxに満たない場合、 スクロールバーは出ませんが スペースはheight: **px分、空いてしまいます。 やりたいことは、<div>で囲む内容が height: **px未満の場合はスペースもあけず スクロールバーも出さず、overflow未指定の状態にする。 height: **pxの場合はheight: **pxで高さを固定して スクロールバーを出す。ということです。 何か良い方法はありませんでしょうか。 よろしくお願いします。 XHTML+CSSレイアウト ネスケ対応について WINのIE・ Firefox・Operaではできていますが Netscape 7.1だけクリアできない問題があるので、教えてください。 HTML内は大雑把に書くと以下のような構成になっています。 <コンテンツ大枠> <エリア左(CSS・float: left;)> <ul> <li>メニュー</li> <li>メニュー</li> </ul> </左エリア> <右エリア>・・・以下略。 </コンテンツ大枠> ※コンテンツ大枠には、ページの下部まで以下のように背景を指定しています。 background: #fff url('背景.gif') repeat-y left top; overflow: auto !important; overflow /**/: hidden; そうするとネスケだけ、コンテンツ大枠部分に 縦・横スクロールバーがついてしまいます。 スクロールバーがつく分のスペースがないので レイアウトは左エリア・右エリアが縦に並んでしまい 大きく崩れてしまいます。 スクロールが現れるのはoverflowのせいだと思いますが これを消すと背景が下まで表示されなくなります。 それから、不思議なのは 左エリアにリストタグを入れていますが、これを削除すると スクロールは消えますし、レイアウトも他ブラウザ同様キレイに収まります。 この現象に経験のある方いたら教えてください。 また私の記述が間違えていたら教えてください。 フレームの外枠を消したい HTML、CSS <iframe></iframe> このタグを使ってページ内にフレームを作成しました。 このフレームの外枠(ボーダー?)を消したいのですが・・・。 タグ内にborder=0を入れ <iframe border=0></iframe> としましたが、外枠は消えません。 CSSも少しならわかるので、CSSを使用する方法でもいいのですが・・・。どちらにしろHTMLで作られている外枠部分を消す必要がありますよね?考え方が間違っていたらおかしなこと言ってるのかもしれません。 とにかく<iframe></iframe>タグで作成したフレームの外枠を消したい。ということで質問させていただきます。わかる方どうぞよろしくお願い致します。 cssのことでわからないことがあります。 こんにちわ。 私はFC2ブログを使って自作テンプレートを作っているのですが、テーブルで組んだ一つのコンテンツを真ん中に配置したいのですが、cssでmargin-raight:auto、margin-left:auto;にしても真ん中に配置されません。 margin-left:300px;と入力すれば左に300pxの余白を作ることはできるのですが・・・ 何故なんでしょう? 後HTML上で<div align="center">~</div> で囲むと真ん中に配置されます。 私としてはcssでレイアウト全てを管理したいのでお願い致します。 overflowの特性について overflow-y:autoの特性についてご教授をお願い致します。 【質問】 overflow-y:autoは、はみ出した内容(文字)は、次ページに 表示しない特性なのでしょうか。 【状況】 現在、テーブルタグに対して、overflow-y:autoを設定しております。 印刷プレビュー上、一枚に収まりきれないくらいに文字を入力した ときに、特定行数に達すると、これ以降の文字が隠れてしまいます。 また、隠れた文字は次ページにも反映されない状態です。 印刷プレビュー上、次ページに表示されるようにするためには、 どうしたらよろしいのか、ご教授お願い致します。 EXCELシートのHTML保存の余白をなくしたいんです。 EXCELシートをHTML保存しましたが、上下左右の余白が開いていておもしろくありません。 縦横スクロールバーやオートフィル、セル幅可変、並べ替え等、EXCELの標準機能 を残した HTMLで保存しています。 HTMLは全くの素人なんですが、 HTML上の余白をとらない保存のしかたを教えて下さい。 ダイレクトに HTML上で余白をなくする方法でもよいのですが。 お願いします。 CSSについて(初心者です) こんにちは。 今までは普通にCSSを使わずに普通に作っていたのですが長くそれでやってきたので そろそろCSSに挑戦してみようかと思い、今はCSSのテンプレートを配布しているサイト様にお邪魔しています。 .CSSとアップロードして、他のページにリンクを貼ってやってみたのですが・・・ フォントの方は反映されるのになぜか、スクロールバーだけが反映されません。 最初はタグが違うのかと思い色々やってみたのですが理由が分からず質問させて頂きました。 http://odd.to/template101.html様のtemp103のCSSを利用させて頂いてるのですが・・・。 四苦八苦しているので、もしよろしければアドバイスお願い致します。 注目のQ&A 「You」や「I」が入った曲といえば? Part2 結婚について考えていない大学生の彼氏について 関東の方に聞きたいです 大阪万博について 駅の清涼飲料水自販機 不倫の慰謝料の請求について 新型コロナウイルスがもたらした功績について教えて 旧姓を使う理由。 回復メディアの保存方法 好きな人を諦める方法 小諸市(長野県)在住でスキーやスノボをする方の用具 カテゴリ [技術者向] コンピューター プログラミング・開発 Microsoft ASPC・C++・C#CGIJavaJavaScriptPerlPHPVisual BasicHTMLXMLCSSFlashAJAXRubySwiftPythonパフォーマンス・チューニングオープンソース開発SEOスマートフォンアプリ開発その他(プログラミング・開発) カテゴリ一覧を見る OKWAVE コラム 突然のトラブル?プリンター・メール・LINE編 携帯料金を賢く見直す!格安SIMと端末選びのポイントは? 友達って必要?友情って何だろう 大震災時の現実とは?私たちができる備え 「結婚相談所は恥ずかしい」は時代遅れ!負け組の誤解と出会いの掴み方 あなたにピッタリな商品が見つかる! OKWAVE セレクト コスメ化粧品 化粧水・クレンジングなど 健康食品・サプリ コンブチャなど バス用品 入浴剤・アミノ酸シャンプーなど スマホアプリ マッチングアプリなど ヘアケア 白髪染めヘアカラーなど インターネット回線 プロバイダ、光回線など
お礼
出来ました! ありがとうございます☆ 頑張って精進いたします!