FlashでHTMLの文字を1文字ずつ操作するために使ったJavaScript側のトリック（「HTMLの暴走」解説 JavaScript編） - KAZUMiX memo
先日の「HTMLの暴走(meltdown3)」においてJavaScript側で使った技の解説です。 通常JavaScriptで操作可能なHTMLの対象はタグ付けされた要素です。テキストであればPタグなどなんらかのタグで囲われた一連の文字列が対象になります。にもかかわらず「HTMLの暴走」では1文字ずつ操作しています。 どうやっているのか？ 一文字ずつタグで囲ってるんです。実は。 例えば次の様に表示されている部分があったとします。 これを一文字ずつタグで囲った場合の状態を分かりやすく赤枠を付けると次の様になります。 こんな感じで一文字ずつタグ付けし、それぞれのタグの座標を計算して対応しているのです。 実際に使ったタグはSPANなどではなく、KZMというオレオレタグです。一般的なタグはデフォルトスタイルやCSSの影響がありえるため、適当なタグを作って対応しています。 HTML(XHTML)の定
スタイリッシュさを演出する、あえての1カラムレイアウト - 新デザイン「Nuko-NRG」（オレ専用） - KAZUMiX memo
デザインをリニューアルしました。 今回のデザインを制作するに当たり、強く意識したのは次の点。 1カラム 水平区切り うちのネコ テクノ オレ専用（公開デザインにすることを考慮しない） 頻繁に利用するポータルサイト等なら2カラム、3カラムでもいい。スクロールせずに目的のリンクをクリックできることが利便性になるから。でもブログの場合はどうかというと、そもそもそのサイトが目的で閲覧しに来ている、つまり本文を読みにきているんですよね。そこから次のサイトへと行くことが目的のポータルサイトとは違う。 そこで1カラムです。 上下の視線移動のみで閲覧できるのはかなり快適なんじゃないかと思って作ってみたら、実際かなりいい感じだ。ストレスを感じない。左右のカラムを気にしなくていい、スクロールすることで別のカラムの情報を逃す心配をしなくていいのが良いのかもしれない。 とは言え、2カラム、3カラムの利便性も捨てが
なんでもドラッガー fukuwarai.js - KAZUMiX memo
ページ内のあらゆる要素をマウスでぐりぐりとドラッグできるようにする JavaScript コードです。 javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp/~kazumix/d/javascript/fukuwarai.js?"+da.getTime(); document.body.appendChild(s)})(); これを適当なページのアドレスバーに貼り付けて実行すると、そのページのあらゆる要素がドラッグ可能になります（と言っても Flash などは無理です）。リロードすれば元に戻ります。普段見慣れたページを、自分の操作でバラバラにできるのはなかなか新鮮な体験です。 使いまわ
CSSをURIのクエリーで切り替えるJavaScript - KAZUMiX memo
2008-03-06 追記: jQuery無しで動くように修正しました あるといいかもと思って試しに作ってみたら、IE*1の印刷対応に端を発する問題でえらい苦労しました。苦労話は後回しにするとして、次が動作サンプルページとサンプルコードです。（要jQuery。要素の取得で楽してコードを短くするために使っています） CSSをクエリーで切り替えるJavaScript 動作サンプルページ (function(){ //クエリーにstylesheetがあれば切り替え関数呼び出し if(location.search.match(/\bstylesheet=([\w]+)/)){ var titleValue = RegExp.$1; changeStyle(titleValue); } // CSS切り替え関数 // 引数titleValueと一致したtitle属性を持つlink要素を有効にする
HTML崩壊 meltdown.js - KAZUMiX memo
#ff0000">2008年12月29日追記:逆再生する新バージョン「HTML崩壊Reverse! meltdown2.js」をアップ #ff0000">2009年4月21日追記:さらに進化したバージョン「HTMLの暴走(meltdown3)」をアップ まずは軽いページでお試しください。例えば Google とか。*1 javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown/meltdown.js?"+da.getTime(); document.body.appendChild(s)})(); これを適当なページのアドレスバ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
