• ベストアンサー

HTMLのwidthについて

パソコンの画面幅より大きいwidthを指定した場合でも ブラウザ下の横スクロールバーを表示して、スクロールできるようにしたいのですが できるのでしょうか?

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

わざわざ横スクロールバーを意識されなくても画面の横幅より大きい指定をしてやると勝手にバーが出来ます。 試みに<img src="image3.gif" width="330" height="200" alt="ほげほげ"> というような画像を表示させておいてその横幅だけをwidth="3300"と書き直してやると何をしなくても横スクロールバーがついたHTMLファイルになります、画像はいびつですけど・・・。例としてこんな事をやってみて下さい。 横に長い画像をはっきり見せたいとか横長の表を作りたい時などにそんな欲求を持つことがあります。普通は横スクロールを避ける為に色々と工夫をするところ(例えば画像を二つに分けて上下に並べるとか)なのですが、閲覧者の不便や横スクロール見落としの心配などよりも、必要と思うことをそのままに見せたいという欲求が強ければご自分のサイトですからそれはご自由です。

matoro6173
質問者

お礼

ありがとうございます。 質問する前に簡単なHTMLファイルで確認するべきでした。 申し訳ありません。

関連するQ&A

  • iframeでWIDTHとHEIGHTを指定せずにすむ方法は?

    楽天で時々iframeでたくさんの内容を表示させている人がいますが、ソースを見るとWIDTH="(幅)" HEIGHT="(高さ)" を指定していないんですよね。なのにスクロールバーを出さず、子ページをきちんと全部表示している…これを自分でやるとタテもヨコもちょんぎれてしまいます。いったいどういう裏技なのでしょうか???

    • ベストアンサー
    • HTML
  • HTML、floatでのscrolバーの出現の有無

    HTMLについて質問させていただきます。 <body> <div id="oowaku"> <div id="main"> <div id="a" style="float:left; width:500px;"> <div id="b" style="float:right; width:200px;"> </div> </div> </body> (スペルミス等があった場合無視してください。) (この時、aとbの間には隙間が仮に300pxあるとします。(ブラウザの幅1000px)) (mainのwidthを指定しない場合widthは100%指定に自動でなっていると思います。) ここで、ブラウザの右端を左に向かって縮めると、 mainのwidthを ・px指定した時は、「aとbは位置固定」で、px指定したところまで縮み、pxより短くなるとスクロールバーに変わります。 ・%指定の時は、aとbの間の距離はブラウザーの横幅に合わせて、詰めてくれます。 しかし、%指定の時、aとbの合わせたwidthより、ブラウザの幅が短くなると、bはaの下に改行?されてしまいます。そしてaのpxより短くなって初めてスクロールバーに変わります。 後者の%指定(aとbの距離をブラウザの幅で詰めてくれる)でかつ、aとbの距離が無くなった時に改行?されることなく、スクロールバーにする方法はないでしょうか。 回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • 【IE】iframeで呼び出したHTMLの表示幅について

    こんにちは。質問させて下さい。 現在、http://yrotnus.web.fc2.com/testpage.html 上記のような構成のページを作っています。 (背景画像を、フレームをまたいで表示させるために、floatで左にコンテンツ、右にインラインフレームを配置しています) コンテンツをクリックしインラインフレームに内容を表示させているのですが、このページをIE8で確認した際、 ■内容が画面を越えて表示され、横スクロールバーが出る。 ■横スクロールバーが出た状態でブラウザの幅を変えてみると、  以降は呼び出したページが自動的に画面の幅に合う。 という状態になります。 firefoxでは、横スクロールバー自体表示されませんでした。 IEでも横スクロールバーが出ないようにしたいのですが、どうすれば良いのでしょうか。 overflow-x: hidden以外の方法を探しています。 よろしければご回答願います。

  • Firefox 横スクロールバーを表示したい

    当方webサイトを制作しています。 大体完成しており、ブラウザチェックをしている段階なのですが 修正したい箇所がありまして、修正方法をどなたか教えていただけますでしょうか。 横幅を960pxで作ったのですが、よくブラウザのサイズを小さくしたときに横スクロールバーが表示されますよね。 ところがFirefoxで確認したところ、横スクロールバー(縦は出ます)が 表示されず、小さくしたら見えていない部分を表示する手段がありません。 960px以下のモニタのユーザへの対処法として、解像度960px以下の場合は(要はページが画面に収まりきらない場合です) 横スクロールバーで、見えていないところも表示できるようにしたいのです。 現状は以下の通りです。 ・bodyに幅は指定していません(ウィンドウのサイズを960px以上に大きくしたときでもセンターに表示させるため) ・cssで960pxのサイズ指定をしている箇所はあります。 ・IE6では横スクロールが表示されています。 ・html上にwidth960pxのimgを置いてみましたが解決にいたりませんでした。 webで調べてみましても、「スクロールバーを消したい」の情報は あるのですが、「表示させたい」の対処法をみつけることができませんでした。 対処法をご存知の方、どうかよろしくお願いいたします。

  • ブラウザによる「width」の違い

    <html> <body style="background-color:#FFFFFF;color:#000000;font-weight:nomal;margin:0%;"> <div style="border:solid 2px #000000;margin:10% 0% 10%;"> <div style="margin:5% 10% 8%;"> <table border="1" style="width:100%;"> <tr><td bgcolor="#3399FF">A1セル</td></tr> </table> </div> </body> </html> 上のソースは抜粋です。 上のソースをIEで開くと、一画面から横にあふれてスクロールする様な表示になってしまいます。 しかし、全く同じソースをOperaで開くと、 (Operaが入っていないと思うので)<table>のwidthを100%から700pxくらい(人によって解像度で変わってきますが)にしてIEで表示したときのように、画面からあふれることはく、ちょうど真ん中にきれいに表が収まります。 ブラウザによって、widthの基準となる幅がブロックだったりウィンドウサイズだったりしているんだと思うのですが、どうすれば両方のブラウザで同じ表示をさせることができるのでしょうか… 絶対数値で固定してしまえば早いのですが、できれば相対数値で幅を整えたいので…

    • ベストアンサー
    • HTML
  • CSSでスクロールバー

    CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか?右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか??

    • ベストアンサー
    • HTML
  • ブラウザ毎の$(window).widthの違い

    標記の件でお尋ねさせて頂きます。 画面上に縦スクロールバーが表示されているという条件下ではありますが、 FirefoxとChromeとで$(window).width()の値を確認すると異なります。 たとえば画面幅が960pxでも、前者は924pxと表示され、後者は960pxと表示されます。 Javascriptなどで、たとえばPCサイズ時に動きをつけたい時に、 If ($(window).width() > 959 ){~} といった記述を書くかと思いますが、 このままですと、FirefoxとChromeとで動きが異なってしまうと思います。 こういう場合ってやはりFirefoxを判別して、それ用の場合分けなどを準備する必要が ありますでしょうか。 何かいい方法があればご教授頂けますと幸いです。 よろしくお願い致します。

  • cssでhtml{width:100%;}の意味がわかりません

    いつもお世話になっております。 早速質問です。 あるサイトのCSSを拝見すると、以下の様な記述がありました。 html{ width : 100% ; height : 100% ; } body{ width : 100% ; height : 100% ; } BOXに幅や高さを指定する記述はよく見かけますが、htmlやbodyに幅や高さを100%と指定する理由がわかりません。 上記のCSSの意味を教えてください。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • HTMLでテーブルを表示させようとしています。

    HTMLでテーブルを表示させようとしています。 画像のような勤務状況がわかるテーブルをHTMLで表示させようとしています。 テーブルの数字項目は時刻を表しています。(9から18まであります) ブラウザの横スクロールは表示させたくないので テーブル内の一部項目(「No.」から「氏名」まで)を固定にして 横スクロールバーを表示させたいのです。 縦スクロールのサンプルを見つけ、 これを横に対応させればよいかと思ったのですが うまく表示させることが出来ませんでした。 一部項目を固定にして横スクロールバーを表示することは可能なのでしょうか?

    • ベストアンサー
    • HTML
  • widthとmax-widthについて。。。

    cssについて、困っています。アドバイスを何卒宜しくお願い致します。 widthとmax-widthですが、あまり理解できていません。。 可変式にブラウザウィンドウのサイズを変更しても思うように画像要素が小さくなっていくようにして作っているのですが、どこにmax-widthで%指定し、どの場合はwidthで%指定するのか、または両方指定するのかが把握できておらず、 最終的に形にはなり、完全にレスポンシブ化できるのですが、このままではいつか痛い目にあうだろうなと思い調べたりしているのですが解決に至らずご質問いたしました。ご教示いただければ幸いです。 何卒どうか宜しくお願い致します。

    • ベストアンサー
    • CSS

専門家に質問してみよう