Bootstrapは、Twitterの謹製オープンソースフレームワークなんだけど、とても使えそう。
Webアプリとかさくっと作りたいときに使うといいのかも。

デザインセンスがない俺でも使えそう。「すきなばしょ」に使おうかな。。。

Moogiftさんの記事
http://www.moongift.jp/2011/09/20110901-2/

Bootstrap Image Gallery
http://blueimp.github.com/Bootstrap-Image-Gallery/関連した記事

• JQueryプラグイン「skroll.js」
• Proceesing.jsが何気に面白い
• Google Maps API V3が面白い！
• Java Scriptの覚え方
• WordPress3.0にバージョンアップしたら、テンプレートJavascriptエラーになった

<img src="http://hogehoge.jp/hoge.png">

と書いていたものを

<img src="data:image/png;base64,iVBORw0KGgo....">

と書けるようだ。

オンラインツールでひとつひとつ変換するのもいいけど、PHPで変換すればアップロードのみで対応ができそう。

<?php
$img = file_get_contents( 'http://hogehoge.jp/hoge.png' );
if ( $img !== false ) {
$img = base64_encode( $img );
}
?>

上記はあくまでもサンプルだけど、これを関数にしてhtmlに埋め込んで、base64にしてキャッシュすればかなり軽量化されるかもしれない。
未検証だけど・・・

「<img src=”data:image/png;」のpngの部分を適宜変える必要があるので、下記のような判定が必要。

<?php
...
static protected function getDataType( $img_link ) {
switch( exif_imagetype( $img_link ) ) {
case IMAGETYPE_GIF      : $res = "gif"; break;
case IMAGETYPE_JPEG     : $res = "jpg"; break;
case IMAGETYPE_PNG      : $res = "png"; break;
//          case IMAGETYPE_SWF      : $res = ""; break;
//          case IMAGETYPE_PSD      : $res = ""; break;
//          case IMAGETYPE_BMP      : $res = ""; break;
//          case IMAGETYPE_TIFF_II  : $res = ""; break;
//          case IMAGETYPE_TIFF_MM  : $res = ""; break;
//          case IMAGETYPE_JPC      : $res = ""; break;
//          case IMAGETYPE_JP2      : $res = ""; break;
//          case IMAGETYPE_JPX      : $res = ""; break;
//          case IMAGETYPE_JB2      : $res = ""; break;
//          case IMAGETYPE_SWC      : $res = ""; break;
//          case IMAGETYPE_IFF      : $res = ""; break;
//          case IMAGETYPE_WBMP     : $res = ""; break;
//          case IMAGETYPE_XBM      : $res = ""; break;
default : $res = false;
}
return $res;
}
?>

オンラインツールもあるので、これもメモ。

Image to data URI convertor
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

WordPressテンプレートやWebサービスを作るときに役に立つと思う。

参考にしたサイト

• http://d.hatena.ne.jp/moogme/20090814/p3
• http://kaworu.jpn.org/kaworu/2008-04-06-1.php
• http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/reduce-http-requests-using-data-uris/
• http://css-tricks.com/5970-data-uris/

関連した記事

• Proceesing.jsが何気に面白い
• jQuery.Deferredってなんとなく便利のような気がする
• twitterの画像のURLを取得する
• HTML5のカスタム属性について
• FlexFTP

http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index.html

JavaScriptを使わずにここまでアニメーションができると、もっと面白い表現ができるかもと思ってしまう。関連した記事

• Google Maps APIでマーカーにGIFアニメーションが動かなくなるのを防ぐ方法
• Raphael.jsでアニメーション
• CSS3を先行実装しているプロパティまとめ
• 「Action Script3.0アニメーション」を買った
• Flexでアニメーション

.hoge {

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(<strong>src="./overlay.png"</strong>, sizingMethod="scale");

}

IEの独自拡張。Direct Xで実現する方法で実装することにした。
このほうがシンプルだったため。

背景は透過になったのだが、aタグが効かなくなってしまった。
えっ？！と思って、調べてみるとどうやらaがこのプロパティ適用内で使われているとリンク自体が効かなくなる現象があるようだ。

対処方法として、「position: relative;」と「z-index」を使い、適用内にもうひとつdivを作ってそこに適用させることで対処できるみたい。
※具体的な対処方法はない。

導入の簡単な「DD_belatedPNG」がおすすめ。

<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
 DD_belatedPNG.fix('#hoge');
</script>
<![endif]-->

「#hoge」の部分は、適用したidまたはclassを指定してあげるだけ。
とても簡単なんだけど、これもCSSの設計時に留意しなくちゃいけないのが、時々レンダリングが遅れて、とんでもないところにその要素が配置されることがあった。
ウィンドウサイズを大きくしたり小さくしたりすると治る。導入の際には、注意が必要かも。

参考サイト
IE-winで透過PNGを利用する方法関連した記事

• DD_belatedPNGが背景が違う位置になってしまった。
• safariでHTML上に画像サイズを取得する際の注意点
• Javascriptの配列を空にする方法
• Javascriptで複数の戻り値を返す方法
• お仕事用サイト「Branberyheag!!.jp」をローンチしました〜

IE7だけこのz-indexの解釈の仕方が違うようだった。通常は、z-indexをどこの階層の要素を指定してもその順番が守られる。IE7の場合は、違って、同一階層に要素がないといけないらしい。いくら重なる順番を指定しても階層が重なっているとそちらが優先されてしまい、z-indexの重なり順よりも階層がどこにあるのかで判断されてしまうようだ。

えー、と思ったけどIEなんてこんなもんだろうね。動的に要素を出力する際は、注意が必要。関連した記事

• AS3 TextFieldでの折り返し
• flashDevelopにおけるフォント埋め込みにハマった
• [AS3]オブジェクトの重なり順制御するには・・・
• CSSで背景にPNG画像使ったときのIE6対応の注意点
• HTML5についていろいろと調べてみた

DEMO←ここで確認できる。

<a href="#">
 <span>Button</span>
</a>

.button{
 margin: 10px;
 text-decoration: none;
 font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
 display: inline-block;
 text-align: center;
 color: #fff;

 border: 1px solid #9c9c9c; /* Fallback style */
 border: 1px solid rgba(0, 0, 0, 0.3);

 text-shadow: 0 1px 0 rgba(0,0,0,0.4);

 box-shadow: 0 0 .05em rgba(0,0,0,0.4);
 -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
 -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

}

.button, .button span{
 -moz-border-radius: .3em;
 border-radius: .3em;
}

.button span{
 border-top: 1px solid #fff; /* Fallback style */
 border-top: 1px solid rgba(255, 255, 255, 0.5);
 display: block;
 padding: 0.5em 2.5em;

/* The background pattern */

 background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
 -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
 background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
 -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
 -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
 -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

/* Pattern settings */

 -moz-background-size: 3px 3px;
 -webkit-background-size: 3px 3px;
}

.button:hover{
 box-shadow: 0 0 .1em rgba(0,0,0,0.4);
 -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
 -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
}

.button:active{
 /* When pressed, move it down 1px */
 position: relative;
 top: 1px;
}

.button-blue{
    background: #4477a1;
    background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
    background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
}

.button-blue:hover{
    background: #81a8cb;
    background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
    background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');
}

.button-blue:active{
    background: #4477a1;
}

グラデーションがIE/Gekko関係なく使えるのは、すごい便利だと思う。
出典元：コリスさん「[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法」
http://coliss.com/articles/build-websites/operation/css/css-tutorial-cross-browser-css-gradient-buttons.html関連した記事

• CSS3メモ１
• IEでCSS3を実現するCSS3 PIE
• adobe AIRでのBasic認証
• 背景画像を使用しないCSSスプライト
• dtタグのフロートについて

CSSにIE6のみに適用のために以下のプロパティを定義。

<pre>html,body{
    width :100%;
    height:100%;
    overflow:auto;
    margin:0;
    padding:0;
}
div#samp{
    position: fixed!important;
    position: absolute;
}
</pre>

div#samp｛｝は、position:fixed;を適用させたい部分に適用する。html,bodyに定義してあるプロパティで「overflow:auto;」となっているが
適宜調整が必要になってくる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTMLファイルで上記の宣言文を忘れずにする。
互換モードでは、使えないので注意が必要。

Javascriptで対応しようと思ったけど、うまくいかなかった。
スクロールするたびにJSのEVENTが反応して、きれいではなかった。

元ネタ

http://d.hatena.ne.jp/cyokodog/20090323/jQueryExFixed
http://d.hatena.ne.jp/cyokodog/20081204/PositionFixed03関連した記事

• Clipプロパティ
• history.pushStateできれいなURLを
• javascriptとユーザ環境について
• 画像にbase64をかけてhtmlやCSSに埋め込む
• phoneGapの可能性

対処方法として・・・

div ul li{display:block; zoom:1;}

「zoom:1;」を入れることで余白がなくなる。
※IE独自機能関連した記事

• dtタグのフロートについて
• phoneGapの可能性
• Web Worker とWeb Storageの組み合わせで何ができるか考えてみた
• FlexFTP
• javascriptとユーザ環境について

どんなプロパティに対応するかというと・・・

</pre>
</div>
<div><span style="color: #333333; font-family: Helvetica, Verdana, sans-serif; line-height: 18px;">
<pre style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #eeeeee; display: block; padding-top: 10px; padding-right: 12px; padding-bottom: 10px; padding-left: 12px; background-position: initial initial; background-repeat: initial initial; border: 1px solid #cccccc;"><code>behavior: url(PIE.htc);</code></pre>
</span></div>

関連した記事

• CSS3を先行実装しているプロパティまとめ
• CSS3アニメーションナビゲーションサンプル
• CSS３のグラデーションをクロスブラウザ対応で実装する方法
• CSS3メモ１
• HTML5についていろいろと調べてみた

fontのライセンス次第だけど、サーバにアップロードして、CSSで指定すれば好みのフォントで表示できる。将来、画像で加工して見出しを作る行為自体がなくなるかもしれない。

指定の仕方は・・

@font-face {
 font-family:TestFonts;
 src:url(フォントのURL) format("opentype");
}
body {
 font-family:TestFonts;
}

関連した記事

• Google font APIはすごいぞ
• flashDevelopにおけるフォント埋め込みにハマった
• Web Storage の使い方
• dtタグのフロートについて
• adobe AIRでwordpressのクライアントソフトを作ってみたくなった