Site Under MaintenanceWe'll be back soon! Our site is currently undergoing maintenance. Please check back later.
10 Useful CSS/JS-Coding Solutions For Web-Developers — Smashing Magazine
Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. In fact, by just observing the code of other developers we can learn a lot from t
word-break:break-allをFirefox等でも実現するjavascript - Webtech Walker
最近やたらとURLなどの文字列が折り返されない現象で頭を悩まされます。IEとSafari3以降はCSSでword-break:break-allを指定すれば折り返してくれます。Firefox3はハイフン(-)やスラッシュ(/）があればそこで折り返すのですが、半角英数のみだと折り返してくれません。word-break:break-allと少し挙動が違うようです。Firefox2はハイフン等の記号があっても折り返さず、突き抜けてしまします。 to-RさんがFirefoxとOperaでword-break:break-allを実現する「wordBreak.js」を公開していますが、tableだけにしか適用されずFirefox2をサポートしていないので、自分で書いてみました。（追記：ソースをgistにあげました） wordbreak.js for jQuery — Gist IEとFirefox2
[JS]ブラウザの幅に合わせてレイアウトを最適化するスクリプト -Dynamic Layout
Dynamic Layoutは、ユーザーのブラウザの幅を認識し、それに適したスタイルシートでページのレイアウトを最適化するスクリプトです。 Dynamic Layout デモ Dynamic Holy Grail 1～3カラムのシンプルなレイアウト、ブラウザ幅600, 800, 1000に設定 Fortes ブラウザ幅600, 800, 1000, 1200, 1400に設定 fil-ter ブラウザ幅600, 1000に設定 Dynamic Layoutの設置方法は、body直下に外部ファイルとして指定します。 <textarea name="code" class="html" cols="60" rows="5"> <body> <script src="http://static.fortes.com/projects/dynamiclayout/dynamiclayout-1.0
CSS・JSを活用して高度なUIを作成するサンプル集「The Highly Extensible CSS Interface」:phpspot開発日誌
The Highly Extensible CSS Interface CSS・JSを活用して高度なUIを作成するサンプル集「The Highly Extensible CSS Interface」。 デモサイトのようなリッチなUIを実現するためのサンプル集 Part I: The Foundation Part II: CSS Selectors & jQuery Part III: Adding Ajax Interactivity Part IV: Testing for Extensibility jQuery、Ajaxなどを活用してページを作成していく部分はページ作りにおいて非常に参考に出来る部分が多いです。 IE7, FireFox2, Safari2.x 以降が推奨環境となっているようです。
米Yahoo!、デザイン性の高いJavaScriptライブラリ「YUI 2.5.0」リリース：CodeZine
米Yahoo!は20日、「YUI 2.5.0」（Yahoo! User Interface）をリリースした。SourceForgeのYUIページよりダウンロードすることができる。YUIは見た目の美しさと機能性が人気のJavaScriptライブラリ。 今回のアップデートでは、「Layout Manager」「FlashとJavaScriptを組み合わせたUploader」など、6つの新しいコンポーネントが追加された。他にも「DataTable Control」など既存機能も改良されている。 このうち「DataTable Control」はYUIの中でも最も人気のあるコントロールだが、埋め込みタイプの横スクロールバー、ヘッダーにあわせた縦スクロールバーといった機能が追加された。カラムのカスタマイズ性も向上しており、ドラッグ＆ドロップ、表示・非表示、並べ替えなどが行える。 新機能のアップロー
【ハウツー】ゼロからはじめるThe Yahoo! UI Library - Calendar編 (1) 「The Yahoo! User Interface Library」とは? | パソコン | マイコミジャーナル
米Yahoo!が開発した「The Yahoo! User Interface Library」(以下、YUI)は、UI(ユーザーインタフェース)の機能を多く持つAjaxライブラリです。UI機能という点では他のAjaxライブラリとは比較にならないほど数が多く高機能です。 ただし、YUIだけで全てが済むことはありません。明らかに機能が不足している面もあるため、他のライブラリと組み合わせるか、独自に作成しなければならないこともあります。この点に留意すれば、UI部分の強化および補助という観点でYUIは非常に強力なライブラリとなります。 本稿では、YUIの初期の頃から用意されているUIの1つ、カレンダー機能について説明します。このカレンダー機能はバージョンアップのたびに修正が加えられてきたため、少し古いバージョンで解説してあるページや書籍では役に立たないことがあります。ここではYUIの最新バージョン
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」:phpspot開発日誌
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」 2007年10月10日- Welcome to Tablecloth Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」。 テーブルにカーソルを合わせると次のように、現在位置がハイライトされます。クリックすると、その位置のハイライトを固定します。 シンプルな効果ですが、データが多くある際、現在位置の確認や、チェックしておきたい部分をハイライトさせておくことが出来るなど、ユーザビリティ向上が期待できますね。 使い方は次
サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」:phpspot開発日誌
サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 2007年10月11日- Css Globe - Sitemap Styler: Style your Sitemaps with CSS and Javascript I believe that it isn't necessary to point out the benefits of having a sitemap somewhere on your site.サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 スタイルなしの状態のリストを美しくツリー状に整形できます。 JavaScript によってツリーがクリックで開閉できます。 3種類の違うスタイルのサンプルが公開されているのでお好みのサンプ
WEB制作者とブロガーの『遊び心をくすぐる』26のブックマークまとめ*ホームページを作る人のネタ帳
今回まとめた内容をあらかじめ言っておきます。 CSS JavaScript イメージギャラリー Generator Ajax です。 とりわけJavaScriptやCSSは色々なブログでも使える為、ブロガーも頑張れば導入可能なプログラム等をなるべく多めにまとめました。 これは『個人的な感想』のテーマで、私個人が遊び心をくすぐられたものをまとめています。 あくまで私がくすぐられたもので、他の人がくすぐられるかどうかまでは保障できませんので、上記キーワードに興味の無い方は特にあらかじめご了承ください。 送信ボタンなどをちょっとセクシーにするCSS 送信ボタンなどをちょっとクールにかわいらしくする為の知識。 JavaScriptがいらないイメージマップの切り出しサンプル 画像にマップを埋め込んで華麗に表示する為の知識。 口で言うより、デモを見たほうが早い。 チェックボックスとラジオボタンをオシャ
The Coolest DHTML / JavaScript Calendar [dynarch.com]
What is it? » Popup or flat DHTML calendar » Suitable for selecting date/time Supported browsers » Internet Explorer 5.0+ for Windows » Mozilla, Netscape 7.x, Mozilla FireFox (any platform) » Other Gecko-based browsers (any platform) » Konqueror 3.2+ for Linux and Apple Safari for Macintosh » Opera 7+ (any platform) Features » The look is customizable through external CSS » High quality color them
PHPとAjaxでクールなグリッドウィジェットを実現「XAJAX PHP Live Datagrid」:phpspot開発日誌
PHPとAjaxでクールなグリッドウィジェットを実現「XAJAX PHP Live Datagrid」 2007年05月11日- XAJAX PHP Live Datagrid / Gridview I’ve come across a lot of these ‘live’ datagrids / gridviews and I haven’t really found one I like. PHPとAjaxでクールなグリッドウィジェットを実現「XAJAX PHP Live Datagrid」。 次のようなソート可能なグリッドテーブルを実現できます。 CSSによってレイアウト変更が可能なようです。 同じようなライブラリは存在しますが、PHP+XAJAXライブラリなものということで、そちらに慣れている人には使いやすいでしょう。
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
Devthought - Guillermo Rauch’s Blog » CSS Javascript power. Fancy menu
Update: the code that empowers this menu has been upgraded to the latest MooTools version, and even improved! Now works with vertical, horizontal menus, with more flexible morphing! Let me introduce you to Fancy Menu: Home Plant a tree Travel Ride an elephant When it comes to creating the navigation part of your Website, the first thing you might think of is an unordered list that you style
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サイト制作のためのテンプレートをごっそり自動生成してくれる『Project deply*』 | IDEA*IDEA
ちょっとした説明に便利なTooltipsのスクリプトいろいろ | IDEA*IDEA
Code Courses and Tutorials | Envato Tuts+