[CSS]シンプルなHTMLで実装するダイナミックなサイトマップコンテンツ
<ul> <li><span>Fruit</span> <ul> <li><span>Apples</span></li> <li><span>Oranges</span></li> <li><span>Watermelons</span></li> </ul> </li><!-- Fruit --> <li><span>Vegetables</span> <ul> <li><span>Leaf Vegetables <a href="linktothisitem">#</a></span> <ul> <li><span>Arugula</span></li> <li><span>Cabbage</span></li> <li><span>Lettuce</span></li> <li><span>Spinach</span></li> </ul> </li><!-- Leaf Veget
jQueryとCSSで実現する押しやすくオシャレなチェックボックス実装チュートリアル:phpspot開発日誌
Better Check Boxes with jQuery and CSS | Tutorialzine jQueryとCSSで実現する押しやすくオシャレなチェックボックス実装チュートリアル。 独自のチェックボックスを実装するチュートリアルとサンプルがダウンロード出来ます。 普通のチェックボックスは小さくて連続して押したりする場合は結構ストレスがたまったりしますね。 というわけで次のようなチェックボックスを作る例です。 大きくて押しやすく、画像ベースにデザインされており、なかなかカッコいいというのも特徴。 スクリプト部分にはjQueryプラグインが使われていますが、５０行程のスクリプトなので改造も容易です。 標準のチェックボックスのストレスを取り払い、デザイン性も持ち合わせたチェックボックス導入の際に参考にできます。 関連エントリ デザイン性に優れたクリエイティブなフォームデザインのサン
MdN Design｜総合情報サイト
Web制作が楽しくなるCSS3/JavaScriptのテクニック50 - 海外デザイン事情第6回 新規会員登録 ログイン管理 Twitter facebook はてなブックマーク RSS 2025.7.16 WED 第6回「Web制作が楽しくなるCSS3/JavaScriptのテクニック50」 2010年02月15日 ブラウザ対応が進み、本格普及が間近となったCSS3。海外ではすでに多くのCSS3を使ったデザインテクニックが公開されている。ここではSmashing Magazineに掲載された「50 Brilliant CSS3/JavaScript Coding Techniques」をもとに、CSS3に関する海外の最新テクニックを紹介しよう。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：50 Brillian
IE6のバグや仕様の解決方法のまとめ -Ultimate IE6 Cheatsheet
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
WEBデザイナー必見！あらゆるリソースが参照できる「Web design tools and resources」
TOP > WebDesign > WEBデザイナー必見！あらゆるリソースが参照できる「Web design tools and resources」 Deisngdevelopではデザイン、WEBに役立つ様々なコンテンツを日替わりで紹介していますが、今回紹介する「Web design tools and resources」はあらゆるWEBデザインに役立つリソースがまとめられているエントリーです。 リソースはリソースはJavascript、Miscellaneous Tools、Hosting、Grid Design、Typographyなどとジャンル分けされ、一覧になっていて非常に分かりやすくまとめらられています。 詳しくは以下 タイトル横に属性が付けられています。 さらに嬉しい事にサイトへのリンクだけではなく、簡単な説明とそのリンク先でDownloadができるのか、サンプルが
jQuery、CSSなどなどWEB開発に役立つチュートリアル集「30+ Eye-Opening Web Development Screencasts」
jQuery、CSSなどなどWEB開発に役立つチュートリアル集「30+ Eye-Opening Web Development Screencasts」 WEBの技術は日々進歩していて、様々な技術、技法が世の中には溢れていますが、今回紹介するのはjQueryやCSS、PHP、ASP、Ruby on Railsなどなど項目毎に、WEB開発に役に立つチュートリアルを30以上まとめたエントリー「30+ Eye-Opening Web Development Screencasts」です。 どれも実用的で、役に立ちそうなものが多いのですが、今回は紹介されている中から特に気になったチュートリアルをピックアップして紹介したいと思います。 詳しくは以下 ■Coda Slider Effect jQueryを使ったスライダーです。カーソルです、メニューからでもカーソルでも自由に動かせます。 ■ Desig
[JS]ナビゲーション画像にアニメーションのエフェクトをつける -CSS Sprite2
A List Apartのエントリーから、CSS Spriteを使用したナビゲーションに、マウスオーバー時にアニメーションのエフェクトをつける「CSS Sprite2」を紹介します。 CSS Sprites2 - It's JavaScript Time demo 5 demo 6 CSS Spriteとは、スタイルシートで一枚の画像から複数箇所に配置をしたり、マウスオーバー時の画像指定を行うものです。 CSS Sprite2は、そのCSS Spriteにスクリプトを使用して、アニメーションのエフェクトつけたものです。 使用するスクリプトは、デモではjQueryが使用されていますが、PrototypeでもYUIなど他のスクリプトでも実装は可能です。 CSS Sprite2のベースとなっているのは、下記ページとのことです。
製品を効果的にPRするためのPRページを作成するチュートリアル:phpspot開発日誌
NETTUTS - Create a Simple, Powerful Product Highlighter with MooTools 製品を効果的にPRするためのPRページを作成するチュートリアル まず、デモを見てみましょう。アイコンにカーソルを合わせると、吹き出しがクールに切り替わります。 JavaScript、マークアップ、CSSが公開されており、カスタマイズで簡単に調整できます。 ソースがダウンロードできますので、遊んでみましょう。商品のＰＲページを作っていた人は活用してみるのもよいかも。 関連エントリ Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ jQueryでクールにアニメーションするメニューを実装するチュートリアル
コンテンツをブロック内でスクロールさせられる「Easy Scroll」:phpspot開発日誌
Easy Scroll v1.0 - Unobtrusive content scroller This is a demonstration of an unobtrusive content scroller.コンテンツをブロック内でスクロールさせられる「Easy Scroll」 先日、横スクロールのものを紹介しましたが、たてスクロールのものもありましたね。 狭い範囲に情報を入れたい場合に活用できそうなので覚えておきましょう。 関連エントリ カーソル位置によって自動スクロールする小窓実装ライブラリ
ポインタを合わせるだけでボックス内を水平に動くようにするCSSとMootoolsのあわせ技
ちょっとしたサイトのアクセサリーとして使えそうな感じです。 サンプルはこちら 灰色のボックス内のはじっこにマウスを持っていくと、ボックス内だけがスクロールし始めます。 詳細は以下で。 コードは結構簡単 以下のようにmootools.svn.jsを読み込みます。 <script type="text/javascript" src="mootools.svn.js"></script> 以下も、bodyタグの前に挿入<script type="text/javascript"> window.addEvent('domready', function(){ var scroll = new Scroller('container', {area: 100, velocity: 1}); $('container').addEvent('mouseover', scroll.start.bin
[JS]ブラウザの種類を検出して、CSSのセレクタで実装できるスクリプト | コリス
jQuery Browserは、スクリプトでブラウザの種類を検出して、CSSのセレクタとして実装できるスクリプトです。 jQuery Browser jQuery Browserは、ブラウザのもつplatformやuserAgentから、OSやブラウザの情報を取得し、セレクタを利用して、ブラウザごとのスタイルシートを適用することが可能です。 jQuery Browserでのスタイルシートの記述例 <textarea name="code" class="css" cols="60" rows="5"> div#browser-test{ border: 2px solid #000; padding: 10px; } ■Internet Explorer用 div#browser-test.msie{ background-color: #f00; } ■Firefox用 div#brow
[JS]パネルをフェードや加減スクロールで切り替えるスクリプト -wSide
wSideは、パネルの切り替えにフェードや加減スクロールなど多彩なアクションを実装するスクリプトです。 wSide, plugin jquery wSideはjQueryのプラグインで、動作にはjquery.jsが必要です。 切り替え時の多彩なアクションは、デモページを参照ください。 シンプル デモ 縦方向・横方向への加減スクロール、フェード エフェクト付き デモ 反動付きスクロール、縦横斜めのスクロール アドバンス デモ CSSを利用して、さまざまな効果を狙ったパネルの切り替え
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)（引用：ウェブコンテンツ・アクセシ
A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets
So you’ve got a web page. You’ve marked it up with structural XHTML. You’ve also been a good little web developer and used style sheets to control what your document looks like. You’ve even gone the extra mile and created several alternative style sheets to show how hardcore you are. Great. But now you need a cross-browser way to dynamically switch between the style sheets. Styling your site#secti
Flash,JavaScript,CSS,PHPでグラフ作成のためのライブラリ色々:phpspot開発日誌
16 librairies et scripts pour g・・er des graphiques sur Internet | Simple Entrepreneur Flash,JavaScript,CSS,PHPでグラフ作成のためのライブラリ色々。 Flash amCharts Maani JavaScript EJSChart PlotKit AjaxMGraph CSS Css For Bar Graphs Vertical Bar Graphs with Css and Php Bargraph Dynamic Pie Chart with Css Css Vertical Bar Graphs Displaying percentages グラフ画像生成ライブラリ JFreeChart Artichow JpGraph Chart Director Graphviz Ima
【HTMLタグの簡単検索】TAG index - ホームページ作成情報
ページ全般 ボックス テキスト リンク リスト イメージ テーブル フレーム フォーム フィルタ CSSの基本 CSSプロパティ一覧［ABC順］ リファレンスについて HTML リファレンス HTML Living Standardに対応したリファレンスです。 HTMLタグ リファレンス HTML4の時代に作成したリファレンスです。古いWebページを更新する際などに参考にしてください。 CSS リファレンス CSS2の時代に作成したリファレンスです。 特集記事 レンタルサーバーの選び方 ～ 厳選おすすめサーバーを比較紹介 レンタルサーバーの容量はどのくらい必要か ～ 計算方法と目安を解説 法人向けレンタルサーバーの信頼度は？ ～ 安定性や安全性を測る指標を解説 記事一覧
JavaScript/HTML5, iPhone/Android, ハイビジョン映像, 自動化関連：[OpenSpace]
Web関連およびアプリケーション、映像関係、静止画素材、自動処理、4K/8K/ハイビジョン素材関連などを扱っています。 誤字脱字等、お気づきの点がありましたら、お気軽にメールをください。 この目次にないアプリケーション等の使い方などに関してはその他のリファレンス／アプリケーション...のページを参照してください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML/CSS, jQuery, WordPressなどウェブ制作者のためのチートシート集
[JS]スタイルシートを機能拡張するスクリプト -MoreCSS
Ajax/Javascript/Dhtml examples and demos to download