hタグの背景画像は長く、中のテキストは途中改行希望

Question

CSSです。
よく、h1とかh2タグをページのローカルコンテンツエリアの一番上なんかに
配置させて、背景画像をつけて、その上にhタグのテキストを入れる表現手法がありますよね。

このとき、背景画像はローカルコンテンツ一杯のサイズで表示させるんですが、
テキストはパディングを効かせて背景画像の四方ギリギリまで表示されないようにしますよね。

例えば、背景画像がwidth:600px、height: 100pxとして、
paddingは、padding-rightだけを200pxとかにします。理由は背景画像の右スミに
グラフィックがあり、その上までテキストが来てしまうと読めなくなってしまうから、
そのグラフィックの上にテキストが載る直前あたりでテキストを改行をさせたいから
右側のパディングだけを広くとります。

しかしこのように表示してくれません。
いったいどうしてで、解決方法は何でしょうか？

実際のソースは以下です。

一番目のリセットスタイルのCSS
------------------------------------------------------------
* {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
color: #000;
font-size: 100%;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,blockquote,table,th,td,strong {
margin: 0;
padding: 0;
}
------------------------------------------------------------

二番目の通常のCSS
------------------------------------------------------------
h2#title {
　　clear: both;
　　float: left;
　　height: 110px;
　　background: url (../img/cmn/bg_h3.jpg) no-repeat;
　　color: #fff;
　　font-size: 1.6em;
　　padding: 20px 200px 0 20px;
}
------------------------------------------------------------

display: inlineだと改行されませんよね。
なので、hタグにdisplayを未指定にしています。はデフォルトはblockなので。

宜しくお願いいたします。

tkmojo · Accepted Answer

まず自分の質問を読み直しましょう。

> 例えば、背景画像が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を指定してみれば、どういう状態かよくわかると思います。

これやりました？
まずは回答もらったものは試してみてください。

ORUKA1951 · Answer

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文書宣言は　だけですみます。これで現行のブラウザは標準モードで動作します。　HTML5の新しい要素をサポートしていないブラウザのために

tkmojo · Answer

すみません、先ほどの回答で一部途中で途切れてしまった所があるので補完します。

「ボックスの幅を背景画像の幅と同一にしたければ、width + padding = 背景画像の」
↓
「ボックスの幅を背景画像の幅と同一にしたければ、width + padding = 背景画像の幅と同じにする必要があります。」

先ほども色々書きましたが、要は下記の修正で目的は達成されます。

width:640px;
↓
width:420px;

何故これで直るかを知るには、先ほどまでの回答をよく読み、
あとはcssについて勉強してください。

ORUKA1951 · Answer

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が必要なのです。　そうでしょうか？例えば複数のセクションを持つ場合　　

という典型的な構造だとします。リンクターゲット、あるいは一意性を示すためにidを振ると　　

とかになるでしょう。その上で、 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 · Answer

> あれ、入れたと思っていたのですがないですね。
> widthはここに入力する際に入れ忘れておりまして、
> 実際にはwidth: 640px;は入っておりますので問題ありません。
> 混乱させて済みません。実際はちゃんと入っています。
> それなのに動かないということです。

画像（600px）の右端から200px開けたいのなら、width:640;は多すぎです。
それではテキストは640px分改行せずに進みます。
左に20px、右に200pxのpaddingが入っているのですから、
h2#titleのボックスサイズはwidthとpaddingを合わせて860pxになっています。
一度background-colorを指定してみれば、どういう状態かよくわかると思います。

もう一度、width、padding、border等の関係を見直してみる事をお勧めします。

上記で直らないとすれば、他に優先される記述があるなど、問題は別の所にあります。

もしくは、書いているテキストが半角英数で続けて書いている場合には
一つの単語として見なされますので、幅を指定しても改行はされませんが、
さすがにこういう事ではないでしょう。

ORUKA1951 · Answer

なぜ、そのような無駄なスタイルシートを書くのでしょう。リセット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のロゴのつもり＿＿サンプル＿＿＿＿＿＿＿

＿＿

本文の見出しだよ

＿＿

・・・

＿

tkmojo · Answer

まず、widthの指定がありませんので、
現状だと親ボックスもしくはブラウザの右端から200pxと計算するようになっています。
画像と同じ、600pxの横幅が希望なら、width:380;を記述しましょう。（padding分を引く）

それと、質問者様の記述したcssをコピペしたら、
「二番目の通常のCSS」以下の指定が全て効きません。
インデントを全角スペースで行っているのが理由だと思います。
全角スペースは「隙間」ではなく文字ですので、「■■height」や「ああpadding」というような指定をしているのと同じことです。
インデントはTabキーで行いましょう。

また、heightが指定されていますが、
文字サイズ等が大きくなった際には文字がはみ出して。下のボックスにかぶってしまう可能性があるので、
heightは指定せず、文章量や文字サイズが変わった際にも対応できるように作成する事をお勧めします。

display:inline;は改行をしないというのは誤りです。
親ボックスの幅で自動改行されます。
インライン要素には、それ自体に横幅を設定する事は出来ませんので、
横幅を指定された親ボックスが無い場合には、ウィンドウの端から端まで行くことになります。

hタグの背景画像は長く、中のテキストは途中改行希望

まず自分の質問を読み直しましょう。

No.4の回答の補足です。

すみません、先ほどの回答で一部途中で途切れてしまった所があるので補完します。

この回答への補足

No.2です。

> あれ、入れたと思っていたのですがないですね。

この回答への補足

なぜ、そのような無駄なスタイルシートを書くのでしょう。

この回答への補足

まず、widthの指定がありませんので、

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング