Posted by しるべっと on 2009 年 2 月 23 日 – 2:59 PM
Filed under javascript, 日記
LightBox風のjavascriptと言えばいろいろな種類がありますよね。
以前うちでもmediaboxとzoomifyで折込チラシや画像をリッチに見せる的なのをやりましたが、今ではもう個人や企業は問わず沢山のサイトで目にする演出です。
このブログもLightBox風のjavascriptが使えるように作ってます(面倒だからあんまり使ってないけど)。最初はLightBoxを使おうと思っていたのですが、やっぱりライセンス的にはもうちょっと緩い方がいいなと思い、lightboxのクローンであるslimboxを選択しました。当時はMooToolsだけだったと思うんだけど、MITの緩さがいいよね的なノリで。
だがしかし他のAjaxも使うとなると、使用するライブラリは出来るだけ統一した方がいいという事で、その後はjQueryのThickBoxを使うようになりました。
まぁそんなこんなで、先日はてブの整理がてらで久しぶりにslimboxのページを見てみると、なんとjQuery版がリリースされてるではないですか!
slimbox2.02
ライブラリ:jQuery
ライセンス:MIT
slimbox1.69
ライブラリ:MooTools
ライセンス:MIT
使うかどうかは置いといて試しておきたいと思います。
Posted by しるべっと on 2009 年 2 月 10 日 – 10:45 PM
Filed under XHTML+CSS, 日記
今回の記事は2008-12-07CSS Spriteで表現する角丸 | Commit Labの続きです。
これはCSS Spriteというテクニックを利用して作った角丸boxです。従来通りならば複雑になりがちな角丸のマークアップを、CSS Spriteで作る事ことによりシンプルで無駄なタグのない記述のhtml+CSSで角丸を表現しています。(IE5,5に対応するときはどうしてもdivが1つ増えますが)
文字の拡大にあわせてboxの縦が伸縮しますので、すぐにフレキシブルな角丸を表現出来ます。またデザインにおいても、htmlとcssのみで作られているので思いのままに装飾する事ができます。
今回は前回の問題点を修正しました。h2のheightをpxで固定していたのはやめて、line-heightのみで高さを調整しました。これで文字を拡大しても、H2から文字がはみ出す事はありません。
またH2にbackground-colorを与え、どれだけ拡大しても背景が途中で途切れないようになりました。
それに伴いCSS Spriteの画像を変更してます。横幅が1.5倍になりましたが、サイズは10バイト少々増えた程度です。またそれに合わせてCSSのbackgroundを変更しました。
今回使用している画像
sample（1色のみのサンプル）
sample2(5色のバリエーション)
Download:kadomaru.zip
動作確認：IE5.5 IE6 IE7 Firefox2 Firefox3 Opera9.62 Safari3 chrome0.4
body, div, address, p, h2 {
margin: 0;
padding: 0;
}
body {
font:100%/1.231 Arial, Helvetica, sans-serif;
padding-top: 30px;
text-align: center;
}
.contentbox {
width: 350px;
padding-bottom: 10px;
margin: 0 auto;
background: url(scbb.png) right bottom;
}
h2 {
width: 350px;
color: #fff;
font: bold 108%/1.9 'メイリオ',Meiryo,;
text-align: left;
text-indent: 1em;
background: #2C6EBD url(scbb.png) no-repeat left top;
}
* html h2 {
padding-top: 3px;
line-height: 1.8;
}
.IE55 {
width: 350px;
background: url(scbb.png) repeat-y center top;
}
p {
letter-spacing: 0.1em;
line-height: 1.5;
font-size: 83%;
padding: 7px 15px 0px;
text-align: left;
}
img {
float: left;
margin: 10px 15px 0px 10px;
}
.justify {
text-align: justify;
text-justify:inter-ideograph; /* IE独自 */
}
<div class="contentbox">
<h2>ipod nanoのアイコン</h2>
<div class="IE55">
<p class="justify">テキスト段落1</p>
<p class="justify">テキスト段落2</p>
</div>
</div>
IE5.5に対応しない場合はdiv=”IE55″ごと削除が可能。しかしその場合はDIV=”IE55″のbackgroundをPに設定(コピペ)する必要がある。
