随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL（zip：40kb） Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlにGoogleカスタムサーチ用に使えるソースを記入。 Ja
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を
リンクと言えばaタグですが、ボックス単位の大きなdiv要素もリンクにしたくなります。 jquery.biggerlinkはそんな我が儘を叶えてくれるjavasrciptです。 sponsors 使用方法 jquery.biggerlinkからjquery.biggerlink.jsを、jQueryからjquery.js（v1.2.1）をダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.biggerlink.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#id名 div')
写真などをページ上で強調表示する、いわゆるlightbox効果を実現するJavascript+CSSライブラリを37個も集めて、ライブラリサイズやそれぞれの機能、どのJavascriptライブラリを使っているかなどで絞り込めるようにした比較表が発表されている。 このようなUI系のライブラリを使う際には、自分が普段使っているベースライブラリとの親和性などが重要だと思うので、このような形でまとまっているとdel.icio.usで”lightbox”タグで絞り込む、といった調べ方よりも楽にライブラリが選べていい。 via del.icio.us/popular この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘い
These bookmarklets let you see how a web page is coded without digging through the source, debug problems in web pages quickly, and experiment with CSS or JS without editing the actual page. (To keep bookmarklets in order to use them on other web pages, drag them to your Bookmarks Toolbar. Or, install them all at once.)
趣旨 ウェブページとして描画された HTML 要素の画面上の位置を取得する。一見簡単そうに見えるこの作業が、現在実装されているブラウザ上ではとてつもなく難しい。そのことを以下で説明していく。 情報ソース この問題に関して調べたところ、最もよく出来ているエントリは、susie-t 氏による offsetTop/offsetLeft/offsetParentの闇 である。とてつもない力作で、実に多くのケースにわたって、包括的に探究が行われている。まるで犯人を追跡する刑事のような執拗さである。氏の自己紹介では「ナマケモノのプログラマ」とか謙遜されているが、これはとてもナマケモノにできる仕事ではない。 基本中の基本として W3C CSS 2.1 の次の章を抑えておきたい。 8 Box model 9 Visual formatting model 10 Visual formatting mode
yamaokaです。 webページの表示を高速化する手法にはいろいろありますが、 その一つとして遅延読み込みという手法があります。 初期状態で表示する必要のない要素については読み込まず、 必要になったタイミングで読み込み、表示するようにする手法です。 ページの読み込みにかかる時間の大半を 画像の読み込みが占めている場合が多いので、 画像の読み込みを遅延させるという手法が多く取られます。 検討するべきケース では、画像の遅延読み込みはどのような場合に検討されるべきでしょうか。 最初から表示されている必要がない画像が存在し、その画像のサイズが大きかったり、 そうした画像の数が多い場合は検討してみる価値があると思います。 例えば、次のようなケースです。 初期状態では表示されないブロックに属する画像が存在し、 JavaScriptで表示するかしないかを切り替えているような場合 ページのずーっと下の
ITインフラ運用からの解放 HCI＋JP1による統合運用による負荷激減で 次世代IT部門への役割変革へ一歩前進 データ活用は次のステージへ トラディショナルからモダンへ進化するBI 未来への挑戦の成功はデータとともにある 非構造化データのデジタル活用へ 社内の文書コンテンツを一元管理 デジタル変革と内部統制の二兎を得るECM 結果に差がつくウェビナーへの投資 デジタル営業時代における見込み顧客獲得へ ウェビナーの運用・集客・フォローの最適化 大学、研究機関、製造業など いま目覚ましい躍進ぶりを見せるデルのHPC その背景と選ばれる理由にせまる IT部門のDXはこれだ！ IT運用管理新時代における最適な運用管理 の現場作り ビジネスの推進には必須！ ZDNet×マイクロソフトが贈る特別企画 今、必要な戦略的セキュリティとガバナンス 体験から学んだ成功への知見 マネーフォワード×エム・フィール
昨年を振り返ると、いろいろなJavaScriptライブラリが登場しました。デザインで使えるものから、インターフェースを改善するものなど、2008年も活躍しそうなものを紹介したいと思います。 Internet Explorer 6でアルファチャンネルを含むPNGを表示 iepngfix.htc Internet Explorer 7からアルファチャンネルを含むPNG画像の表示が出来るようになりましたが、以前のバージョンでは表示するためにひと手間必要になります。iepngfix.htcを利用すれば、アルファチャンネルを含むPNG画像を利用する際に簡単にIE5.5以降のブラウザで表示させることが可能になります。 IE6でアルファチャンネルを含むPNGを表示 <img>タグ、またはエレメントの背景画像にxxx.png画像が指定されているものに対して、DXImageTransform.Microso
Marat A Denenberg氏は11月29日(米国時間)、Dynamic CSS (CSS.js)の最新版であるDynamic CSS 1.0を公開した。Dynamic CSSはJavaScriptで開発されたプログラム可能なCSSユーティリティ。mootools 1.2を使って開発されたユーティリティで、実行するにはElementとClassを含めたmootools 1.2が必要。JavaScript中にプログラマブルなCSSを表記できるというものだ。長さなどのサイズ指定に固定値ではなく計算値や変数、関数を使った計算式を記述できる。 Webブラウザ互換性確保やWebブラウザに特化したプロパティの指定などをおこなう場合、PHPやServletなどのサーバサイド技術を使って対象のWebブラウザに適したCSSファイルを生成するといった処理をすることが多い。Dynamic CSSはその処理
08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。本題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう
先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Arc... 先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただきました。 時間がなかったので、できれば自分では書きたくないなぁ、なんかいいの公開している人いないかな～なんて思っていたのですが、おかげ様で助かりました。ということで、お礼を兼ねて紹介させていただきます。 タブ切替をサクッと実装 ： Archiva タブ切り換えを実装する JavaScript ライブラリやサンプルソースはいくつか存在しますが、私が求めていたのは JavaScript が OFF の時でもページ内リンクと
※ 画像は公式サイトデモより これはクール！ 思わず使い道を考えてしまった。Mac OSXではダイアログがウィンドウの上部から出てくる。あの表示が何となく好きという人も多いだろう。あれを実現するJavaScriptがこれだ。 今回紹介するオープンソース・ソフトウェアはModalBox、ウェブベースのポップアップ＆ウィザードだ。 簡単に言えば、ウィンドウの上から出てくるポップアップだ。表示していた画面はグレーアウトするので、そのダイアログだけに集中できる。Ajaxを使うことも、使わないこともできる。簡易的なものであれば使わずに手軽に利用できそうだ。 そして、ウィザード形式に操作を進めることもできる。例えば問い合わせフォームや、アンケート、友人へのメール等わざわざ画面を切り替えて操作するには及ばないようなものに使えそうだ。 表示のされ方がかなり格好よく、使い道も多そうだ。prototype.j
最近新しいサービスを作っているのだが、ようやく最終段階に入り細かいユーザビリティを気にできるようになった。その中で、入力フォームや分かりづらい項目に説明をつけようと思った。 ただのリンクでは寂しすぎる。あまり使われる事がない機能かも知れないがクールに攻めよう。 今回紹介するオープンソース・ソフトウェアはCoolTips、半透明でクールなツールチップだ。 CoolTipsは指定した場所にマウスを持っていくと浮かび上がるツールチップで、半透明の角丸になっている点がクールだ。しかも半透明で、背後の項目が透けてみえる点も良い。 他のライブラリとして、prototype.jsやscript.aculo.usを利用している。ツールチップを表示する項目側は特に設定はなく、title要素に説明文を入れておけば良いだけだ。後はJavaScript側で項目を指定すれば簡単に実現できる。 背景色、枠線色、文字色
reflex.js (with IE 6/7 support) reflex.js 1.1 allows you to add a Cover Flow effect (including reflection) to images on your webpages. 画像の映り込みエフェクトを実現するJavaScriptライブラリ「reflex.js」 次のような画像の映り込みエフェクトを付けることができます。 使い方は、必要なライブラリを読み込んで class を付与するだけのようです。 他にもいろいろあります。 Corner.js - 角丸効果や、シャドウ効果を画像に与える Glossy.js - 画像にガラス風の光沢を与える Instant.js - インスタントカメラ風エフェクトを与える Slided.js - スライドのフレーム風にエフェクトを与える Filmed.js - 映
Position Absolute : Prototype Fisheye : Another gear in the machine. The idea behind a fisheye control is a strip of icons, being vertical or horizontally laid out that reacts to the user's mouse as it approaches the icon. This control was made popular by Mac OSX "Dock". prototype.jsでMacOSXのDock風ＵＩを作るJavaScriptライブラリ。 カーソルを合わせるとアイコンが拡大されるあのＵＩをprototype.jsで実装したい場合に使えます。 その他、Dock風ＵＩ実装のライブラリを以下に。 一味違う
こんにちわ、山下です。 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
リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」 2007年08月07日- Scrollovers - A New Way of Linking Scrollovers are a way to quickly and easily add flair to your web pages, giving your users an experience they weren't expectin g. リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」。 例えば、次のアンカーにカーソルを合わせて みてください。 [YOUR TEXT HERE] Scrollovers を使えば、こんなリンクの貼り方が出来ます。 普通のリンクより 分かりやすいだけでなく、訪問者に驚きを与えることが出来ますね
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く