CssUserAgent (cssua.js).css{user:agent;} Avoid CSS hacks! Use cssua.js to apply special CSS classes to your pages allowing you to use valid CSS to work around browser-specific quirks. Read more…
A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
Introduction When speaking about design, there is one company that is impossible to go without. Apple values design - being a new product, a fancy catalog or their website - there is always something to admire. This week, we are making an Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. It will be entirely front-end based, no PHP or databases r
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」 IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。 そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。 使い方 ダウンロードした「wordBreak.js」をhead要素などで読み込んでください。 <script type="text/javascript" src="./wordBreak.js"></script> word-break:break-allを利用したいtable要素のclass名に「wordBreak」というclass名を追
jsmap - JavaScriptによる都道府県入力補助
Q - なぜ、全国地図にしないのですか? 4つほど理由があります。 ポップアップが場所をとりすぎるから 現在、地図部分は185x120pxにおさめていますが、標準的なモニタ解像度ではこの辺が限界です。 キーボード操作時の押下回数を減らすため jsmapがフォーカスするのはSugarCRMなどのWEBアプリです。使い切りのWEBフォームと違い、慣れによるスピードアップが望めるUIである必要があります。 多言語対応のため 日本は47都道府県なので、かろうじて可能だと思う方もいるかもしれませんが、これがイギリス(現在製作中)とかでは100を超えます。 認知的限界のため これも重要。ぱっと見て探せる数というのは、15や20がせいぜいです。 ただ、上記の話とは別に、地方選択用の全国図はあってもいいと考えていますので、それは将来のバージョンで。 Q - 地図はもっと詳細化/単純化しないのですか? 詳細
ちょっとしたメモ - DOASとTurtle/RDF
自作のスクリプトやスタイルシートを管理するために作ったDOAS（Description of a Script/Stylesheet vocabulary）の定義ファイルにアクセスが増えていると思ったら、紹介してくださっているページがあるようなので、少しばかり使い方の補足説明を。ちょうどRDFのTurtle構文の入門としても手ごろかもしれません。 DOASはその名のとおり、スクリプト/スタイルシートの概要を記述するためのRDF語彙です。RDFといっても、これはスクリプト/スタイルシートの冒頭などにコメントとして埋め込むことを想定しているので、XMLではなくてTurtleという構文で書くことが多くなると思います（RDFにはいろんな書き方があって、用途に応じて選べるのです）。 定義ファイルをブラウザで見ると例が表示されるようになっていますが、Turtleをご存じない方は、例のとおりに書くべきと
エンドユーザーが「使いやすい!」を実現する(かもしれない)8つの技術とテクニック集! | Webディレクションやってます blog
Webディレクターとして名村晋治がプロジェクトマネージメントやディレクション業務に当たっている時に感じている問題解決の手法やセミナー等で話をしている内容、自身が使っているプロマネにおけるツールなどWebディレクションに関する情報の紹介しています。 名村は、Webサイトを見ていて、「こうなった使いやすいかな?」と思ったりする技術を集めておくのは、まぁ、趣味みたいなものです(笑) ただ、自分がエンジニアではないので、システム側ではなくて、表層技術側の方で出来る実装内容を集めているのですが、備忘録代りにエントリーしておきたいと思います。 CSSを使わずに画像を使ったSEOマークアップが簡単にできるjavascript CSSにより画像置換の良し悪しは別途議論するとして[謎]、システム側にさっさかHTMLを渡さないと行けなくて、かつ未だに細かいところに調整が入っているので、その場合には、システム側
RedLine Magazine : 半透明ボックスに関するメモ
半透明ボックスに関するメモ ※2008年2月8日、IE6でinputボタンが押せない件について追記しました。 半透明ボックスに関してのメモ。 デザイナからの要望はこんな感じ。「よくあるタイプのコンテンツ部分の背景に単色ベタの土台を置くようなデザインじゃなくて、今回は背景画像を活かしたデザインにしたい、テキストやら写真やらの中身を入れるボックスだけ半透明にして見せたい背景画像をうっすら表示させたい。」 今回やっかいだなと思ったのが、コンテンツ部分が全面そういう風に背景の上で半透明になっているのではない点。タイトル画像が入る部分やそれぞれのセクションの余白部分は半透明ではなく、素の背景が見えるというもの。文章にするとややこしい・・・つまりこんな感じ↓。(背景とか色合いとか変だけどあくまでサンプルだから気にしないでください・・・。) 半透明のボックスって中身も半透明になるんだよね CSSだけでボ
MOONGIFT: » JavaScriptとCSSの融合「Dynamic CSS via JavaScript」:オープンソースを毎日紹介
JavaScriptを使ってCSSを変更というのは良くあることだ。例えばクリックで表示を消す場合やフェードアウトさせるような類のイフェクトがある。$("hoge").style.display="inline";のような指定をするだろう。 しかしこれではCSSとJavaScriptの距離が遠い。もっとダイナミックにCSSを操作しよう。 今回紹介するオープンソース・ソフトウェアはDynamic CSS via JavaScript、JavaScriptによるCSS操作ライブラリだ。 まさにダイナミック。CSSというオブジェクトを生成し、そこにルール（CSS指定）を追加していくという形式で描かれる。スタイルタグを動的に生成し、描画を変化させられる。 利点は何だろうか。まず、CSS上の指定を変数にまとめられるようになる。また、タグクラウドのような状態によってフォントサイズを変更するようなものを、
「超情報整理」NASAのAjaxを駆使した新サイト「NASA 5.0」使用Ajaxまとめ付
組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! NASAの新オフィシャルサイト「NASA.GOV 5.0」 ↑NASAといえば、Googleに情報を提供するほど膨大な量の情報を持っているわけですから、情報整理のノウハウが詰まっているはず。 NASA 5.0 ↑これがNASA5.0のサイト。たまに「新しいタブ」ではなく「新しいウインドウ」でページが開くので、すべてが良いわけではないですが、参考になる部分はいろいろありそうです。 RSSフィード登録 ↑フィード登録にも気を使った感を受けます。 ブクマボタン ↑ついに政府機関もSMO！？流行どころはしっかりと押えているようです。 ちなみにこのサイトで使われているのはPrototype JavaScript、Ajaxを使った主な特徴も公表されていました。
[暴満館] JavaScriptによるCSSの操作
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらないので、あまり必要にならない
ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js
ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js Dynamiclayout.jsはウィンドウサイズに合わせて読み込むCSSファイルを変更できるJavaScriptライブラリになります。 dを使用することにより、リキッドイアウトの幅を広げることが可能です。 設置方法 ダウンロードしたdynamiclayout.jsをhead要素などで読み込みます。 <script src="./dynamiclayout.js" type="text/javascript"></script> ウィンドウ幅に合わせたCSSファイルを用意します。 それぞれのCSSファイルを読み込む際にはtitle属性に ウィンドウ幅が750pxまでの場合の『thin』 ウィンドウ幅が950pxまでの場合の『wide』 ウィンドウ幅が950pxより大きい場合の『wider』 を付けて読み込みます。
CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
CSS+JavaScriptで画像に柔軟なレイアウトを作る。（日本語訳） - Trans
著者: Aaron Gustafson件名: If I Told You You Had a Beautiful Figure...日付: 2007年9月25日URL: http://www.alistapart.com/articles/figurehandler訳者: Arata Kojimaその他: Translated with the permission of A List Apart Magazine and the author[s]. If I Told You You Had a Beautiful Figure... 率直に言って、画像というのは本当にイライラさせる。OK、ところで、たぶん画像自体が問題なのではない。しかし、画像をデザインの中でかちっとレイアウトするのは難しい。画像を使って、うまくコンテンツの意味を訪問者に知らせたいときは、特にそうだ。 もちろん、ちゃ
Pure CSS Scrollable Table with Fixed Header
Also see the The Bullet Resistant Version :: Wider range of support and degrading of Browsers Browser Support (table is scrollable with fixed headers) Opera 7.x + (All Platforms) :: Tested with 7.2x and 7.5x Mozilla 1.x + (All Platforms) :: Tested with 1.0x and 1.6x IE 6.x + (Windows) :: Tested with 6.0x Safari 1.x + (MacOS) :: Tested with 1.2x Konqueror 3.x + (Linux / BSD) :: Tested with 3.2x Alm
CSSとJavaScriptで作るサイトマップ -Sitemap Styler | コリス
Sitemap Stylerは、リストで記述した階層構造からCSSとJavaScriptでサイトマップを作成します。 emap Styler: Style your Sitemaps with CSS and Javascript [Css Globe] サイトマップのデモは３種類あり、CSSとJavaScriptの外部ファイルとリストを記述するだけで、簡単に作成することができます。
フロントエンド系(XHTML・CSS・JavaScript・XML)のチートシート
(X)HTML、CSS、JavaScript、XMLなどのサイト制作のフロントエンド系のチートシートのまとめです。 各チートシートのリンクは、下記の「チートシートのポータルサイト」より収集しました。 (X)HTMLのチートシート CSSのチートシート JavaScriptのチートシート JavaScritpt ライブラリのチートシート XMLのチートシート チートシートのポータルサイト (X)HTMLのチートシート XHTML Basic: children - parents XHTML Basic: elements - attributes XHTML Strict: children - parents XHTML Strict: elements - attributes HTML Cheat Sheet HTML Quick Reference(PDF) XHTML Cheat
[JS]テーブルの一部をハイライト・切り替えることできるスクリプト
Crazy Egg'sで実装されている、テーブルのハイライトされた箇所を動的に切り替え、別の要素を表示するスクリプトの紹介です。
ソートが可能なテーブル実装ライブラリ色々:phpspot開発日誌
CSS Juice 16 Sortable Table Techniques Tabular data in table form is a regular technique on web sites and web applications for represent data and information. ソートが可能なテーブル実装ライブラリ色々。 JavaScriptとCSSを活用し、データのソートが可能な便利なウィジェットを実装できるライブラリが多数紹介されています。 Nofunc Table Organize TableKit Brixontech Table Sort Sortable Selectable Zebra Table Kryogenix Sortable Sorting HTML Tables with Javascript SortedTable by M
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
本当にiPad“だけ”にCSSを読み込ませるには。
[JS]スタイルシートを機能拡張するスクリプト -MoreCSS