ウノウラボ Unoh Labs: JavaScriptを使わないスターレイティングの作り方
こんにちわ、山下です。 Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。 1.画像を用意する まず次のような1枚の画像を用意します。16×16ピクセルの☆が、横に5個、縦に11個並んでいて、下に向かうに従って色の付いている☆の数が増えているのがポイントです。 2.HTMLを書く HTMLはとてもシンプルで、ULリストを使います。 <ul class="rating onestar"> <li class="one"><a href="#" title="1 Star">1</a></li> <li class="two"><a href="#" title="2 Stars">2</a></li> <l
スタイルシートによる崩れない 2カラム 3カラム・レイアウト
このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！
AIRS Labs: Tracを便利に使うためのお約束ふたつ
加藤です。 社内で新しいプロジェクトを立ち上げたので、久しぶりにTracのセットアップをおこないました。いつも間隔があいてしまうので手順は何回やっても憶えませんが、僕がいつも使うお約束の設定がふたつほどあるので、今回はそれを紹介したいと思います。 その1: TracNavでショートカットメニューをつくる Tracのカスタムクエリは非常に多機能ですばらしいのですが、見たい項目は決まっていますし、いちいちView Ticketsに行って確認するのは面倒です。そこで、 TracのWikiを使いやすくする というエントリーで紹介した TracNav を使ってトップページにショートカット用のメニューを設置します。 僕の場合、Tracのプロジェクトを作成して必要なプラグインをインストールしたら、まずトップページのWikiの内容を全部消して下のような感じに書き換えます。 = プロジェクト名 = [[Tr
CSSでロールオーバーもどき
CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
ウノウラボ Unoh Labs: 水平方向のナビゲーションの作り方
yamaokaです。 水平方向に並んだナビゲーションを作る場合、 皆さんはどのようにマークアップされているでしょうか。 とりあえず必要な項目を羅列してみましょう。 それぞれの項目には矢印の画像を付加するものとします。 == HTML == <p id="navigation"> <img src="arrow.gif">編集 <img src="arrow.gif">削除 <img src="arrow.gif">追加 </p> horizontal_nav_1 posted by (C)フォト蔵 一見よさそうです。 ただ、HTMLの論理的な構造としてふさわしいものでしょうか。 ナビゲーションと言えども論理構造としてはリストの一種なので、リストとしてマークアップするのが適当と言えます。 リストにしてみましょう。 == HTML == <ul id="navigation"> <li>編集<
iandeth. - Perl の use と require の違い
以前飲み会で、会社の先輩と「use と require の違いってなんじゃ？」てな話をした際、知識不足ゆえうまく答えが出せなかったのですが、Programming Perl 等をちょろちょろ読み始めた今なら、ちょっとはマシな回答が出来る気がした /w のでまとめてみました。 perldoc を始め、色々なサイトや書籍でも既に述べられているとおり、 use はコンパイル時に評価される - module load happens at comile time. require は実行時に評価される - module load happens at run time. が明確な違いになります。また、 perldoc(*) によると use は実際には以下のコードを実行するのと同等だそうです : BEGIN { require MODULE; MODULE->import(LIST); } 特殊ブ
JavaScript で日本語の変換途中の文字列を取得する
■ JavaScript で日本語の変換途中の文字列を取得する input form に onKeyDown とか指定してイベントを受け取るようにすると、現在入力している文字列が取得出来るわけですが、残念ながら日本語の変換確定前の文字列は IE でしか取得出来ません。 しかし setTimeout の処理とかを使えば IE 以外のブラウザでも取得出来るのですが、このやり方について解説している人を見掛けた事が無いので紹介しておきます。ええ、まぁ、実際にそんな事がしたい状況ってのはあんまり無いんですけどね。JavaScript で自動フリガナ入力 ってのを見たら、やっぱり onKeyDown のせいで IE 以外のブラウザには非対応っぽいので Firefox 対応版になったら嬉しいなと思ったもので。 それで肝心のやり方ですが、実際にサンプルを見た方が早いと思うので、以下に用意しました。何も難し
ActionScript3 最適化・高速化Tips 簡易まとめ - actionscriptグループ - ConquestArrow.addEventListener( LifeEvent.WORK, this.studyActionScript);
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Tagの検索にMySQLの全文検索を使う : blog.nomadscafe.jp
Tagの検索にMySQLの全文検索を使う Tags with MySQL fulltextを参考にして試してみた。 Femoの中で、タグの絞り込み機能を実装したのに続いて、「完了」や「finish」と言ったタグがついている場合表示しないというオプションを考えている。 そうなってくると、SQLをどう書けばいいのか、また複雑なSQLを構築したときにパフォーマンスは大丈夫なのかと心配。そこで、上記のURLを参考にしながらMySQLの全文検索に注目。 create table ft_tags( id int unsigned not null auto_increment primary key, tags text, unpack text, fulltext (unpack) ) と言うテーブルを作成。 ここに、 my @tags = ( q/task femo/, q/femo mail t
ウノウラボ Unoh Labs: 携帯におけるメールアドレスの制限について調べてみました
まず、携帯のメーラでは宛先に入れられるByte数が決まっています。 DoCoMo: 50Byte au: 64Byte SoftBank: 128Byte
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
JavaScript で幅に合わせて文字列を切りつめる - Psychs's blog
デスクトップアプリを開発してると、ListView のカラム幅が足りなくなったときに「My Docume...」のように自動的に末尾を「...」で埋めて切りつめてくれる機能がある。ウェブでも同じことをやりたかったので、作ってみた。 まず、文字列の幅を測定するには、 <span id="ruler" style="visibility:hidden;position:absolute;"> </span> みたいな隠しエレメントを用意しておいて、 String.prototype.getExtent = function(ruler) { var e = $(ruler); var c; while (c = e.lastChild) e.removeChild(c); var text = e.appendChild(document.createTextNode(this)); var
ファイルの先頭8バイトだけで画像のフォーマットを調べる - bits and bytes
PHPでファイルをアップロードしたとき $_FILES にアップロードされたファイルについての情報が入っています。 そして $_FILES[...]['type'] にはアップロードされたファイルの MIME type が入っています。しかしここに入っている値は PHP: ファイルアップロードの処理 - Manual に $_FILES['userfile']['type'] ファイルの MIME 型。ただし、ブラウザがこの情報を提供する場合。 例えば、"image/gif" のようになります。 この MIME 型は PHP 側ではチェックされません。そのため、 この値は信用できません。 と書かれている通り信頼できません。ソースコードを見てみると php-5.1.4/main/rfc1867.c の SAPI_API SAPI_POST_HANDLER_FUNC(rfc1867_post
小粋空間: CSSで画像に影をつける（ドロップシャドウ）
CSSを利用して画像に影をつける（ドロップシャドウ）カスタマイズです。ご質問を頂いたのでこちらのエントリーで紹介致します。下のスクリーンショットはドロップシャドウ完成例です。 仕組みは、ドロップシャドウ用の画像を、img タグを括る別のタグの背景画像として指定し、img タグの画像をずらして表示することでドロップシャドウの効果を出すようになっています。 参考にさせて頂いたのは下記のサイトです。ありがとうございました。 1976design.com：Easy CSS drop shadows A List Apart：CSS Drop Shadows nlog(n)：アップロードした画像に影をつけるには POCHIKING*：画像に自動的に影をつけてテキストを回り込ませる 今日の覚え書き：cssの設定で自動的に画像に影を付ける 花と写真とblogと。：画像に影をつけてみる。 最初の1976d
3分LifeHacking：入力の手間を省く、10のExcelショートカット - ITmedia Biz.ID:
Excelに、毎日文字や数字を入力している──そんなビジネスパーソンも多いことだろう。少しでも入力を早く、簡単にしたい。そんなときは、Excelに備わっているショートカットをうまく活用したい。 1──日付と時刻 ［Crtl］＋［；］を押すと、今日の日付が。［Crtl］＋［：］を押すと、現在の時刻が入力される。 業務記録などを付けていく際には、これを使えば簡単に日付や時刻を入力できる。「now」関数と違うのは、入力した時点の日付・時刻が固定されることだ。 2──繰り返し作業 せっかくコンピュータを使っているのだから、同じような作業は自動的にやってほしい。複雑な作業で、今後も繰り返し使うなら、マクロを書くというような選択もあるだろうが、ちょっとした変更──例えば、セルを1行おきに色を付けたい──なんてときは、［F4］キーを使う。 最初のセルに対して操作を行い、同じ操作をしたいセルを選んで［F4
Perl、PHPでGooglebotを一定の確率ではじく
Perl、PHPでGooglebotを一定の確率ではじく 2007-05-01-2 [Programming] 「動的生成ページへのGooglebot(Googleのクローラ)のアクセス数 が多すぎてサーバに負荷がかかりすぎる問題」に悩まされています。 robots.txt の Crawl-delay は効かないし[2007-03-21-1]、 Googleウェブマスターツールでクロール率を低く設定しても ある回数よりも下がらないしで困っていました。 アクセス禁止にすれば完全解決なのですが、 それにより検索されなくなるのはファインダビリティが下がって嫌なので、 とりあえずランダムで 503 を返すことで対処しました。 ときどき503が出ることにより、しばらくするとGooglebotが 「サーバが混んでいるんだな」と思ってくれるみたいで、 結果としてクローラのアクセス数が激減、かつ、検索結果
jmblog.jp - IEでa要素以外に:hover擬似クラスを適用させる
IE6以下では、:hover擬似クラスが <a> 以外では適用されません。が、この問題の解決策が紹介されているサイトを発見しました。 » WEBFACTORY ::: BLOG: IEでhoverをa以外に効かせる » Hackadelic: csshoverを使ったWeb StandardなCSSコーディング それぞれで紹介されているとおり、Whatever:hover で配布している csshover.htc というスクリプトを使えば、IEでもいろんな要素に:hoverを適用させることが出来ます。（ダウンロードの場所がちょっとわかりづらいですが、Changes のなかにあります。） 使い方は、css で以下のように書くだけ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cyano: なぜCSSは先でJavaScriptは後に読み込ませることが推奨されるのか
Web高速化 || パフォーマンスチューニングBlog: インターオフィス
memo-space :: SQLでIPアドレスから携帯のキャリアを判定する