CSSレイアウト情報を瞬時に確認できるブックマークレット「XRAY」: DesignWorks Archive
【フリー壁紙】A CANDLE LOSES NOTHING by モンクレールウンアウトレット (12/20) 【フリー壁紙】A CANDLE LOSES NOTHING by ルイヴィトンコピー (01/04) 【フリー壁紙】A CANDLE LOSES NOTHING by コピーブランド (11/11) 【フリー壁紙】A CANDLE LOSES NOTHING by バーバリー 財布 メンズ (08/17) 無料で使える2010年カレンダーのまとめ by 浅見 晴美 (11/29) 先日からCSSについて「CSSを整理整頓！使われていないセレクタをチェックできる「CSS Redundancy Checker」」や「使わなくなったCSSを見つけてくれるfirefox拡張「Dust-Me Selectors」」でお伝えしてきましたが、今回は不要なCSSセレクタを探すのではなく、気になる
一定期間New/Upマークを表示する - JavaScript
サンプルと機能 → Sample 1：一定期間New/Upマークを表示する 一定期間だけ、Newマークや、Upマークを表示します。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 → Sample 1：一定期間New/Upマークを表示する <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- // 一定期間New/Upマークを表示する function newUp(y, m, d, c) { delDay = 7; // 何日後に削除するか oldDay = new Date(y + "/" + m + "/" +d); newDay = new
投稿者情報に New マークをつける
Movable Type のエントリーに新着コメントまたは新着トラックバックがあった場合、エントリーの下に表示されている投稿者情報に New マークをつけるカスタマイズです。ご質問を頂きましたので本エントリーにてご紹介致します。 スクリーンショットはデフォルトテンプレートに設置した例です。新着コメントまたは新着トラックバックと連動して「New!」マークまたは任意の画像を表示させることができます。 また JavaScript を利用してますので、投稿からの経過時間をリアルタイムに計測して、新着マークの表示・非表示が制御できます。表示判定は時間単位での設定が可能です。 以下、カスタマイズ方法です。 １．テンプレートの修正 メインページ／カテゴリー・アーカイブ／日付アーカイブの中から新着表示を行いたいテンプレートに対し、下記の設定を行います。コメント・トラックバックに分けてますので、必要な分だけ
JavaScript Library Archive
JavaScript Library Archiveについて JavaScriptライブラリをまとめたサイトです。用途別に探すことができ、配布元、使用方法、ライセンスなどについて解説をしております。 新着JavaScriptライブラリ プログラムのコードに色を付ける「google-code-prettify」 角丸を表現する「jQuery Corners 0.3」 jQueryベースのカラーピッカー 「Farbtastic」 水平方向のアコーディオンメニュー「horizontal accordion」 セレクトボックスをカスタマイズする「Script.aculo.us Select Box」 IE6でhover,active,focus擬似要素を使う為の「csshover」 画像に光沢を与えるjsライブラリ『Glossy.js』 IE6以下をIE7と同じようにするライブラリ『IE7.js』
Adobe - ActiveX コンテンツ使用Webサイトの準備
多くの方がMicrosoft Internet Explorerの変更についての発表を目にしたことでしょう。その結果、埋め込み（"アクティブ"）コンテンツやアプリケーションを使用したWebサイトがどのような影響を受けるのか、疑問をお持ちのことと思います。アクティブコンテンツには、Macromedia Flash、Shockwave、またはAdobe Acrobatファイルなどが含まれます。おそらく、その準備のために何をすべきか、検討を開始されていることでしょう。 ブラウザの更新がサイトに与える影響 ブラウザの変更が与える実際の影響はどのようなものなのでしょう。このような変更はいつ行われるのでしょうか。明日または来週になっても、ユーザはアクティブコンテンツを表示できるのでしょうか。 ユーザは、Internet Explorerブラウザの更新プログラムを適用するまでは、埋め込みコンテンツや
SSIならぬクライアントサイドインクルード（CSI）を実現できる「sprinkle.js」:phpspot開発日誌
Sprinkle Javascript library by Jon Davis This is basically CSI (Client-Side Includes), when SSI (Server-Side Includes) is not available. You can also call it "sprinkle", as that's the name I gave the Javascript library. SSIならぬクライアントサイドインクルード（CSI）を実現できる「sprinkle.js」。 SSIとは、指定の位置に決められたタグを埋め込んでおくことで、サーバ側で処理して特定の文字列を出力する仕組みです。 今回紹介するCSIは、JavaScript を使い、DIV要素内にsrcで指定したファイルをAjaxで読みこむという仕組みです。 次のようなコードで、
正規表現 - SMART 開発者のためのウェブマガジン
正規表現の概要 正規表現は、Perlの中で最も重宝する機能のひとつです。正規表現にはテキスト処理のための様々な機能があり、文字列の中から特定のパターンを見つけ出したり、置換したりすることができます。 正規表現の基本的な使用方法 たとえば、$strという変数に格納したデータの中から、「A」で始まって途中は何があるかわからないが最後が「E」という文字列を探したい場合､次のように記述することで、条件にマッチする文字列を見つけることができます。 $str =~ /A.*E/; 上記では、ドット( . )が改行以外の1文字を表し、アスタリスク( * )がその任意の文字の0回以上の繰り返しを意味します。このように、正規表現において特殊な働きを持った文字を正規表現演算子、またはメタ文字と呼びます。また、=~ はパターン結合演算子と呼ばれ、「左辺の値から右辺の値を検索する」という意味があります。 正規表現
Adobe Edge: Spry 集中講座
「Ajax したい！」Web デザイナーのための Spry 集中講座 第四回：Dreamweaver CS3 + Spry Widgetで 一歩先行く UI をあなたの Web ページに 前号では Spry の基本ともいうべき XMLデータセットの作成と表示を Dreamweaver CS3 で行う方法についてご紹介しました。そこで今回は、Spry のもうひとつの特長である「Widget」（ウィジェット）について見てみましょう。Ajax 化された Web ページの醍醐味は、ページ上で扱うデータの内容によって、動的にページが変化していくことです。Spry Widget は、その動きを司る重要な技術ですが、今回はその中でも理解しやすい「入力フォームの内容チェック」について、実践的に解説してきます。 Dreamweaver CS3 の Spry Widget Spry Widget とは、構
faLog | CSS(とJS)でシンプルなドロップダウンメニュー - 2
シンプルなドロップダウンメニューの詳細版になります。 マウスカーソルをメニューの見出しに重ねると垂れ幕のようにメニューが表示される…と言うよくあるドロップダウンメニューです。好きなように使って下さい。 ただし、このページのスクリプトはあくまでサンプルであって素材ではありません。このままでも使えなくは無いですが、以下の点に注意を払う必要があります。 標準準拠ブラウザの場合、CSSが機能していなくてもメニューとしての構造を保つように作っています。 が、CSSオン・javascriptオフのIEではメニュータイトルしか見えない状態になります。 このシチュエーションをフォローするには、IEが読めないようにCSSのpositionとdisplayにハックコード(例えば、dl[id=foo]など)を入れ、代わりにJavascriptでpositionとdisplayのスタイル指定を書
選択に応じて不要な入力欄を非表示にする方法 - JavaScript TIPSふぁくとりー
《2017年6月10日 1:00 PM 公開/更新》 選択に応じて不要な入力欄を非表示にする方法 [入力フォーム] フォーム内に「ある項目を選択している場合に限って入力して欲しい」という限定項目がある場合は、ユーザの選択状況に応じて入力欄の表示・非表示が切り替わる方が便利です。JavaScriptを使えば、例えばラジオボタンなどの選択状態に応じて、特定のテキスト入力欄を表示したり消したりできます。 選択に応じて不要な入力欄を非表示にする方法 特定のidを割り振った要素に対して、表示と非表示を切り替えるJavaScriptの書き方 選択に応じて不要な入力欄を非表示にするHTML＋JavaScriptソース 選択に応じて不要な入力欄を非表示にする方法 アンケートフォームなどにはよく「ある項目を選択した場合にのみ入力して欲しい」という限定項目があります。標準で全部の入力欄を表示しておいても良いの
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
![アルファ画像を扱うalphafilter.jsライブラリ[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
フォームの入力欄に気を遣うためのJavascript - Web標準にアプローチ 〔まいまいのお宿。〕：楽天ブログ
2006/09/28 フォームの入力欄に気を遣うためのJavascript (8) テーマ：Web標準(117) カテゴリ：Web標準 JavaScriptポケットリファレンス改訂第3版 Web標準の教科書 時々見かける、気の利いた機能を追加してみましょう。 お仕事のついでに見つけたものなんですけどね。 時々見かけるでしょう？こういうの。 ▲入力欄をクリックすると下の図のように消える。 ▼それぞれの入力欄をクリックすると、表示されていたテキストが消える。 ▲（左）検索フォームなどで見かけるタイプ／（右）コメント入力欄などで見かけるタイプ クリックしたら、valueに「空」を入れているのは、なんとなく想像のつくところ。 でも、どーやってすんだろう？なんて思っていたんですね。 まさか、ここまで短いスクリプトを仕込んでやるだけでよいとは思ってもいなくて。 ■フォームの入力欄に気を遣うためのJav
テキスト入力欄の文字数をリアルタイム表示する方法 - JavaScript TIPSふぁくとりー
《2017年6月6日 3:00 PM 公開/更新》 テキスト入力欄の文字数をリアルタイム表示する方法 [入力フォーム] テキストエリアに入力された文字数をカウントして、JavaScriptでリアルタイムに画面上に表示する方法を解説。テキスト入力欄のvalueプロパティの中身を引数として受け取って、その文字数をカウントした結果を指定された要素に出力する関数を作ります。わりと簡単です。 テキストエリアに入力された文字数をカウントしてリアルタイムに表示する 文字数カウンタ付きテキストフォームを作るHTML＋JavaScriptソース 複数の入力欄の文字数を個別にカウントしてリアルタイムに表示する 少し汎用的な文字数カウンタを作るJavaScriptソース 備考 テキストエリアに入力された文字数をカウントしてリアルタイムに表示する JavaScriptを使うと、テキストエリアなどの文字列入力フォー
styleswitcher.js-スタイルシート切り替えjavascript - WEBデザイン BLOG
アクセシビリティを考慮したWEBページを作成するときに役立つのがA List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsが紹介しているstyleswitcher.js。 アクセシビリティガイドラインにも「ガイドライン2. 色だけに依存しない」という項目があり、 2.1 色によって表現されている全ての情報は、その色を再現できない環境でも得られるようにしておく（たとえば、前後関係やタグ付けなどによって）。 [優先度1] (チェックポイント2.1) 2.2 前景色と背景色の組み合わせは、色の識別が困難な人やモノクロ画面を使用している人などに対しても十分なコントラストを与えるようなものにする。 [対画像：優先度2 、対テキスト：優先度3] (チェックポイント2.2)（引用：ウェブコンテンツ・アクセシ
押さえておきたい15のJavaScriptスニペット:phpspot開発日誌
WebCodr.com Blog Archive 15 Javascript Snippets You Can’t Live Without Please Note: We have moved to our new home WebCodr.com - please update your links and bookmarks! 押さえておきたい15のJavaScriptスニペット。 画像読み込み＆フェーディング 動的テーブル カレンダー選択ウィジェット タブバー ドラッグできるWindow ズームできるイメージサムネイル LightBox2 ドラッグ＆ドロップなショッピングカート ドラッグ＆ドロップなソート可能リスト JavaScriptのロギング＆デバッギング フォントリサイズの検出 地図上にポインタとテキストを置く フォトアルバム＆スライドショー スライドダウン＆アップアニメーシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Spriteを活用しよう - DesignWalker
http://youmos.com/reference/smooth_scroll.html
http://youmos.com/news/dtree.html
オンラインカジノ研究所
COOL ONLINE - JAPAN - JAPAN ONLINE