cssで角丸で一部の画像だけを変更したい。

質問

cssで角丸テーブルにトライしています。（参考にしたサイトhttp://jmblog.jp/archives/94）
これをアレンジして、左上の画像（タイトル部分にする）のみを枠によって変えたいと思っています。<span class="taiken"></span>のクラス名を変えることで画像を変えられると良いのですが、
でもどうしても上手く行きません。どうぞどなたかお助け下さい。

＊＊＊＊＊＊＊＊ＨＴＭＬ＊＊＊＊＊＊＊＊＊

<div class="dialog">
<div class="header"><span class="taiken"></span>
<div class="c"></div>
</div>
<div class="body">
<div class="c">テストテスト</div>
</div>
<div class="footer">
<div class="c"></div>
</div>
</div>

＊＊＊＊＊＊＊＊ CSS ＊＊＊＊＊＊＊＊
.dialog {
width:698px;
}
.dialog .header .c,
.dialog .footer .c{
font-size:1px; /* ensure minimum height */
height:20px;
}
.dialog .header span.taiken{
background-color: transparent;
background-image: url(../pic/head_r1_c1.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
height: 37px;
}
.dialog .header .c{
background-color: transparent;
background-image: url(../pic/head_r1_c2.gif);
background-repeat: no-repeat;
background-position: right 0px;
height: 37px;
}
.dialog .body{
background-color: transparent;
background-image: url(../pic/body_r2_c1.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
}
.dialog .body .c{
background-color: transparent;
background-image: url(../pic/body_r2_c2.gif);
background-repeat: repeat-y;
background-position: right 0px;
}
.dialog .footer{
background-color: transparent;
background-image: url(../pic/footer_r3_c1.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
.dialog .footer .c{
background-color: transparent;
background-image: url(../pic/footer_r3_c2.gif);
background-repeat: no-repeat;
background-position: right 0px;
}

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

回答No.5

kuzumiHK · ベストアンサー

No.1です。
タイトル部分はgoldfoxさんの方法がよいと思います。
divと違い、h1やpタグは、ブラウザが適宜marginとpaddingを設定していますので、下記のようなスタイルを追加して0に定義しなおす必要があります。これでh1が表示されると思います。

*{
margin:0;
padding:0;
}

<div class="dialog">
<div class="header taiken">
<h1 class="c"><img src="" alt="title"></h1>
</div>

もし、背景画像とタイトル画像の縦横サイズが違う場合は位置を調整する必要がありますので、その場合は、下記のスタイルを追加すれば、
タイトル画像の上と左の余白を調整できます。

div.taiken h1{
margin-left:0px;
margin-top:0px;
}

margin-leftがタイトル画像の左側の余白
margin-topがタイトル画像の上側の余白
各0pxのところを変更します。

即興で書いたため、ブラウザ確認してません。
間違っていたらすみません。CSSは慣れるまで大変なので、
いろいろ試してがんばってみてください。

お礼

出来ました～！！
お手数なのにかみ砕いた説明をしていただき本当にありがとうございます。調整する部分もよく分かりました。
「h1やpタグは、ブラウザが適宜marginとpaddingを設定していますので、下記のようなスタイルを追加して0に定義しなおす必要があります。」なるほどです。
勉強不足ですみません。本当にありがとうございます。

回答No.11

DrFell

yuzumayu　様
いいねぇ。９０点、合格ってところかな。heightいらない。あと、好みだけど、classもdiv{ }でOK。最初はclass付けないで使いまわす練習した方が上達早いよ。本当はほっとくつもりだったんだけど、なんか、採点しろオーラを感じてしまいました。

今回わかったと思うけど、世の中には間違った記述や、管理人自身もわかっていないのに、ｈｔｍｌ講座やｃｓｓのハウツーやってる所がいっぱいあります。もう、見分けはつくよね？そういうところはアイデアだけ見習い改良して使いましょう。

唯一正しいのは仕様書で、和訳もでています。正しいことを知りたい時は、仕様書を確認すること。が、正しいのを100％表現するブラウザは今のところでていません。一番普及しているには正しくない率がもっとも高いブラウザです。ので、あまり正しさにこだわってもいられないのですが現実です。だから、ますます、パズルっぽくなります。

インラインとブロックは違うらしいけど、なんかよくわからないと思います。でも、かなり性格が全然違うのでちょっとあそんでみてね。１つづつ、試してみてね。なんとなくでもわかれば今はいいです。
htmlの準備
小さなテーブルを10こ（コピペでいいから、2×2段程度<table>～</table><table>～</table>……）用意して並べてください。P要素にそこそこの文章を用意してください。pの中にリンクも少し入れてください。

css側で
1.p要素を罫線で囲む
2.それをbottomだけにする
3.p要素をインラインに変えてみる。（display:inline;）
4.tableをインラインに変えてみる。
5.リンクをブロック要素に変えてみる。（display:block;）
さぁ、難題
6.問題imgはどっちだと思う？（調べる前に考えてみてね）

最後に、数々の失礼をお許しください。では、ｃｓｓ楽しんで征服？してください。ごきげんよう。

お礼

ありがとうございます！！
うれしいです！
すっごく「採点してください」オーラ出してました！
そして、おっしゃる通り本当にこの短期間で色々な説明サイトの「ちょっとこれは違うかも」感が分かるようになった気がします。
新たな課題までありがとうございます。
いま、まだ分かっていません。でも、もう少し（調べず）考えます。
何とか克服したいです。

回答No.10

kuzumiHK

厳密に書こうと思えばDrFellさんの書き方が正しいので、
スタイルに興味をもたれたら、ぜひこれから書き方にもこだわってみてください。
まだまだ、スタイルシートの世界は、CSSには精通していても、CSS2の仕様で十分デザイン的にも完成していると言い切れるようなデザイン音痴なスタイルマスターさんばかりなので、クライアントを納得させられるような微妙なデザインの違いまで理解できて、なおかつCSSにも精通しているという人が、全般的に不足しています。そのため、デザインから入って、CSSに興味を持たれるとチャンスが多くありそうです。
CSS2は（ブラウザの実装の問題を除いても）デザインにこだわるにはまだまだ不備の多い仕様ですが、CSS3に期待しつつ、デザインにもこだわれるスタイルマスターがじゃんじゃん増えるといいと思います。

>pはインライン要素。

書き間違いだと思いますが、Pはブロック要素？

お礼

おそらく、私へのトラップです。
今回は私も気がつきました（Nine-nineさんオススメのサイトを読んで）
pはブロック要素！ですよね？DrFellさん！
なんだか、高校の時の間違い探しテスト問題をしているようです（笑）

私のわかりにくーいcssの修正をお助け頂き本当にありがとうございます。
一つを表現するにも本当に色々なやり方があるものという事が分かったのも今回の勉強です。
皆さんのように本当に無駄のない正しいコードを作れるようになれたら・・かっこいいです。
道は長いですが、がんばります。

回答No.9

Nine-nine

ｃｓｓとｈｔｍｌはセットのものなので、ｈｔｍｌの事もわかっていないと思って、真っ白な気持ちで見てください。

http://www.kanzaki.com/docs/html/lesson1.html
続いて
http://www.kanzaki.com/docs/html/htminfo17.html
でワンセットです。ここが一番お奨めですが、ちょっと固い感じでとっつきは悪いです。でも、簡単で正確です。興味があれば、その上の、http://www.kanzaki.com/docs/htminfo.htmlアタリをおさえれば理念はばっちり学べます。

他にもいろいろお奨めサイトはあるのですが、ごく一部間違っていたりになり、安心してお奨めとなると上のサイトですね。例えば今回の解答者の方にも一部間違っていたりと、わざと？の方も居られる様ですがね。

理想と現実はちょっと違います。他の方もおっしゃってますが、初期値の違いとプログラムミス、過去のブラウザにどうあわせるかなど、落とし穴はいっぱいあります。はまりやすいのはブロック・インラインの違いとブロック要素の大きさの解釈、フロートの解除かな。

まぁ、基本はおさえて現実とおりあってだましだましってかんじですね。
がんばってください。

お礼

ご丁寧なご回答ありがとうございます。
いま、順番に理解に務めています。
まだ、全部は読めていませんが、私は確かに見栄えをつくることに振り回されて「なんのために」が完全に抜け落ちていたのが確認出来ました。
基本を押さえれば自然と無駄なコードが無くなるのが少し分かりました。
目の前の山は大きいですが、お助けいただきながらもこの攻略できる感がいいですね！楽しいです。
まずはおっしゃっていただいた内容の理解にがんばります！！

回答No.8

DrFell

残念ですが違います。
<div><h1>記事のタイトル</h1><p>記事の中身</p></div>
htmlは上だけです。

ヒントはdivにしかbackgroundはつかないものではない。
h1はブロック要素。
pはインライン要素。

h1は見出しを表すタグ
pは段落を表すタグ。

divは見出しなど構造的意味のないブロック要素にしかたなくつけるタグ。
spanは段落などの構造的意味のないインライン要素にしかたなくつけるタグ。

つまり、divに付けられるプロパティはｈ1にも付けられる。無駄にdivを付ける必要はない。無駄にclassを付ける必要もない。

私なら、上のhtmlでh1に元ヘッダー部分の画像を、divの下に元フッター部分の画像を、あて、中間部分は同じ色のカラーコードに。

お礼

出来ました～！！
今度こそあってます？？？あってます？？

<div class="taiken">
<h1>記事のタイトル</h1>
<p>記事の中身</p> <p>記事の中身</p> <p>記事の中身</p>
</div>

h1 {
background-image: url(../pic/maru-top.gif);
background-repeat: no-repeat;
height: 37px;
}

.taiken{
background-image: url(../pic/maru-foot.gif);
background-repeat: no-repeat;
height: 20px;
background-position: left bottom;
width: 698px;
background-color: #FFFFCC;
}

回答No.7

Nine-nine

私もDrFellさんのようにすると思います。リキッド幅なら違いますがね。
勉強の仕方間違っていますよ。ｃｓｓを勉強してタイトルにｈ1やｈ2をなぜつけるのか？って聞く人はｃｓｓの記述だけどこかからコピペすることを勉強していると言い張る人です。

ｃｓｓにとって、角丸は飾りでしかありません。ｈ1やdivにつく飾りです。ｃｓｓにとって重要なのは、文章が構造化されていることです。まず、構造と見た目の分離に触れている入門者用のサイトを一かじりされると、目がさめるのでは？

お礼

勉強の仕方間違っていますよね。
どのように手を着けて良いのか分からず、実際困っています。
本やサイトで自分のしたいことに近いものを見つけて猿まねのようにつくって、そこから一生懸命意味を解析している状態です。
もし、よければ「構造と見た目の分離に触れている入門者用サイト」でオススメのものがございましたら教えていただければ幸いです。

回答No.6

DrFell

本気なら、基本を学びましょう。私なら、見本のサイトのような見た目にどうしてもしたいなら
<div><h1></h1><p></p></div>
にしますね。あんなややこしいことすげーって感じ。

ちなみに、見出しの大きさが決まっているなら<h1></h1>だけで済ませます。

お礼

出来ました！すごい！簡単ですね。
色々調べておっしゃっている意味が今やっと分かりました。

角丸のタイトル部分を枠ごとに変えて全体を角丸線で囲みたいので

<div class="top"><h1>記事のタイトル</h1></div>
<div class="middle"><p>記事の中身</p></div>
<div class="bottom"><p></p></div>

.top{
width:698px;
background-image: url(../pic/maru-top.gif);
background-repeat: no-repeat;
background-position: bottom;
height: 37px;
}
.middle{
width:698px;
background-image: url(../pic/maru-body.gif);
background-position: center;
}
.bottom{
width:698px;
background-image: url(../pic/maru-foot.gif);
background-repeat: no-repeat;
background-position: top;
height: 20px;
}

というようなことですよね？？おっしゃっているものとあっていますでしょうか？

回答No.4

DrFell

いやぁ、いいかげんなお礼をありがとう
hnとはｈ1・ｈ2・ｈ3のことだよん。
で、インラインを調べればアウトラインなんてないってわかるはずなんだけど。
こぴぺだけしてたら、使っちゃいけない、簡単に思えるものに手をだすんだよねぇ。
勉強する気なんてないんだろぅ？
貴重なアドバイス、ははは、便利な言葉だよねぇ

お礼

申し訳ありませんが、本気です。
本気で分からないなりに調べておりました。

回答No.3

goldfox

難しく考える理由は何ですか？
現状（.header）の画像を変えたいだけなら、
.dialog .header{
background:transparent url(rc_r1_c1.gif) no-repeat 0px 0px;
}
このrc_r1_c1.gifを別の画像にすればいいだけですよ。
この上に別の画像を「重ねたい」（例えばタイトル画像を載せたい）なら
<div class="c"><img src="" alt="title"></div>
と、<div class="c"></div>の中に書く必要があります。
文法的には
<h1 class="c"><img src="" alt="title"></h1>
のほうがいいかもしれません。（余白などはスタイルシートで調節）

お礼

ありがとうございます！
いくつもの角丸を１ページに載せたくて
私もheader_1,header_2といったように画像を変更したdivを増やそうかと思ったんですが、
そうすると
.dialog .header .c{
background-color: transparent;
background-image: url(../pic/head_r1_c2.gif);
background-repeat: no-repeat;
background-position: right 0px;
height: 37px;
}
などもheader_1,header_2の数だけ増やさないといけなくなるのかなと思い、考えが難しい方に方向に進んでおりました。

教えていただいた<div class="c"><img src="" alt="title"></div>という方法は全く思いつきませんでした。
これだとaltもつけられるし最高です。
ただ、やってみたところ<div class="c"><img src="" alt="title"></div>は
若干画像がずれるものの、タイトルにしたい画像は出ますが
<h1 class="c"><img src="" alt="title"></h1>
の場合は希望の画像が表示しないのです。
おそらくcss側の調整が出来てないからだと思うのですが・・どこをさわったら良いのか分かりません。
css側の調整を教えていただけますでしょうか？お手数お掛けして申し訳ありません。
またh1にするのはなぜですか？勉強不足で大変申し訳ありませんが、お教えいただければ幸いです。

回答No.2

DrFell

質問の意味がよくわからないのですが、固定幅でしたら、コーナー罫は画像２つでできないですか？無駄にdiv付けすぎなのでは？cssは物理レイアウトの翻訳ではうまくいきませんよ。

これをアレンジして、左上の画像（タイトル部分にする）のみを枠によって変えたいと思っています。<span class="taiken"></span>のクラス名を変えることで画像を変えられると良いのですが、

ここの意味がわからないのですが、タイトルなら、hnに画像をいれればすむ話では？spanって、構造的意味のないインライン要素ですから、画像にはふさわしくない気がします。インライン要素、アウトライン要素のこと理解されているのでしょうか？

お礼

すみません。今回初めて角丸をつくってみるのに参考にしたサイトがこの方法で、私にはわかりやすかったのでその方法でアレンジしようとしておりました。
<span class="taiken"></span>にしたのは、<div class="header">をさら細分化する方法がわからず、これ以上divを増やすのもどうかと思い、いろいろサイトを見てspanが使えるのかしらと思ったからです。
勉強不足で申し訳ありません。hn要素、インライン要素、アウトライン要素については本当に理解不足です。これからしっかり勉強させていただきます。貴重なアドバイスありがとうございました。

回答No.1

kuzumiHK

左上の背景画像をそのままタイトルにするのであれば、
taikenとheaderと同じdivに入れて変更するのがよさそうですね。
ただしこの場合はタイトルにaltを追加することができないので、
背景画像と別にしたほうがいいかもしれません。

<div class="dialog">
<div class="header taiken">
<div class="c"></div>
</div>
<div class="body">
<div class="c">テストテスト</div>
</div>
<div class="footer">
<div class="c"></div>
</div>
</div>

<div class="dialog">
<div class="header taiken2">
<div class="c"></div>
</div>
<div class="body">
<div class="c">テストテスト</div>
</div>
<div class="footer">
<div class="c"></div>
</div>
</div>

.dialog {
width:698px;
}
.dialog .header .c,
.dialog .footer .c{
font-size:1px; /* ensure minimum height */
height:20px;
}
.dialog .header{
height: 37px;
background-color: transparent;
background-repeat: no-repeat;
background-position: 0px 0px;
}

.dialog .taiken{
background-image: url(../pic/head_r1_c1.gif);
}

.dialog .taiken2{
background-image: url(../pic/taiken2.gif);
}

.dialog .header .c{
background-color: transparent;
background-image: url(../pic/head_r1_c2.gif);
background-repeat: no-repeat;
background-position: right 0px;
height: 37px;
}
.dialog .body{
background-color: transparent;
background-image: url(../pic/body_r2_c1.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
}
.dialog .body .c{
background-color: transparent;
background-image: url(../pic/body_r2_c2.gif);
background-repeat: repeat-y;
background-position: right 0px;
}
.dialog .footer{
background-color: transparent;
background-image: url(../pic/footer_r3_c1.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
.dialog .footer .c{
background-color: transparent;
background-image: url(../pic/footer_r3_c2.gif);
background-repeat: no-repeat;
background-position: right 0px;
}

お礼

まさにまさに私が知りたかった内容です！！そして出来ました！
HTMLにしてもCSSにしても正確にどのように書けば良いのか分からなかったので、本当に助かりました。
<div class="header taiken">のように書けるんですね。
たしかに、ただの角丸ではなく、角丸の一部をタイトルのように扱うのであれば、altを入れられる状態にしたほうが良いですね。
そうするとgoldfoxさんが教えて下さっている<h1 class="c"><img src="" alt="title"></h1>が良いということですよね。
本当にありがとうございました！！まだまだがんばって勉強します。