こんにちは、ぴんしゃんです。

先週の土曜日はサイブリッジのみんなでディズニーシーに行ってきました。
集まった人数はなんと26人！タワーオブテラーは貸し切り！
さらにITS（関東ITソフトウェア健康保険組合）の優待で一人2,000円！
夢の国ですっかりリフレッシュをしてきました。

フォントのサイズを「％」で統一

さて今回はブラウザによって異なるフォントのサイズを
「％」の表記で統一する方法についてです。

私たちを常に悩ませるブラウザの違いですが、フォントサイズもその一つです。
例えば「font-size:80%;」としたものの、あれ何かこっちとこっちで大きさ全然違うな
みたいなことがあります。
px指定をしてしまうと文字サイズの可変ができなくなるし...
ハックを使うにしても、いちいち指定するのは面倒だし...

というわけで今回お手本にするのが
YUI（Yahoo! User Interface） Libraryのチャートです。

下記のようにbodyタグとtableタグにそれぞれ指定をします。
文字サイズの基本は13pxとなります。

body {
    font:13px "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif;
    *font-size:small;
    *font:x-small;
}
table {
    font-size:inherit;
    font:100%;
}

そしてそれぞれのフォントサイズは下記の数値を参考にして指定します。
10pxのサイズに指定をしたければ「font-size:77%;」といった形です。

10px         77%
11px         85%
12px         93%
13px         100%
14px         108%
15px         116%
16px         123.1%
17px         131%
18px         138.5%
19px         146.5%
20px         153.9%
21px         161.6%
22px         167%
23px         174%
24px         182%
25px         189%
26px         197%

このように指定すれば、どのブラウザで見てもサイズが統一されて
ハックを使う必要もなくなります。

かのうです。
もう夏です！暑いです！アイスは太らないっていう噂を信じて今年の夏は食べまくりで乗り切ろうと思います。

さて、今回はCSS3についてのお話です。
CSS3を使えば今まで画像で作成してきたボタンやアイコンをなんとCSSだけで表示することができます。
ブラウザでフォントサイズを変更したときも同じく拡大縮小するのでよいですよね。
懸念としてはやっぱりIEだと正常に表示がされないこと。
世の中から一掃されるか、CSS3対応になることを願うばかりです。

ボタン

イメージ

デモページ

HTML

<a class="button" href="#">Rounded</a>

CSS

.button {
　　　background:-moz-linear-gradient(center top , #FAA51A, #F47A20) repeat scroll 0 0 transparent;
　　　border:1px solid #DA7C0C;
　　　color:#FEF4E9;
　　　-moz-border-radius:2em 2em 2em 2em;
　　　-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
　　　cursor:pointer;
　　　display:inline-block;
　　　font:14px/100% Arial,Helvetica,sans-serif;
　　　margin:0 2px;
　　　outline:medium none;
　　　padding:0.5em 2em 0.55em;
　　　text-align:center;
　　　text-decoration:none;
　　　text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
　　　vertical-align:baseline;
}
.button:hover {
　　　text-decoration: none;
　　　background:-moz-linear-gradient(center top , #F88E11, #F06015) repeat scroll 0 0 transparent;
}
.button:active {
　　　position: relative;
　　　top: 1px;
　　　background:-moz-linear-gradient(center top , #F47A20, #FAA51A) repeat scroll 0 0 transparent;
　　　color:#FCD3A5;
}

CSS3 Gradient Buttons

アイコン

イメージ

デモページ

HTML

　　　<div id="rss_icon_main" class="inside">
　　　　　　<a href="http://rathersplendid.net"><span class="outer_ring"><!/span>
　　　　　　<span class="middle_ring"></span>
　　　　　　<span class="circle"><!/span></a>
　　　</div>

CSS

#rss_icon_wrapper {
　　　-moz-border-radius:1.5em 1.5em 1.5em 1.5em;
　　　background:-moz-linear-gradient(center bottom , #FF6B1C 12%, #FF9F29 100%) repeat scroll 0 0 transparent;
　　　border:0.3em solid #C63E0D;
　　　height:10em;
　　　overflow:hidden;
　　　position:relative;
　　　width:10em;
}
#rss_icon_main.inside {
　　　left:10%;
　　　top:10%;
}
#rss_icon_main {
　　　height:80%;
　　　overflow:hidden;
　　　position:relative;
　　　width:80%;
}
#rss_icon_main.inside span {
　　　border-color:#FFFFFF;
}
.outer_ring {
　　　-moz-border-radius:10.5em 10.5em 10.5em 10.5em;
　　　height:170%;
　　　right:0;
　　　top:0;
　　　width:170%;
}
.middle_ring {
　　　-moz-border-radius:8em 8em 8em 8em;
　　　height:110%;
　　　position:absolute;
　　　right:32%;
　　　top:32%;
　　　width:110%;
}
.circle {
　　　-moz-border-radius:4em 4em 4em 4em;
　　　background-color:#FFFFFF;
　　　bottom:0;
　　　height:30%;
　　　left:0;
　　　width:30%;
}
.outer_ring, .middle_ring, .circle {
　　　position:absolute;
}
.outer_ring, .middle_ring {
　　　border:1.5em solid #FFFFFF;
}

Rather Splendid

レインボー！

CSS

style="background-image: -moz-linear-gradient(left center , red, orange, yellow, green, blue, indigo, violet); border: 1px solid black;"

MDC

おはようございます。昨日、iPad が予約受付始めましたね。
新卒の営業のアップル信者さんが、お昼休みにソフトバンク表参道店に行ったら行列がすごくて途中で諦めて帰ってきてました。iPad 熱すごいですね。自分も欲しいです！

さて今日はとても便利に使える CSS プロパティの、display: inline-block; について書きたいと思います。

inline-block とは？

インライン要素とブロック要素の特徴をいいところを足して２で割ったような display プロパティの値です。
ブロック要素のように幅・高さが指定でき、インライン要素のように改行されることなく同じ行内に並びます。
img, input, textarea などのような置換要素と似た振る舞いをします。
誤解を恐れずに言うと「テーブルセルっぽくつかえるブロック要素」でしょうか。
大きく特徴を書き出すと、

1. ボックスに対しても vertical-align プロパティが使用可能！
2. 連続するボックス要素を中央寄せにできる（ページャーなどに便利！）
3. 幅・高さが中身の要素に応じて可変するので、px 指定などで決め打ちしなくてOK

サンプル

• 1
• 2
• 3
• 4
• 5

HTML

<ul class="pager">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
</ul>

CSS

.pager {
	margin: 20px 0 0 -3px;
	text-align: center;
}

.pager li {
	display: -moz-inline-box;　/* Firefox2 に対応 */
	display: inline-block;
	margin-left: 3px;
	padding: 3px 5px;
	border: 1px solid #CCC;
	line-height: 1;
	*display: inline;	/* IE6,7 に対応 */
	*zoom: 1;	/* IE6,7 に対応 */
}

ざっくりですが上記のような感じで割とシンプルにページャーが作れます。

ブラウザ対応状況

モダンブラウザは display: inline-block; に対応しているのですが、Firefox2 だと未対応なので、独自拡張の -moz-inline-box を一番上に指定します。
また IE6, 7 についても inline-block に未対応なのですが display が inline、hasLayout が true の状態だと同じような効果が得られます。

inline-block を適用したい要素には

.inline-block {
	display: -moz-inline-box;
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

など用意して class="inline-block" と指定してあげると、簡単・便利に inline-block を使いこなせると思います！
また対応ブラウザは

• IE 6 ～ 8
• Firefox 2 ～ 3
• Google Chrome
• Safari 2 ～ 4
• Opera 9 ～ 10

は網羅しており、業務レベルにでも問題なく使える範囲だと思いますので是非活用していきましょう。

デザイナーのacurryです。 今日はクロスブラウザテストができることで最近話題の 「Adobe BrowserLab」 を使ってみました。

Adobe BrowserLabとは

先月14日にアップデートされたばかりのAdobe BrowserLab。
あのAdobeが公式でブラウザ比較のツールを出しているんですね。
AdobeIDがあれば、誰でも無償で利用できます。
比較できるブラウザは下記の通り。

■Firefox　2.0, 3,0, 3.5　　Windows XP, Mac OS X
■IE 　6.x, 7,x, 8.x　　Windows XP
■Safari　3.x 4.x 　　Mac OS X
■Chrome　3.0 　　Windows XP

試しにサイブリッジのコーポレートサイトを レンダリング比較してみます

URLを入力したら、上記のように表示させたいブラウザをリストから選択。

あとは表示される（レンダリング）を待つだけ！
上記はFireFox3.0（左）とIE7、共にxpOSでの比較です。

IETESTERなどブラウザ比較の便利なツールは多くあるのですが、これはやはりmacOSでの確認もできるのがとても便利です！是非使ってみてくださいね。
下記から利用できます。

「Adobe BrowserLab」

このあいだ iPhone アプリに今までいくら使ったのか調べたら、3万くらい使ってたことに気付いてちょっと反省しているハシモトです。（App Store Expense Monitor で調べられます）
今日は画像置換について書いてみたいと思います。

画像置換とは

画像置換とはCSSのテクニックのうちの一つで、HTMLでマークアップしたテキストをCSSでテキストを隠し、画像に置き換えて表示させる手法のことを言います。
この手法はalt属性が必要でない画像を使用するとき、つまり完全にデザイン目的だけで画像を使用するときに使われたりします。

メリット

1. 文書構造とデザインをHTML・CSSで分離でき、CSSだけで見た目のコントロールができる
2. altのテキストを検索対象に含めない検索エンジンに対してSEO的に効果があるかもしれない
3. background-positionプロパティを応用して、ロールオーバー画像をJavaScriptなしでも再現できる（CSS Sprite）

などが挙げられます。
3番目は弊社の運営する「塾講師ナビ」やその他の媒体でも活用していたりします。

デメリット

1. テキストの内容と画像の情報が等価でない場合、SEOスパムと判定される可能性がある
2. ブラウザの初期設定だと背景画像は印刷されない、CSSがオンで画像がオフの閲覧環境だと何も表示されない
3. 画像置換の方法によっては、音声ブラウザで読み上げられなくなる

などが挙げられます。
メリットだけでなくこういったデメリットもあるのを認知した上で使用します。

画像置換の手法

1. FIR（ファーナー式）。空のspan要素に display: none; を指定してテキストを消す方法。
2. Phark方式。text-indent: -5000px; などマイナスの値を指定して画面の外にテキストを飛ばす方法。

などがよく見られる手法ですが、今回ご紹介するのは

LIR（リーフィー/ラングリッジ式）

と呼ばれる height: 0; と overflow: hidden; をうまく使った手法です。

サンプル

HTML

‹h1 id="sample"›‹a href="hogehoge"›サイブリッジラボ‹/a›‹/h1›

CSS

#sample {
	width: 120px;
	height: 30px; /* 置き換える画像の高さ */
	overflow: hidden;
	background-image: url("/img/common/hogehoge.gif") no-repeat;
}
#sample a {
	display: block;
	width: 120px; /* 置き換える画像の幅 */
	height: 0;
	padding-top: 30px; /* 置き換える画像の高さ */
}

まず height で高さを 0 にしてテキストを隠した後、
padding-top で画像の高さ分を空けて、背景の画像を表示させるというアプローチになってます。
Mac や iPhone でおなじみの Apple のサイトだとこの手法を使って画像置換をしていますね。

画像置換の今後について

HTML5 が普及してくると、img要素のalt属性に関しての仕様がちょっと複雑なことになったり、（参考：HTML5のimg要素のalt属性の仕様は読んでおくべきだと思う。｜CSS HappyLife）
CSS3 が普及して、ウェブフォント（@font-face）が多くのブラウザで使えるようになってきても、
日本語に関してはライセンスの問題であったりファイルの容量などで、しばらくはこれからも画像置換のテクニックが用いられていくんじゃないかなぁと思っています。
英語圏に関しては Typekit など盛り上がっていって面白いことになりそうですね。

そんなこんなで画像置換のお話についてでした。