インラインフレームの装飾

質問

下記のサイトのインラインフレームは画像で周りを4つの画像で装飾しているのですが、ソースを見るとテーブルで囲んでるようです。

http://www.pharm.kyoto-u.ac.jp/

これをCSSでやる方法はないのでしょうか？

同じような画像を作成したのでインラインフレームを装飾しようと思ったのですが、もっとCSSで簡単に装飾できないものかな？と思いました。

ご存知の方いらっしゃいましたらご教示ください。
よろしくお願いします。

回答No.4

神崎 渉瑠（@taloo） · ベストアンサー

こういうやり方もあります。
これが最もよく使われた方法、王道だと思います。

<div id="container">
<div id="container-top">
<div id="container-bottom">
<div id="container-left">
<div id="container-right">
<div id="box">ボックス</div>
</div>
</div>
</div>
</div>
</div>

#container-top { background-image: url(上端); }
#container-bottom { bakcground-image: url(下段);
　　　　　　　　margin-top: ＊px; }
#container-left { bakcground-image: url(左端);
　　　　　　　　margin-bottom: ＊px}
#container-right { bakcground-image: url(右端);}

これでたぶん行けると思います。
background-position、background-repeatを適宜付けてください。
idをつけずに#container div div div { background-image: ＊ }などとしてもいいと思います。

お礼

回答ありがとうございました。
先ほど実行したらうまく出来ました。

回答No.3

神崎 渉瑠（@taloo）

あるボックス（<iframe>でも<img>でも<div>でも、<span>でも）を囲む枠線をデザインする場合、
簡単さで言うとテーブルレイアウトにかなう物はありませんが、いくつかの条件が合えば、簡略化は望めます。

画像やフレームのように、ボックスの幅が固定であればピクセル単位で決め打ちできますから、<div>で上下を囲むことできっちりレイアウトが可能になります。
縦長のメニューやサイドバーなどでも、固定幅であれば同じ方法でデザインできます。
別途widthやheightなどを指定してください。

<div style="background-image:url(上端)"></div>
<div style="background-image:url(左右)">ボックス</div>
<div style="background-image:url(下端)"></div>

レイアウトのためのタグ（<div>にせよ、<table>にせよ）が入るのは避けられません。

-----------
上端、下端の<div>の代わりに、スタイルシートの:after、:beforeというのもあります。
IE7未対応。IE8対応。
Safari/Chrome、Opera、Firefoxはどのバージョンから対応しているかわかりませんが、最新版、最新版-1～2くらいは大丈夫です。

<div id="box">ボックス</div>

#box:before{
content: url(上端画像);
display: block;
width: ＊px;
height: ＊px;
}
#box:after{
content: url(下端画像);
display: block;
width: ＊px;
height: ＊px;
}
#box {
background-image: url(左右画像);
background-repeat: repeat-y;
width: ＊px;
}

-----------
ブラウザに限定的であれば、border-imageというのもあります。
http://www.htmq.com/css3/border-image.shtml

これであれば、

<div style="border-image:＊">ボックス</div>

と書くだけで実現できますし、
幅が可変でも対応できます。

---------------
私は２つめの方法に、IE7対策としてコンディショナルコメントを使っています。
http://home.wi-wi.jp/ （メニュー、ニュース部分）

<!--[if lte ie 7]><div style="background-image:url(上端)"></div><![endif]-->
<div id="box">ボックス</div>
<!--[if lte ie 7]><div style="background-image:url(下端)"></div><![endif]-->

が、むしろ1番目の方法（コンディショナルコメントを付けず、:before :afterも使わない）か、テーブルレイアウトの方がスマートだと思います。

回答No.2

ORUKA1951

No.1です。No.1で示した方法では、IE9以前のIEとOperaではうまく機能しないので、画像を使った方法を示しておきます。(他のfirefox,safari,googleChromeでは表示されます)
　この場合、ウィンドウ巾に合わせて伸縮するリキッドデザインでは変形するため、固定デザインが良いでしょう。
<div class="section">
　<div class="messageBox">
　　<h1><img>見出し</h1>
　　<div>
　　　iframeなり、リストなりの記事が入る。
　　</div>
　　<p class="footer"><img>脚注</p>
　</div>
</div>
　のようにマークアップすることになるでしょう。
　その上で、スタイルシートで、
div.section div.message{
巾や位置を指定
position:relative;
}
div.section div.message h1,
div.section div.messageBox p{
margin:0;
line-height:
}
div.section div.messageBox h1{
font-size;
text-align:center;
}
div.section div.messageBox p{
font-size;
}
div.section div.message h1 img,
div.section div.messageBox p img{
position:absolute;
display:block;
width:100%;
}
で良いでしょう。borderは省略してありますから、画像の枠線と合うように指定してください。
　HTML本来の趣旨からは余分な画像が入ることになりますが、IEの普及率から致し方ないでしょう。

回答No.1

ORUKA1951

私は、原則inlineframeは使いませんが、デザイン自体は簡単にできると思います。
特に紹介されたサイトのようにframeの中にframe、そして埋め込まれているHTMLも無茶苦茶だし・・
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )

過去互換性を重んじるなら画像、そうでなければCSS3のlinear-gradient,border-radiusを使う。

{HTML}class名は、HTML5の新しい要素名( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )とその目的を参考にしてあります。
<div class="article">
＿<div class="header">
＿＿<h1>見出し</h1>
＿</div>
＿<div class="section column3">
＿＿<div>
＿＿＿<h2>過去</h2>
＿＿＿<ul>
＿＿＿＿<li>一月</li>
＿＿＿＿<li>二月</li>
＿＿＿＿<li>三月</li>
＿＿＿＿<li>四月</li>
＿＿＿</ul>
＿＿</div>
＿＿<div>
＿＿＿<h2>現代</h2>
＿＿＿<ul>
＿＿＿＿<li>五月</li>
＿＿＿＿<li>六月</li>
＿＿＿＿<li>七月</li>
＿＿＿</ul>
＿＿＿<h2>未来</h2>
＿＿＿<ul>
＿＿＿＿<li>八月</li>
＿＿＿＿<li>九月</li>
＿＿＿＿<li>十月</li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<p>詳しくは・・・</p>
＿</div>
</div>

お礼

回答ありがとうございました。