- 締切済み
スマホで表示するとwidthが適応しない。
anonymous（@phantom0112358）の回答
- anonymous（@phantom0112358）
- ベストアンサー率60% (6/10)
スマフォやタブレットなど様々な解像度が混在する環境では、pxなどの絶対値ではなく%などの相対値での指定が推奨されます。 <head>内にビューポートを指定してありますか？ <meta name=viewport content="width=device-width, initial-scale=1">
関連するQ&A
- DIVの入り子のwidthの指定方法
DIVの入り子のwidthの指定方法がうまくいきません。 ＜ｃｓｓ＞ #main { width: 770px; margin: auto; padding: 0px; text-align: left; background-color: #cc0000; } .box_main{ width: 750px; background-color: #FFFFFF; margin: 0px 10px 10px 10px; padding: 0px; border: 0px; } .box_1{ margin: 5px 2px 5px 5px; padding: 0px; border: 0px; height: 299px; width: 236px; background: url(img/test2.jpg); float: left; } .box_2{ margin: 5px 5px 5px 0px; border: 0px; height: 295px; width: 491px; background-color: #33ff00; float: left; } .cl { clear: both; } この際、.box_mainの中にbox_1、box_2を横ならびにおきたいのですが うまくいきません。box_2のWIDTHの幅の指定がおかししのでしょうか？ HTMLは<html> <body> <div id="main"> <div class="box_main"> <div class="box_corner">あああああ</div> <div class="box_1"></div> <div class=box_2></div> <div class="cl"> </div> </div> </body> </html> です。
- 締切済み
- HTML
- （ＣＳＳ）画像が完全に右端に寄りません・・・
ＣＳＳ勉強中でソースの不備が多々あると思いますがどうかみていただけますでしょうか・・。 <div class="bar">の画像の一番端の右下に<p class="px">の画像を隙間無く持ってきたいのですがどうしても<p class="px">の右側が空いてしまいます・・。対処方法がございますでしょうか。 根本からソースが違うかもしれません・・何卒お願いいたします！ .pattern_box { width:708px; padding:0px 26px; text-align:right; } .pattern_box .bar { width:708px; margin:0px; } .pattern_box .px { float: right; display: inline; margin: 0px 0px 10px auto; text-align:right; } .pattern_box .inner { margin:10px 0px 0px 0px; text-align:left; font-size:12px; line-height:18px; } ★ＨＴＭＬ <div class="pattern_box"> <div class="bar"> <img src="h2_bar01.gif" alt="" width="708" height="20"> </div> <p class="px"><img width="145" height="62" src="h2_bar01_ill.gif"></p> <div class="inner">テキストテキストテキスト</div> </div><!--pattern_box-->
- ベストアンサー
- CSS
- position: sticky;で教えてください
何が間違っているのかわかりません。 間違いを指摘していただきたいです。 ●HTML <body> <article> <header> ヘッダ </header> <div class="content"> <section class="right"> <div class="sticky">ここをスクロール追従させたい</div> </section> <section class="left"> <p>左側ボックス</p> </section> </div> <footer> <address>Copyright (C) 2018All Rights Reserved.</address> </footer> </article> </body> </html> ●CSS article{ width:800px; margin-left:auto; margin-right:auto; } header{margin-bottom:50px;} .right{ width:200px; float:right; } .left{ width:550px; float:left; } footer{clear:both;} .sticky { postion: -webkit-sticky; position: sticky; top:0px; background-color:#09F; } よろしくお願いいたします。
- ベストアンサー
- CSS
- IEとFireFoxでCSSの見た目をそろえたい
CSSの素人ですがボックスを使って2カラムスタイルのデザインを作ろうとしているのですが 完成したのをみるとIEとFireFoxで見た目変わりうまく調整できずに困っています。 足し算はあっているはずなのですがどこを修正すればよいのでしょうか？ HTML <body> <div id="wrapper"> <div id="container"> <div class="header"> <h1> </h1> </div> <div class="kaijyo"></div> <div class="main"> <div></div> <h2> </h2> <div class="kaijyo"></div> <div class="line"> <hr> </div> </div> <div class="menu"> </div> <div class="kaijyo"></div> <div class="footer"> <p> </p> </div> </div> </div> </body> CSS #wrapper{ text-align:center; /*IE対応*/ } #container { width: 980px; margin-left:auto; margin-right:auto; background-color:#CAB59B; text-align:left; } .header{ width: 970px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#000000; text-align:left; height:20px; } .main{ width: 670px; float: left; margin: 0px 0px 0px 0px; padding: 10px 15px 10px 15px; background-color:#E4E4E4; text-align:left; } .menu{ width: 260px; float: left; margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; background-color:#CAB59B; text-align:left; } .footer{ width: 970px; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#FFFFFF; text-align:left; } .kaijyo{ clear: left; }
- ベストアンサー
- CSS
- floatのクリアについて
以下のように「test1」,「test2」というclassを「test」の中で左右に 配置したのですが、一番最後のh2にあるclassのclearが反映されずfloatを 解除することが出来ません。（IEの７では解除できましたが、FireFoxの 3.0.11での解除が出来ません） 「test」の</div>直前に<br class="test3" />を入れると解除されるので すが、<br>を使わずに解除する方法はありますでしょうか？ 現在の希望は以下の方法での解除か、「test1」にclearを設定し「test」を 下に続けて並べたいと考えています。 ご教授よろしくお願いします。 ■■■HTML■■■ <div id="test"> <div class="test1"> <img src="画像" width="100" height="100" /> </div> <div class="test2"> <p>test2</p> </div> </div> <h2 class="test3">test</h2> ■■■CSS■■■ #test { width: 500px; margin: 0 0 20px 0; } .test1 { float: left; width: 100px; margin: 0 10px; padding: 0; } .test2 { float: left; width: 380px; margin: 0; padding: 0; } .test3 { width: 500px; clear: both; }
- 締切済み
- HTML
- 携帯サイトでの回り込み
携帯サイトをコーディングしているのですが、auのみ、ボックスの回り込みが出来なく困っています。 「画像の右にテキスト」であれば CSS ----------------------------------------------- .float { float:left; } .img { width:50px; height:35px; } ----------------------------------------------- HTML ----------------------------------------------- <!--{* この画像の右に文字列を表示する *}--> <img class="float img" align="left" src="jpg.jpg" /> floatON <!--{* 回り込み解除 *}--> <div clear="all" class="clear"></div> floatOFF ----------------------------------------------- で出来たのですが、 「ボックス要素の右にボックス要素」だと CSS ----------------------------------------------- .float-box1 { float:left; text-align:left; width:20%; height:30px; background:#4682b4; } .float-box2 { float:left; text-align:left; width:20%; height:30px; background:#3cb371; } ----------------------------------------------- HTML ----------------------------------------------- <div class="float-box-area"> <div class="float-box1" align="left">box1</div> <div class="float-box2" align="left">box2</div> </div> <div clear="all" class="clear"></div> ----------------------------------------------- で組むと、 box1 box2 という状態になってしまいます。 box1box2 というふうにしたいのですが、どなたかご存知の方いらっしゃいますか？ テーブルでは考えていないのでテーブルでの横並びはなしでお願いします。 softbankとdocomoでは上記で回り込み出来ました。auだけ出来ません。 ブラウザ種は「WAP2.0」になります。 宜しくお願いいたします。
- 締切済み
- CSS
- W3C における、width の解釈に関して
今まで漠然と、CSS でデザインを行ってきました。この際きちんとした知識を得たいと思っています。 今まで float を利用して、経験則的に width で幅を決め段組みのデザインをしてきましたが、W3C 的に間違った解釈をしていないのかと思い始め、下記のサンプルソースを制作してみました。 疑問点は、float を利用してボックスを並べる際の、width の値に関しての考え方です。 W3C で言う標準モードを意識しています。また、IE6 の互換モード等は現時点では配慮していません。純粋に W3C の解釈を知りたいと思います。 -- サンプルソース -- <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>widthの検証</title> <style type="text/css"> <!-- body { background-color: #FEE; } #box { width: 300px; border: 1px solid #00F; margin: 0 auto; background-color: #FFF; } .block { float: left; width: 100px; margin: 0px; padding: 0px; border: 0px solid #F00; background-color: #FFE; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } --> </style> </head> <body> <div id="box" class="clearfix"> <div class="block"> <p>ボックス１</p> </div> <div class="block"> <p>ボックス２</p> </div> <div class="block"> <p>ボックス３</p> </div> </body> </html> -- サンプルソース -- 幅300pxのボックスを作り、その中に100pxのボックスを3個 float: left で並べています。上記のサンプルでは、クラスblockにて margin,padding,border を、0px にしていますが、margin,padding,border でどこか1カ所にでも、0以外の値を与えると3個目のボックスが落ちます。 上記挙動を踏まえて考えると、width の値は純粋にコンテンツのみの値と判断出来ます。 ただ、ネットを検索してみると、W3C 的には pading,border まで含めた値が、width の値だと解説されているページを見受けます。 検証した環境は Mac OS X の環境で、FireFox3.0 と、safari になります。width の値に関しては、単にブラウザの解釈の問題で有り、W3C 的には、width とは、padding,border まで含んだ値が正解なんでしょうか。 出来れば W3Cの原書もしくは、W3Cの和訳が有れば width のリファレンスへのリンクを教えて頂ければと思います。 和訳に関しては http://www.a2ztutorial.com/Style/CSS/ のページを見つけましたが、リファレンスを見つけられませんでした。
- ベストアンサー
- CSS
- スマホ画面で長い文章が、左端に短い幅で片寄る。
スマホ画面で長い文章の部分だけ折り返され、左端に短い幅で片寄ってしまいます。 これはどのように修正すれば良いのでしょうか。PCではいろんなブラウザで問題なく表示されています。 #header { width:100%; background:#cccc99; } #container { width:950px; margin-left:auto; margin-right:auto; text-align:left; } #col1 { width:740px; float:left; margin-left:20px; background:#383838; } #col2 { width:190px; float:left; } #footer { clear:left; width:100%; border-top:1px solid #8f8472; } 左側にメニュー（190px）を配置したレイアウトです。 h1,h2,P,liタグなど、とにかく長い文章の部分だけ、画面幅ではなく、短い幅で折り返され 左側に片寄っています。下記のxxxxxxxxの部分もそのようになります。 ul.abc { list-style:none; width:100%; margin: 0; padding: 0; } ul.abc li { float:left; margin-right:1em; padding: 0; } ul.abc a { float:left; line-height:85px; } ul.abc img { float:left; margin-right:.5em; vertical-align:middle; } <ul class="abc"> <li><a href="..." target="_blank"><img src="..." width="115" height="85" alt=""/><img src="..." height="1px" width="1px" border="0"> xxxxxxxxxxxxxxxxxxxxx</a></li> </ul><div style="clear: left;"></div> よろしくお願い致します。
- 締切済み
- CSS
- min-width？を使って背景にスクロールを出さない
body内にcssでbox1をおき、そこに固定背景を指定しています。 その中にさらにbox2を置いています。 box1の幅が1000px、box2の幅が600pxだとします。 できれば、横スクロールをbox2の幅以下で出したいのです。 min-widthではIE6等には利きません・・・。 ハック、javascriptもかわまないので、どなたか効率のいいやり方を伝授していただけないでしょうか？ よろしくお願いします。 何もない状態のcssを書きます。 ■CSS body{ } .box1{ width: 1000px; height: 500px; margin: 10px auto; background-color:#000; text-align:center; } .box2{ width: 1000px; height: 300px; margin: 100px auto; background-color:#fff; } ■HTML <body> <div class="box1"> <div class="box2"> </div> </div> </body>
- 締切済み
- HTML
お礼
ありがとうございました。 やってみましたが… ＰＣでの表示位に大きくなり、左上から一部分が表示するようになってしまいます。難しいです。