- ベストアンサー
iphoneでの背景敷き詰めについて
- 背景を画像で敷き詰め（リピート表示）したいが、一部分だけが表示されてしまう。
- containerの高さが0になってしまうため、解決方法を探している。
- innerにoverflow-y: scroll;を指定すると問題は解決するが、スクロールが遅くなる。
- iewmmxnb99bb63
- お礼率88% (109/123)
- CSS
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
[解説] Q:背景を画像で敷き詰め（リピート表示）たいのですが Q:・containerの高さが0になってしまう。 何も指定しなければ、リピートされます。 ⇒初期値: repeat( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/colors.html#propdef-background-repeat ) Q:最初に表示されている部分より下がリピートしてくれません。 （ファーストビューより下の部分に背景が適用されない。 floatさせると、それが所属していた要素から切り離されますから、元の要素からそれが欠落するために背景は残った要素分の高さになります。 「浮動体はフロー内にないので、浮動体の前後に生成された位置指定されないブロックボックスは、あたかも浮動体が存在しないかのように垂直に流れる。( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visuren.html#floats )」 .container {background: url("hoge.jpg") 0 0 transparent;} .inner {background: url("hoge.jpg")} ★bodyに指定したので良いでしょう。もちろんheader,section,footerに指定しても良い。 <div class="container"><div class="inner"> こんなclass名をつけると、検索エンジンは理解しないし、そもそも自分が困る。 とにかくHTMLは率直に文書構造だけを記述すること。それによってデザインの自由度がまします。 あとは、その文書構造にしたがってセレクタを記述するだけです。タイプセレクタ、子孫セレクタ、クラスセレクタ、擬似要素・・・サンプルでは使ってませんが子供セレクタ、隣接セレクタ、擬似クラスもある。 分からないときは、ハウツーサイトではなく仕様書に目を通すこと!!
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
iphone用と言うことは別にないはずですが・・。HTMLでウェブページを作る最大の目的は、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より ユーザーエージェント(UA)ごとにページを作成するのは負担ですし、新しいUAが登場するたびに作り直したりするのは大変な負担です。ウェブ上のデータがUAごとに隔てられてしまうのは問題ですし、SEO上も極めて不利です。 ためしに、下記のようなシンプルなHTML/CSSで確認してみてください。PCもスマホも印刷もLinxのようなテキストブラウザ(言い換えれば検索エンジン)も問題ないはずです。ウィンドウ幅を変えたり印刷プレビューでも確認 ※floatを多用されているとの事・・商品リストか何かですか？、それ以外は使うべきではないですよ。文書の構造や順番がそれのために制約を受けます。 ※class名は、「文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」に使うもので、デザインのために使わない!!将来のメンテナンスで泣くことになるし、検索エンジンが内容を理解してくれなくなる。 そのためにスタイルシートを使うのですから、HTMLは文書構造以外書かない!! ⇒構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;position:relative;} h1,h2,h3,p{margin:0;line-height:1.6em;} P{text-indent:1em;} div.header,div.section,div.footer{ width:80%;min-width:630px;max-width:900px; margin:0 auto; padding:5px; } div.section{ min-height:400px; } div.section div.section,div.section h2{ width:auto;min-width:0; margin:0 0 0 160px; min-height:0; clear:left; } div.section div.section ul,div.section div.section ul li{ list-style:none;display:block; margin:0;padding:0; } div.section div.section ul li{ width:190px;height:300px; float:left; border:solid 1px red; background-color:white; margin:2px;padding:5px; overflow:auto; } div.section div.section ul li p{ font-size:0.9em; } div.section div.section:after{ content:"";display:block; clear:left; } div.section div.nav{width:150px;position:absolute;top:0;left:0;height:100%;} body{background:url(./images/background1.jpg);} div.section{background:url(./images/background2.jpg);position:relative;} div.section div.section{background-image:none;} div.section div.nav{background-color:yellow;} --> </style> <style type="text/css" media="print"> <!-- div.section div.nav{display:none;} --> </style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページ・・・・</p> ＿＿<div class="nav"> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div class="section" id="#A-D"> ＿＿＿<h3>製品リストA-D</h3> ＿＿＿<ul> ＿＿＿＿<li id="A">製品A ＿＿＿＿＿<p>floatを多用しているとのことで商品リストのようなものと想定して・・</p> ＿＿＿＿＿<p>項目や段落を増減させたりしてみましょう。</p> ＿＿＿＿＿<p>HTMLには文書構造しか書かれてないため、自由に書き換えや変更ができるはず。それでもデザインが崩れない。デザインのためにHTMLが書かれてないのでデザインの変更も自由</p> ＿＿＿＿</li> ＿＿＿＿<li id="B">製品B</li> ＿＿＿＿<li id="C">製品C</li> ＿＿＿＿<li id="D">製品D</li> ＿＿＿</ul> ＿＿</div> ＿＿<div class="section" id="E-G"> ＿＿＿<h3>製品リストE-F</h3> ＿＿＿<ul> ＿＿＿＿<li id="E">製品E</li> ＿＿＿＿<li id="F">製品F</li> ＿＿＿＿<li id="G">製品G</li> ＿＿＿</ul> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<h3>目次</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="#A-D">製品A-D</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="#A">製品A-D</a></li> ＿＿＿＿＿＿<li><a href="#B">製品B</a></li> ＿＿＿＿＿＿<li><a href="#C">製品C</a></li> ＿＿＿＿＿＿<li><a href="#D">製品D</a></li> ＿＿＿＿＿＿ ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="#E-G">製品E-G</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="#E">製品E</a></li> ＿＿＿＿＿＿<li><a href="#F">製品F</a></li> ＿＿＿＿＿＿<li><a href="#G">製品G</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
詳しいご説明ありがとうございます！ おかげさまでいただいたページを参考に 何とか形になりそうです！ SEOやコーディングノウハウも勉強になりました！ ありがとうございましたm(_)m