ツールチップも出せるニュースティッカー用jQueryプラグイン・Dynamic News
なかなかユニークだったのでメモ的に。 進める、戻る機能の付いたニューステ ィッカーを実装するjQueryプラグインで、 ツールチップもついでに出してくれます。 省スペースで情報を凝縮できるのは なかなかいいですね。 RSSはGoogleAPIを使用しているようです。 ティッカーにマウスオーバーするとnext、prevのボタンと同時にツールチップを表示します。 進むボタンを押すとニューステキストがスライドします。カルーセルをかけ合わせた感じですね。 使い方GoogleAPIキーを使ってRSSを取得し、jQuery本体とプラグインを読み込みます。 <script type="text/javascript" src="https://www.google.com/jsapi?key=*****"></script> <script src="jquery-1.4.4.min.js" type=
[JS]タブの機能性のみを追求したフレキシブルな超軽量スクリプト -EasyTabs
スムーズなアニメーションでタブを切り替え、各タブコンテンツの#リンクにも対応した、タブの機能性のみを追求したjQueryのプラグインを紹介します。 JQuery EasyTabs Plugin デモページ：同じページに複数のタブを設置 [ad#ad-2] EasyTabsの主な特徴 タブの切り替え時にはスムーズなアニメーションが可能 外観はCSSで簡単にカスタマイズ可能 ブラウザのバックボタンとフォワードボタンに対応 各タブは#リンクが有効でブックマークが可能（SEOにフレンドリー） タブは指定された時間で自動切り替え可能 グローバル変数の使用はしていません ページ内に複数のタブコンテンツを設置可能 valid HTML Markup 超軽量（5KB） オープンソース（MIT and GPL licenses） タブのスタイリングはCSSでもJavaScriptでも可能 AJAXコンテンツ
[CSS]IE6, 7も考慮した、CSS3で実装するドロップダウンメニュー
IE6, 7でもドロップダウンとしての機能を損なうことなく、そしてCSS3対応ブラウザでは更に見栄えをよくし、ユーザビリティも向上させるスタイルシートのチュートリアルを紹介します。 CSS3 dropdown menu デモページ [ad#ad-2] CSS3非対応のIE6, 7ではCSS3の角丸などは適用されてませんが、ドロップダウンとしての機能は損なわれずに実装されています。 デモページ：IE6での表示 下記は各ポイントを意訳したものです。 HTML HTMLはシンプルで、ドロップダウンはリストの入れ子で実装されています。 <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">Graphi
[JS]IE6でもブラウザのサイズに合わせて最適なスタイルシートを適用するスクリプト -Adapt.js
CSS3のMedia Queriesを使用して同様のことができますが、CSS3非対応ブラウザでも動作し、且つjQueryなど他のスクリプトに依存しないでブラウザの幅をチェックし、そのサイズに最適化されたスタイルシートのみをロードさせる超軽量（894bytes）のスクリプトを紹介します。 Adapt.js - Adaptive CSS 左：ファイル名、右：スクリーンサイズ [ad#ad-2] スクリプトの制作は「960 Grid System」と同じNathan Smith氏なので、960 Grid Systemとの相性がよいのではないでしょうか。 また、対応ブラウザの表記は見あたりませんでしたが、IE6でも動作しました。 スクリプトでは、上記キャプチャのようにサイズごとに異なるスタイルシートを指定し、ユーザーの環境に合わせて最適なレイアウトで表示することができます。 下記は、同サイトをブラ
[CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック
CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 How to create slick effects with CSS3 box-shadow デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 box-shadowプロパティとは ページ全体に奥行きを加えるエフェクト 紙がめくれたようなエフェクト 対応ブラウザ box-shadowプロパティとは 「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることができるプロパティです。フォーマットは下記のようにオフセット、サイズ、ブラー、カラーの値を指定します。 <shadow> = inset? && [ <length>{2,4} && <color>? ] 簡単な例をみてみましょう。 box-shadow: 3px 3px
[JS]多彩なエフェクトが面白い、ボックスにパネルをスライド・フェード表示するスクリプト -Mosaic
デモページ ダイナミックな斜め方向のスライドのアニメーションで表示 Mosaicの実装 HTML: circle 上記の一番上のキャプチャ、「circle」の実装例です。 <div class="mosaic-block circle"> <a href="http://buildinternet.com/project/mosaic" class="mosaic-overlay"> </a> <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/mosaic.jpg"/></div> </div> JavaScript:circle $(document).ready(function($){ $('.circle').mosaic({ opaci
[CSS]雑誌風のレイアウトがきた、どう実装する -解答編
昨日のエントリー「雑誌風のレイアウト、さぁどう実装する？」の解答編です。 雑誌風のレイアウトは、下記のように2カラムのテキストの真ん中上に画像を配置したものです。 [ad#ad-2] まずは、HTMLから。 画像を二つに切るとかは、無しですよ。 HTML 各パラグラフをdiv要素で内包し、画像とそのdiv要素をdiv要素で内包して実装します。 <div id="page-wrap"> <img src="http://placekitten.com/250/250" id="logo"> <div id="l"> <p>左のテキスト</p> </div> <div id="r"> <p>右のテキスト</p> </div> </div> これに、フロートと疑似要素を使用して、実装します。 まず、画像を絶対位置で配置します。 そしてフロートを使いますが、ポイントとなるのは下3行です。疑似要素に
ffdshow プロジェクト日本語トップページ - OSDN
ffdshowとは？ffdshowはDirectShowやVideo for Windows（VFW）に対応したコーデックです。XdivやDivX、H.264など、多彩なファイル形式に対応しています。また、リサイズやデインターレース、字幕表示などに対応し、動画/音声をより高品質に再生できる強力なフィルターも備えています。 ffdshow tryoutsとは？ffdshow tryoutsは、開発がほぼ止まっているffdshowにさらなる改良を加えたものです。ffdshow tryoutsではバグ修正に加え、新たなファイル形式のサポートなど、さまざまな機能が追加されています。 最新版と安定版はどれ？ffdshowの最新版は、ファイル名内の日付が最新のものを選んでください。また、ffdshowの安定版は、2008年12月22日公開の「ffdshow_beta6_rev2527_20081219
[CSS]最近のウェブ構築には欠かせない要件を備えたCSSのフレームワーク -The 1140px Grid
1280px以上の大きなモニター対応、iPhoneなどのスマホ対応、単調になりがちなグリッドのバリエーション、IE6への配慮など、最近のウェブ構築には欠かせない要件を備えたCSSのフレームワークを紹介します。 The 1140px Grid · Fluid down to mobile [ad#ad-2] 以前、Twitter(@colisscom)で紹介した時からバージョンアップしたようなので、改めてブログでご紹介。 The 1140px Gridは、1280のモニターには1140pxのグリッド、スマホなどのそれより小さいモニターにはその幅に可変したリキッドタイプのグリッドを提供するスタイルシートのフレームワークで下記にその特徴的なポイントを紹介します。 1140pxで12カラムを採用した理由 12という数字は非常に便利で、二等分、三等分、四等分、六等分して利用することができます。また、
これは要チェック！豊かなユーザエクスペリエンスを与えるナビゲーション集
ナビゲーションはウェブサイトにとって重要なエレメントであり、基盤となるものです。素晴らしいナビゲーションは豊かなユーザエクスペリエンスを与えます。 ユーザーは使いにくくない困惑されないナビゲーションを望み、シンプルなナビゲーションはたいていの場合、ダイナミックなものよりユーザフレンドリーなものです。ここではダイナミックでクリエイティブなナビゲーションの素晴らしいインタラクションと若干の欠点をSmashing Magazineから紹介します。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
【画像あり】 原発作業員の宿泊施設の環境がひどい
1 ：中国住み（頑張ろう日本） ◆0AyEq578t2 (東京都)：2011/04/21(木) 17:07:38.79 ID:iAARdOUJ0● ?2BP(1509) 福島第二原発の体育館まで戻って毎晩毎日寝止まりする原発作業員の方々だそうです。 http://gb.cri.cn/27824/2011/04/21/782s3225078_3.htm 168 ：名無しさん＠涙目です。(山梨県)：2011/04/21(木) 18:37:18.08 ID:55sZu8lV0 １ヶ月経ってもこの環境ってすごいな 217 ：名無しさん＠涙目です。(関東)：2011/04/21(木) 18:59:03.14 ID:mS64BbmZO 泣ける どうにかならんのか 169 ：名無しさん＠涙目です。(catv?)：2011/04/21(木) 18:37:22.58 ID:Qne9FUWA0 >>1 最近の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
