CSSでこんな感じにしたい

質問

添付の画像のような枠を作りたいのですが
ソースを見てもテーブルなどは使っておらず、さっぱりわかりませんでした。

ちなみに下記URLが、今回参考にしようとしているサイトになります。
http://www.kis-inc.co.jp/

1つ不思議に思ったのが、下の角丸の部分に
contact_btm.gifというファイルを使っているみたいですが
ソースを見てもどこでcontact_btm.gifを使用しているのかわかりませんでした。

参考になるようなサイトでも構いませんので
教えていただければと思います。

宜しくお願いします。

回答No.1

salonpath · ベストアンサー

http://www.kis-inc.co.jp/common/css/skin.cssを
「#contact .inner」で検索するとあります。

htmlは
タイトル部分（お問い合わせ）と
コンテンツ部分（屋号や連絡先）に分かれてて
コンテンツ部分の背景の下部にcontact_btm.gifを配置してます。

補足

ありがとうございます。

こうやって遡るんですね。

もう1点気になったのですが、
タイトル部分と下部のcontact_btm.gifは確認できたのですが、
両端の1pxの線をどうやって出しているのかソースとCSSを見ても
わかりませんでした。

こちらもお手すきの際で構いませんので
教えていただければと思います。

宜しくお願致します。

回答No.2

salonpath

対象のhtml部分はこうですよね
<div id="contact" class="section">
<h3>
<a href="xxxxxx">
<img alt="お問い合わせ" src="common/images/contact_head.gif"/>
</a>
</h3>

<div class="inner">
<h4>●●●●株式会社</h4>
<ul>
<li>〒812-0892</li>
<li>●●●●2丁目22番40号</li>
<li>TEL：●●●●</li>
<li>FAX：●●●●</li>
</ul>
<p>
<a href="xxxxx">営業所一覧はこちら</a>
</p>
</div>
</div>

#1で説明したコンテンツ部分（ class="inner"）の背景はすでに使われてるので、あとコンテンツ部分にラインを設置できる要素は
全体を包む「id="contact" class="section"」しか無いです。
なので#contactか.sectionあたりに何かあるんじゃないか？とあたりをつけられます。

お礼

ありがとうございます。
なんとか出来ました。

この御恩は忘れるまで忘れません。