'Web備忘録' 一覧
CSSで透過を用いたロールオーバー
ロールオーバーは、CSSで背景を動かす方法とJavaScriptで画像を入れ替える方法が有名です。
今回はもっと手軽にロールオーバーを実装することができるので、備忘録に残します。
※突貫開発時くらいしか使えないと思います。
※IE6は未対応
div#test a:hover img{
opacity:0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
background: #fff;
}
jQueryで自動伸縮ゲージの実装
ゲージ？ステータスバー？のようなものを実装したくて、Google検索でいろいろ探してみたのですが、なかなか見つからなかったので、自作しました。
●デモ
//
//
※jQueryの Easing Plugin を使ってます。
ダウンロードはこちらからどうぞ。
http://gsgd.co.uk/sandbox/jquery/easing/
●HTML
<ul>
<li><img class="block1" src="http...
ソーシャルボタンの設置
今回は、Google+1，facebookのいいね！ボタン，twitterのツイートボタン，はてなブックマークボタンの設置とそれらの“横並び”CSSについての備忘録です。
これらは遂次増えていく事が予想されるので、できるだけ柔軟性のある組み方を心がけたいです。
●Google+1
http://www.google.com/webmasters/+1/button/index.html
※余白があらかじめ確保されている為、CSSで width:60px; ほどを指定すれば標準サイズで余白...
「.clearfix」floatで浮かせても縦幅が要素に応じて変動する便利なクラス
.clearfixをいつも忘れてしまうので、メモ。
/* clearfix
=========================================*/
.clearfix:after {
content: "."; display: block; height: 0; clear: both; visibility: hidden;
}
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
/*==========================...
MySQLのupdateを使って連番を振る方法
フィールドを新しく追加して連番を振る。
//ちなみにフィールドの追加
ALTER TABLE テーブル名 ADD フィールド名 int(10);
int(10)は例です。適当な種類にしてください。
//連番を振る
SET @i := 0;
UPDATE テーブル名 SET フィールド名 = (@i := @i +1);
末尾に ORDER BY や WHERE を指定して採番しても可能。