はてなブックマーク

新しいチャットツールのChatPadを使ってみた。 ChatPadとは、アクセスすると他にアクセスしている正体のわからない誰かと強制的に2ショットチャットになるチャットツールです。 使い方は、アクセスしてちょっと待つだけ。勝手に他の誰かと接続されます。 知らない誰かと2ショットってことでだいたい想像は付くとおもいますが、こうなります↓ 話してみた 相手の情報が何一つ無い状況で強制2ショット。いったい何を話せばいいのやら。 とりあえず挨拶→無言というパターンに陥りがちです。（それしかない感じも） 今のところ情報入手が早い人やIT関連の人しかいなさそうなので、とりあえず順応性は高そうな人しかいませんが、一般に広まったらどうなることやら・・・。 きっと出会い系チャットツール化するはず。 入室後一言目が「男？女？」とか。 せめてプロフィールでもあればわかりやすいのですが、それがあったら余計サクサク

ナビゲーションを全て画像にして、それぞれliでマークアップし、inline化して横並びにさせる手法がありますが、この手法はなぜか2pxほど隙間ができてしまう問題があります。 なぜかというと、下記のように１項目ずつソースコードを改行してしまうことにあります。 HTML <ul id="navi"> <li><a href="hoge1.html"><img src="navi1.gif" alt="ナビ1" /></a></li> <li><a href="hoge2.html"><img src="navi1.gif" alt="ナビ2" /></a></li> <li><a href="hoge3.html"><img src="navi1.gif" alt="ナビ3" /></a></li> </ul> 通常、このようにソースを書いても隙間が入ることはないのですが、なぜかソースコード上

今日ちょっとひっかかったIE7のCSSバグをメモしておきます。 どうやらborder付きのbox内に2重に入れ子にしたfloatさせたboxの親要素（ややこしい！）のmarginが効かなくなるようです。 口で言い表しづらいので、以下のソースを見てください。 XHTML <div id="page"> <div id="content"> <ul> <li id="hoge">hoge</li> <li id="huga">huga</li> </ul> </div> </div> こうなっている時、#contentにborderが設定されると、UL要素のmarginが効かなくなります。 CSSサンプルは以下の通り。 CSS * { list-style: none; margin: 0; padding: 0; line-height: 1; } div#page { width: 350

IE6のfirst-letterに関する不可解なCSSバグを発見してしまった…。 ちょっと特殊な複合バグだけど、軽くぐぐっても出てこなかったので、一応ポストしておきます。 first-letterを指定したテキストがhidden状態になるバグ。 以下の条件の時に発生。 ブロック要素内のテキストがインライン要素で囲まれている ブロック要素のIDに対してwidthを指定している ブロック要素のIDに対してfirst-letterを指定している （この場合、タグをセレクターに含めない。#idという指定） xml宣言をしている 以下サンプル HTML <h1 id="siteId" title="BlurBlue-Note"><strong>BlurBlue-Note</strong></h1> この場合、ブロック要素はH1以外のPなどでも同じくバグる。 CSS #siteId { width:

Windows版Safari3.1がリリースされました。 Safari3.1のダウンロード Firefox 2の最大3倍、Internet Explorer 7の最大2倍、Opera 9の最大5.5倍のスピードでページを読み込めます。 また、JavaScriptの実行速度はFirefox 2の最大4.5倍、Internet Explorer 7の最大7倍、Opera 9の最大5倍です。 というわけで、確かに体感できるほど速いです。 特にキャッシュの読み込みが速いのか、一度開いたページの再表示がものすごく速くて、ほぼ一瞬で出てきます。 また、ちょっと重めのJSを使っているページを見ると明らかにFxなどより速いです。5倍とかはわからないですが…。 このSafari3.1、速いだけじゃなく、しっかりHTML5の一部機能とCSSアニメーション（CSS transforms and transiti

jQueryベースの画像ズームイン/アウトのプラグインなんていくらでもあるけれど、自分の思うように動くものやしっくりくるものがなかったので作ってみました。 何事も挑戦あるのみ。 画像を大サイズと小サイズ（サムネイル用）の2枚用意します。 ※widthとheightを2倍に設定しているため、大サイズは小サイズの丁度2倍の大きさにする必要があります。 class名を"zoom"と設定したサムネイルをクリックすると起動します。 サムネイルの上に大サイズの画像をサムネイルと同じサイズ指定で表示し、アニメーションさせながら元のサイズまで戻す、という動きをします。 大きくなった画像をクリックすると逆戻りをした後削除されます。 ズームのサンプル 1枚の画像がそのまま大きくなっているように見えるけれど、実際は2枚使っているという。 今回は自サイト用に作っているので、大サイズ画像の縦横は800*600に固定

MTのページ分割用プラグインに「PageBute」という割とメジャーなものがあるのですが、このページャー（ページへのリンクのリスト部分）のマークアップがちょっとひどい。 こんな感じになります。現在位置が1ページになっている例。 1<a href="2.html">2</a><a href="3.html">3</a> ページャー部分はMTタグになっているので、<li>などで囲うのですが、それぞれの数字自体は裸そのもの。一つの<li>中に全部並んでしまうのです。 これでは現在位置をスタイルすることができません。 というわけで、コードをいじってみました。 $page_lists .= $i == $page_count ? $page_count : &_create_link($i, $site_url . $filename, $file_ext, $i); まず、170行目の上記コードを

最近ようやくjQueryに目覚めました。 面倒な指定がこれほど楽々と出来てしまうと笑いが止まりません。 言い過ぎました。そんなに笑えません。 あったらよさげなプラグインを一つ思いついたのでちくちく書いてたんですが、いつの間にかclass指定もrel指定もいらないスムーズスクロールのコードを書いていました。 interface.jsという有名なjQueryライブラリの応用です。 interface.jsについてはEmotional Webさんが解りやすい記事を書かれていたので、interface.jsの導入までのご参考にどうぞ。 Interface.jsで簡単スムーススクロール - Emotional Web 普通はPageTopとかに「#top」を指定したりすると思うのですが、それだけではもったいないなーと。 当サイトで実際に使っているソースを書いておきます。 以下のソースはIEで動かない

会社からの帰宅中、横断歩道を渡っていたら赤で止まっていたはずの車がゆるりゆるりと横断歩道に進入してきました。 さすがに驚いて凝視した（完全に目合ってる）のですが、運転手のおばちゃんは止まる様子もなく、そのまま徐行で走り去っていきました。 どうせすぐ次の信号で止まるのに 振り返って見ると、車体側面には明らかに車か何かが突っ込んだような大きな凹みと傷が。 やっぱりこういう人は何度もやらかしているんだなぁ。なんで免許持ってるんだろう？発行しちゃだめだろ。 さて、赤信号は守りましょうというところで、Javascriptの話題です。 というのも、ソース上テキストを書いていてもCSSを使ってそのテキストを画面外に飛ばしてしまうというテクニックがバッドノウハウなんじゃないかと。 実際、私もそう思うので、どうせ見出しやボタンを画像化したいのならば、いっそのことimgを置いてaltやtitleを記述したほう

会社のマシンが新しくなるそうなので、バックアップを取るついでに、必要なアプリ一覧を書き出してみた。 どうせ再セットアップする時は必要なメモなのでオンライン上に残しておく。 日本語入力システム ATOK ファイラー TabFolder UltraExplorer TFのほうが使い易い。 メーラー Becky! 家ではgmailがメーラー代わり。 メッセンジャー googletalk MSNメッセンジャー ブラウザ IE7/6 IE5.5 IE5.1 その他ブラウザアーカイブ Multiple Explorers　（一度にIE入れられるけど、バグあるくさい） DonutQ - タブブラウザ＠IE Firefox Opera Sleipnir Netscape7.1 Safari3 FTP NextFTP4 圧縮解凍 Lhaplus StuffIt Expander ランチャー Clock La

以前、[CSS][コピペ]clearfixでコピペ用に最新版のclearfixを紹介していましたが、今回Safariで問題があることが発覚したので、修正版をPostしておきます。 CSS .hoge:after { display: block; clear: both; height: 0; visibility: hidden; content: "."; line-height: 0; } .hoge { display: inline-table; min-height: 1%; } /* for macIE \*/ * html .hoge { height: 1%; } .hoge { display: block; } /* end of for macIE */ どこが変わったかというと、モダンブラウザ用に書かれている、.hoge:afterの部分に line-height

CSSHTML+CSS+JSでスーパーファミコンのコントローラー作ってみた スーパーファミコンのコントローラー見てたらCSSだけで再現できそうだなーと思ったので作ってみた。 スーパーファミコンのコントローラー - BlurBlue-Note わりと再現できた感じ。若干フラット目ですが。 ついでなのでボタン押せるようしてログ出力するようにしました。クリックしか対応してないから実用性0ですが。 ブラウザによっては再現できないかもしれない… [Mar 30, 2014 10:14 PM] webTwitterのヘッダーの推奨サイズがおかしい件。 Ｔｗｉｔｔｅｒのデザインが変更され、ヘッダーが追加されました。 なんかちょっとおされです。 参考：ツイッターのプロフィールをさらに自分らしくする美麗なヘッダー画像40枚 - GIGAZINE ヘッダーを設定してみた！ さて本題ですが、ヘッダーの設定画面に