- ベストアンサー
hタグの背景画像はローカルコンテンツ一杯のサイズで表示させる問題と解決方法
- hタグの背景画像をローカルコンテンツ一杯のサイズで表示させる方法について質問があります。
- 現在、背景画像の右スミにグラフィックがあり、その上までテキストが来てしまって読めなくなってしまいます。
- 解決策として、背景画像のサイズ設定に加えて、パディングを使ってテキストが四方ギリギリまで表示されないようにすることが考えられます。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
まず自分の質問を読み直しましょう。 > 例えば、背景画像がwidth:600px、height: 100pxとして、 と書かれているので、私は画像の横幅を600pxとして回答しているのです。 > いえいえ、h2はwidth:640px、height:110pxの長方形の背景画像でできていますよ？ htmlもcssも背景画像のサイズは読み取りませんので、背景画像のサイズはボックスサイズには関係ありません。 幅や高さは全てwidthやpaddingの指定で決まります。 > この背景画像の上にh2のテキストが表示されているのです。 > ですから、width:640pxは背景画像の横幅を指していますので間違いではないはずです。 間違いです。 あなたの勘違いは、widthの幅がボックスの幅とイコールだと思っていることです。 そのような挙動をするのは、IE6の後方互換モードだけです。 ボックスの幅はwidth + padding + borderで計算されますので、 width:640px; height:110px; padding: 20px 200px 0 20px; なら、h2#titleの幅は840pxになり、テキストが表示される幅は640pxです。 ちなみにh2#titleの高さは130pxです。 ボックスの幅を背景画像の幅と同一にしたければ、width + padding = 背景画像の > 全体の横幅640px － 右paddingした200px ＝ 440px > この440pxがテキストの左右サイズになるはずだと思います。 > テキストが440px地点にきたら自動的に折り返すはずですが？？ 今はテキスト幅640px、左paddingが20pxなので、左から660px地点で折り返されます。 440px地点でテキストを折り返すには、 左にもpadding:20;があるとして、width:420px;を指定する必要があります。 > 一度background-colorを指定してみれば、どういう状態かよくわかると思います。 これやりました？ まずは回答もらったものは試してみてください。
その他の回答 (6)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.4の回答の補足です。本題からは外れているので無視して構いません。 ＞その理由はブラウザによっての差異をなくすためのものです。 ブラウザの表示誤差の最大の要因は、互換モードで表示されるか否かです。これは、HTMLを標準モードで起動するようにDOCTYPEをきちんと記述することで、大多数のブラウザは標準モード--HTML4.01strict(以降)+CSS2.1に従って動作します。 ⇒DOCTYPEスイッチ - Google 検索( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t ) その際適用されるブラウザのスタイルシートはおおむね ⇒HTML 4.0におけるスタイルシートの例( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html ) になります。 これで、相当ブラウザ間の誤差をなくすることができます。 HTML5を目前にした今、さすがにtransitinalや互換モードでページを作成することはないでしょう。 ＞HTML5に対応していないブラウザをカバーしなければいけない状況だと思うので、HTML5はまだ取り入れていなかったのですが？？ ⇒When should I start using HTML 5?( http://html5doctor.com/your-questions-answered-1/ ) 今でも使えます。単にDOCTYPE文書宣言は <!DOCTYPE html> だけですみます。これで現行のブラウザは標準モードで動作します。 HTML5の新しい要素をサポートしていないブラウザのために <div class="header">などとするか <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif] -->
お礼
色々とテーマとは関係ないことを書かれることを静止できる機能がありませんのでいかんともし難いですが^^; 色々とお気にかけてくださっているようで、ありがとうございましたというべきか、困惑すべきか・・・^^; > HTML5を目前にした今、さすがにtransitinalや互換モードでページを作成することはないでしょう。 申し訳ありませんが、やはり浅はかな方に映ってしまいます。この記述に象徴されます。 ちょくちょくWeb制作をしている方ならいざしらず、ごくたまにWeb作成する人間が、常日頃からWebの動向を見極め、常にその時妥当な手法や記述方法を適切にすると思いますか？ 本業はほかにあるというのに。 「みんなこうであるはずだ、べきだ」というそのお考え方は、極めて領域の狭い浅いものです。 上位のプログラマはこのあたりもよく理解しているものです。 ご自身の知識をひけらかすのも結構ですが、質問と関係ないことを列挙されましても、この掲示板の目的としましては困惑するばかりでございます・・・
- tkmojo
- ベストアンサー率50% (105/207)
すみません、先ほどの回答で一部途中で途切れてしまった所があるので補完します。 「ボックスの幅を背景画像の幅と同一にしたければ、width + padding = 背景画像の」 ↓ 「ボックスの幅を背景画像の幅と同一にしたければ、width + padding = 背景画像の幅と同じにする必要があります。」 先ほども色々書きましたが、要は下記の修正で目的は達成されます。 width:640px; ↓ width:420px; 何故これで直るかを知るには、先ほどまでの回答をよく読み、 あとはcssについて勉強してください。
お礼
> width:640px; > ↓ > width:420px; > > 何故これで直るかを知るには、先ほどまでの回答をよく読み、 > あとはcssについて勉強してください。 はい、意味がわかればすぐにおっしゃりたいことは理解できました。仰った通りになりました。全く仰った通りです。寸分の狂いもありませんでした。 私の勘違いも仰った通りでした。paddingというのは、widthをキメたらその中でpaddingの数だけ内側に浸食していくものだと、ずっとずっと思っていました・・・ 道理でレイアウトがうまくいかない腑に落ちないことが過去にあったわけです。 CSSの本も幾度も読んでいたのに違った理解をずっとずっとしておりました・・・自分自身、このpaddingについての勘違いに驚いております。 ばっちり解決致しました。完全なるアドバイス、勘違いのキモの指摘、共に完全なる感謝を申し上げます。 ホンキで間違いがわかっていなかった上に、当初のご回答の文面が理解できておりませんでしたので、何度も問うような形になったことをお詫び申し上げます。 この最後の回答は最高の内容でした！
補足
最後のご回答ではありませんでした。追加がありましたですね。 ひとつ前のご回答が最高でした^^ 本当にありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2です。 div.sectionって、HTML5以下でも使えるのですか？ もちろん。class名にsectionをもつDIV要素と言う意味です。 ある程度HTML/CSSに携わっていらっしゃるようなので、細かくは書きませんでしたが、 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 および、HTML5 『HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』 さらに、 ⇒More on developing naming conventions, Microformats and HTML5 — Stuff & Nonsense, And All That Malarkey( http://stuffandnonsense.co.uk/blog/about/more_on_developing_naming_conventions_microformats_and_html5/ ) の2/3あたりや ⇒HTML5 id/class name cheatsheet ・ @boblet( http://boblet.tumblr.com/post/60552152/html5 ) などがあって、No.2で回答したソースになります。 class名は文書構造を保管するために付け、そのclass名はHTML5の新しい要素の【用途や意味】と【名称】を出来るだけ踏襲にしています。 ＞h2にidを付けない件ですが、当方もできるならidなどの固有のものはつけないで終わらせたいですが、h2は一ヶ所だけではありません。二ヶ所使っています。 だから固有のIDが必要なのです。 そうでしょうか？例えば複数のセクションを持つ場合 <body> <div class="header"></div> <div class="section"> <h2></h2> <div class="section"> <h3></h3> </div> <div class="section"> <h3></h3> </div> <div class="section"> <h3></h3> </div> </div> <div class="footer"></div> という典型的な構造だとします。リンクターゲット、あるいは一意性を示すためにidを振ると <body> <div class="header" id="top"></div> <div class="section" id="section1"> <h2></h2> <div class="section" id="section1-1"> <h3></h3> </div> <div class="section" id="section1-2"> <h3></h3> </div> <div class="section" id="section1-3"> <h3></h3> </div> </div> <div class="footer"></div> とかになるでしょう。その上で、 div.section div.section h3{ /* 本文section中sectionのh3については・・ */ font-size:40px;line-height:50px; padding:0 250px 0 50px; background:url(./images/gun1.gif) top right; } div.section div.section + div.section h3{background-image:url(./images/gun2.gif);} div.section div.section + div.section + div.section h3{background-image:url(./images/gun3.gif);} それぞれのセレクタの詳細度は[0 0 2 3][0 0 2 4][0 0 2 5] とすれば、あなたが期待されたどおり各h3にidを振る必要はなくなります。 もちろん、 div.section div.section h3{ font-size:40px;line-height:50px; padding:0 250px 0 50px; background-position:top right; } div#section1-1 h3{background-image:url(./images/gun.gif);} div#section1-2 h3{background-image:url(./images/gun2.gif);} div#section1-3 h3{background-image:url(./images/gun3.gif);} でも良いでしょう。 私は一意セレクタは詳細度が[0 1 0 0]と高く、また必然的に一箇所しか指定できませんので、デザインのためにidを振ることはありません。class名も目的は[文書構造を保管する]のが一番の目的で、デザインのためではありません。これは仕様書を読めば書かれている通りです。その文書構造に基づいてデザインしていくだけで、端からデザインのためにつけてはいません。(そのためスタイルシートで使用しないclassも存在します。) まあ、難しい話をここで議論するより、HTML5の仕様書や ・HTML5 Doctor, helping you implement HTML5 today( http://html5doctor.com/ ) などを読まれると、その本流が見えてきます。 (ちなみに)HTML5ではsectionは、自動的に文書の樹構造がつくられる--見出しheadingを持ちうる--ようなブロックで、sectionの階層で枝を示し、一つのsectionにひとつしかheadingを持たないことになります。 ⇒4.4.6 The h1, h2, h3, h4, h5, and h6 elements( http://www.w3.org/TR/2012/CR-html5-20121217/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements ) ★No.2のHTMLを騙されたと思って試してみてください。 期待通りになってませんか？
- tkmojo
- ベストアンサー率50% (105/207)
> あれ、入れたと思っていたのですがないですね。 > widthはここに入力する際に入れ忘れておりまして、 > 実際にはwidth: 640px;は入っておりますので問題ありません。 > 混乱させて済みません。実際はちゃんと入っています。 > それなのに動かないということです。 画像（600px）の右端から200px開けたいのなら、width:640;は多すぎです。 それではテキストは640px分改行せずに進みます。 左に20px、右に200pxのpaddingが入っているのですから、 h2#titleのボックスサイズはwidthとpaddingを合わせて860pxになっています。 一度background-colorを指定してみれば、どういう状態かよくわかると思います。 もう一度、width、padding、border等の関係を見直してみる事をお勧めします。 上記で直らないとすれば、他に優先される記述があるなど、問題は別の所にあります。 もしくは、書いているテキストが半角英数で続けて書いている場合には 一つの単語として見なされますので、幅を指定しても改行はされませんが、 さすがにこういう事ではないでしょう。
お礼
追記いたします。 誤解や早とちりがあってはいけませんので正確に書きますと、 > それで、padding-right:200pxとしているわけですから、 > 全体の横幅640px － 右paddingした200px ＝ 440px > この440pxがテキストの左右サイズになるはずだと思います。 > テキストが440px地点にきたら自動的に折り返すはずですが？？ 当方の最初のソースですと、正確にはpadding-left:20pxもあったので、テキストの左右幅でいうと 440px － 20px ＝ 420px ということになりますか。 この幅がテキストのあるエリアにしたいわけです。 それがどういうわけかなりません。何か記述ミスでもあるのかなぁ・・・ こんなに細かく書かなくても大枠が大切ですからわかるとは思いますが念のため追記いたします。
補足
え？え？何でしょうか？何を言われているのかさっぱりわからなくなってまいりました。 いえいえ、h2はwidth:640px、height:110pxの長方形の背景画像でできていますよ？ この背景画像の上にh2のテキストが表示されているのです。 ですから、width:640pxは背景画像の横幅を指していますので間違いではないはずです。 そして、この背景画像の上にテキストを配置させるわけですが、そのテキストをh2のサイズである横640pxと縦110pxのどのあたりに配置させるか？というのがpaddingで決まるはずですよね？ それで、padding-right:200pxとしているわけですから、 全体の横幅640px － 右paddingした200px ＝ 440px この440pxがテキストの左右サイズになるはずだと思います。テキストが440px地点にきたら自動的に折り返すはずですが？？ > 画像（600px）の右端から200px開けたいのなら、width:640;は多すぎです。 ？？済みません全く意味がわかりませんでした。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
なぜ、そのような無駄なスタイルシートを書くのでしょう。 リセットCSSを書いてしまうと、折角ブラウザが持つデフォルトのスタイルがすべて抹消されます。そのため、新しい要素が登場するたびに、一から書かなければなりません。スタイルシートを混沌としたカオスにしてしまう最大の原因です。 また#titleのようなidは、まったく不必要です。h2自体が見出しと言う意味を持っています。本文中の見出しなら単に div.section h2{}でよい。ちなみに・・HTML5ならsection h2{} html,body{margin:0;padding:0;}/* ウィンドウ幅いっぱいを利用する */ h1,h2,h3{margin:0;line-height:1.6em;} div.section h2{ /* 本文section中のh2については・・ */ font-size:40px;line-height:50px; padding:0 250px 0 50px; background:url(./images/gun.gif) top right; } これだと、HTMLをまったく開かなくてもデザインの修正、変更が出来る。 全文・・ ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済みのHTML4.01strict タブは＿に置換してあるので戻すこと ★使用した画像は、1,200px×200pxで右上に200px×50pxのロゴのつもり <!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"> <!-- html,body{margin:0;padding:0;}/* ウィンドウ幅いっぱいを利用する */ h1,h2,h3{margin:0;line-height:1.6em;} div.section h2{ /* 本文section中のh2については・・ */ font-size:40px;line-height:50px; padding:0 250px 0 50px; background:url(./images/gun.gif) top right; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>本文の見出しだよ</h2> ＿＿<p>・・・</p> ＿</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>
お礼
色々とがりとうございます。 (1) ご紹介いただいた以下のソースですが、 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ html,body{margin:0;padding:0;}/* ウィンドウ幅いっぱいを利用する */ h1,h2,h3{margin:0;line-height:1.6em;} div.section h2{ /* 本文section中のh2については・・ */ font-size:40px;line-height:50px; padding:0 250px 0 50px; background:url(./images/gun.gif) top right; } これだと、HTMLをまったく開かなくてもデザインの修正、変更が出来る。 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ おっしゃりたいのは、HTMLで固有のid名やclass名を作らず、単に「h1」と入力するだけで完成する、ということを仰りたいと思うのですが、div.sectionって、HTML5以下でも使えるのですか？ HTML5に対応していないブラウザをカバーしなければいけない状況だと思うので、HTML5はまだ取り入れていなかったのですが？？ (2) リセットスタイルを使わないで大丈夫でしょうか？？ カオスにしないためにリセットをおこなうのが常識でした。もしかして、当方のCSSが、リセットだけでその後の共通初期設定をしないとでも早合点されているのでしょうか？？リセットするだけで終わるわけがありませんよ？ リセットスタイル手法というのは、最初の読み込みCSSにスタイルをリセットさせる記述をし、その次のCSSで改めて基礎セクタの設定をおこなうものであり、その理由はブラウザによっての差異をなくすためのものです。 新しい人のようでこれまでの流れをご存じないようですのでお教えしておきます。 しかしその上で、回答者様のように、せっかくブラウザに純正で設定があるのだからリセットをかけないでおこなう、という方策もあるのも知っています。 しかし、リセットをかけずにブラウザ間の差異をなくすまたは最小限にするという手法は当方はよく知りません。 よって、まだリセットをかける手法を取り入れています。 紹介のソースでCSSが終わっているわけがありません。 リセットしたあとは、初期設定を必ずおこないます。 それともリセットしないでもブラウザ間の差異をなくしてできる方法でもあるのでしょうか？ (3) h2にidを付けない件ですが、当方もできるならidなどの固有のものはつけないで終わらせたいですが、h2は一ヶ所だけではありません。二ヶ所使っています。 だから固有のIDが必要なのです。 h2は複数作成できます。 正直申しまして、色々と書いていただいているのでそれについては当然ありがたい限りなのですが、 貴殿は断定口調で投稿されているのですが、内容を読むと、知識が豊富な方なのかそれとも浅い知識で断定してしまう方なのか、正直わからない状態で、どこまで信用していいのかが不明です。
補足
ご投稿の内容に思わず釣られていましたが、そもそも当方の質問の答えは投稿されたのでしょうか？？ 色々と気になられるのはわかりますが、周辺の修正に気を取られず、当方のソースのどこをどう直せば解決するのかがテーマです。 ついついテーマから外れてしまう気も理解できます。 プログラマさんがついついなりがちな気質ですよね。 ただ、収斂する力もまたとても大切です。上位のプログラマさんはこの力を皆持っています。
- tkmojo
- ベストアンサー率50% (105/207)
まず、widthの指定がありませんので、 現状だと親ボックスもしくはブラウザの右端から200pxと計算するようになっています。 画像と同じ、600pxの横幅が希望なら、width:380;を記述しましょう。（padding分を引く） それと、質問者様の記述したcssをコピペしたら、 「二番目の通常のCSS」以下の指定が全て効きません。 インデントを全角スペースで行っているのが理由だと思います。 全角スペースは「隙間」ではなく文字ですので、「■■height」や「ああpadding」というような指定をしているのと同じことです。 インデントはTabキーで行いましょう。 また、heightが指定されていますが、 文字サイズ等が大きくなった際には文字がはみ出して。下のボックスにかぶってしまう可能性があるので、 heightは指定せず、文章量や文字サイズが変わった際にも対応できるように作成する事をお勧めします。 display:inline;は改行をしないというのは誤りです。 親ボックスの幅で自動改行されます。 インライン要素には、それ自体に横幅を設定する事は出来ませんので、 横幅を指定された親ボックスが無い場合には、ウィンドウの端から端まで行くことになります。
お礼
あれ、入れたと思っていたのですがないですね。 widthはここに入力する際に入れ忘れておりまして、 実際にはwidth: 640px;は入っておりますので問題ありません。 混乱させて済みません。実際はちゃんと入っています。 それなのに動かないということです。 また、タブキーの件ですが、タブキーになっていないCSSの方は手入力していました、ここに入力する際にタブキーを押すと、フォームだからか、タブが昨日せず、だったので、全角スペース二つを付けていただけで、こちらも実際はタブが入っていますのでこちらも問題ありません。 heightの件はおっしゃる通りですが、背景画像は指定heightで作っており、単色のものではないので伸ばせる画像ではありません。なので予め110pxという縦もけっこう長い画像にしています。このhタグはそこまで長い文章は入れないルールになっているので三行にはいかないので大丈夫なんです。二行まで入って大丈夫なように制作しております。 というようなことで、なぜhタグのテキストを改行させたいのにできないのかわからないのです。padding-rightを200pxもとっているというのに・・・いったいなぜでしょうか・・・直したい・・・
お礼
最高です！