幅可変画像ブロック : 機能縮小版
2009年3月 1日 18:10 | コメント (0) | トラックバック (0)
キャプション
キャプション
テキストが回り込まない「画像：文章」パーツって、テーブルタグ使わないといろいろ面倒だよなー.....という事で、Takazudo さんの「幅可変な画像ブロックをtable無しで作る」の機能縮小版。
機能的にはどんな内容にでも対応可能な Takazudo さん制作のパーツが一番なので、これは IE 独自の CSS expression 使用による不具合を避けたい人や、CSS が valid でないとなんか気持ち悪いという人向け。
長文キャプションへの対応をばっさり切って単純化したものを基本として、ある程度の制限つきながら長文キャプションを使うパターンへの切り替えも可能。
あえて機能縮小版を作ったのは、個人的に「画像：文章」パーツの使用場面として、キャプション無しのパターンが最も多く、次いでキャプションが1行に収まるパターンで、長文キャプションが必要になった事があまり無かったため。（長文キャプションが必要になる場合、他の見せ方をする方が効果的な事が多い）
キャプションキャプションキャプションキャプションキャプションキャプション
上のパターンが基本形で、キャプションに長い文章を使う場合に適宜改行を入れる必要があるほかは特に制限は無い。
こちらは若干の制限が加わる代わりに長文キャプションをガシガシ書けるタイプで、<div class="imgblock img_left"> に <div class="imgblock img_left long-caption"> を加えることで切り替わる。
このパターンにおける制限は「キャプションは1つ & 最後にしか使えない（画像を複数使う事は可能）」「画像側の方が高くなると3行以上のキャプションは下へはみ出る」の2つ。後者が発生するとかなり痛いので使用場所を吟味する必要がある。
この制限は IE 系で CSS expression を使わずに長文キャプションを実現するのに position: absolute を用いており、キャプションの文字列がレイアウト上の高さを持たないため。
本文が少ない場合に備えて、long-caption を指定すると画像側の div に padding-bottom: 4em が確保され、画像側が高くなっても 3行までのキャプションが表示できるようになっているが、裏を返すとキャプションが1行しかない場合も3行分のスペースが空く事になる。
HTML
<div class="imgblock img_left"><div class="imgarea">
<img src="画像アドレス" width="150" height="150" alt="画像説明" />
<p>キャプション</p>
</div><div class="textarea">
<p>
文章入力側
</p>
</div></div>
CSS
.imgblock {
display: table;
padding: 8px 0 0;
height: 1%;
}
.imgblock .imgarea,.imgblock .textarea {
display: table-cell;
vertical-align: top;
}
.textarea {
height: 1%;
}
.imgblock .imgarea {
position: relative;
}
.imgblock .imgarea img {
display: block;
}
.imgblock > .textarea {
width: 100%;
}
*:first-child+html .textarea {
width: auto;
}
* html .long-caption .imgarea p {
position: absolute;
width: 100%;
}
*:first-child+html .long-caption .imgarea p {
position: absolute;
width: 95%;
}
* html .long-caption .imgarea {
padding-bottom: 4em;
}
*:first-child+html .long-caption .imgarea {
padding-bottom: 4em;
}
.img_right {
direction: rtl;
}
.img_right * {
direction: ltr;
}
* html .img_left .imgarea {
float: left;
}
* html .img_right .imgarea {
float: right;
}
*:first-child+html .img_left .imgarea {
float: left;
}
*:first-child+html .img_right .imgarea {
float: right;
}
.imgblock .textarea p {
padding: 0;
}
.img_left .textarea {
padding: 0 0 0 12px;
}
.img_right .textarea {
padding: 0 10px 0 0;
}
.imgblock .imgarea p {
padding-top: 5px;
text-align: center;
font-size: 80%;
}
コメント(0)
トラックバック(0)
トラックバックURL : http://www.studio-ponytail.com/mt/mt-tb.cgi/156
コメントを投稿する
コメントの投稿には JavaScript が必要です。
ブラウザの JavaScript 機能を有効にしてください。
投稿ボタンを押してもエラーになりますのでご注意ください。