[JS]img要素の属性で画像をLightbox風に拡大するスクリプト -Fullsize
img要素の属性「longdesc」「title」を元に、Lightbox風にスムーズなアニメーションで画像を拡大するスクリプト「Fullsize」を紹介します。 Fullsize A New IMG Tag Attribute 「longdesc」は本来、画像の（詳細で長い）説明ページへのリンクを記述する属性です。 作者は、img要素に大きい画像を指定する属性「fullsize」を望んでおり、その代わり（？）として「longdesc」を使用したとのことです。 属性を使用しているため、img要素にリンク（a）を設置できる仕様は大きなポイントだと思います。 スクリプトの「longdesc」「title」を変更したい場合には、「jquery.fullsize.js」のL.71, 75, 76を変更すればよさそうです。 対応ブラウザはIE6/7/8, Fx, Op, Safari, Chrome
JSでモーダルウィンドウを実装する方法20+ – creamu
「DESIGN LABEL」で、JSでモーダルウィンドウやダイアログボックスを実装する方法がたくさん紹介されています。 ざっといくつかご紹介。 » Prototype Window prototypeフレームワークをベースにしたjavascript » Simple Modal いろいろなタイプのモーダルダイアログボックスを作るjQueryベースのプラグイン » Moodalbox Ajaxで外部コンテンツを表示する。mootoolsを使用 » jqModal マルチモーダルダイアログ（モーダルの中にモーダル）が可能なjQueryプラグイン » Lightwindow pdf、flash、QuickTimeなどのファイルをJSダイアログボックスで開ける » Facebox 画像やdiv、ページ全体を表示するためのFacebookスタイルのlightbox クールなインターフェースが揃ってい
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
JavaScriptを使わずCSSのみでシンプルなツールチップ実装:phpspot開発日誌
Easy CSS Tooltip | Kollermedia.at JavaScriptを使わずCSSのみでシンプルなツールチップ実装。 CSSの a:hover を応用して、次のようにシンプルなツールチップを実装するサンプル。 コードは以下のようにシンプルにかけます。 <html> <head> </head> <style> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; background:#fffff
reizn Second-Life - Emacs + php-mode + css + javascript + mmm-mode
Python版はこちらです。 関連サイトです。 php-mode mmm-mode タグ： emacs php-mode css javascript mmm-mode == 準備 $ wget http://downloads.sourceforge.net/php-mode/php-mode-1.2.0.tgz?modtime=1123071843&big_mirror=0 $ tar xzvf php-mode-1.2.0.tgz $ mkdir -p ~/.site-lisp $ mv php-mode.el ~/.site-lisp/ $ mkdir -p ~/.php/doc/html $ wget http://jp.php.net/get/php_manual_ja.tar.gz/from/this/mirror $ tar xzvf php_
プログラマが1ヶ月でWebデザイナーに転身する方法 - やねうらおブログ(移転しました)
サイトを構築していると、プログラマはWebデザイナーと共同作業をしなければならない。 しかし高度なRIAを実現しようとすると思っているようにWebデザイナーに素材を作成してもらうだけでもとても骨の折れる作業だ。 そこで、一層、「すべてのプログラマはWebデザイナーになればいいんじゃね？」と思った。 今回は、私の実体験に基づき、「プログラマが1ヶ月でWebデザイナーに転身する方法」というのを考えてみた。 ■ HTML,CSSを覚えよう まず、HTMLとCSS。いくら私でもW3C( http://www.w3.org/ )のすべてに目を通せとは言わない。 ブラウザ間で挙動が違うのでそれぞれのタグがどのブラウザで使えるのか一覧がまず欲しい。手軽なのは詳解HTML & CSS & JavaScript辞典。このハンドブックは見やすいのでお勧め。また、よく使うタグに関してはすべて覚えよう。覚えている
フォルダに画像を入れるだけでフォトビューアを作ってくれる『Visión』 – creamu
Simple PHP/JS/CSS Photo Viewerという「Visión」が公開されています。 As you place images into the specified images folder, Visión automatically updates. 特定の画像フォルダに画像を入れると、Visiónは自動的にアップデートされる。 とのことで、使いやすいビューアとなっているようですね。 以下の環境でテスト済みとなっています。 ・Internet Explorer 6 & 7 ・Firefox 2.0.0.9 & 2.0.0.2 (Ubuntu) ・Safari 2 & 3 ・Opera 「Download Visión」からソースをダウンロードできるので、一度使ってみてはいかがでしょうか？ » Visión, Simple PHP/JS/CSS Photo Viewer
色々な使い方が考えられそうな「次へ」「前へ」ボタン付タブＵＩ実装ライブラリ:phpspot開発日誌
jQuery UI Tabs with Next/Previous 色々な使い方が考えられそうな「次へ」「前へ」ボタン付タブＵＩ実装ライブラリ。 ありがちな、タブＵＩにちょっと機能を付け加えて便利にしたものです。 「次へ」「前へ」ボタンがついたことで、画像を貼り付けてもよさそうですし、スライドみたいな使い方もできそう。 トップページなんかの、限られたスペースの中に沢山の情報を埋め込むのもよいかもしれません。 デモページ jQueryベースなので使い勝手も良さそうですね。 関連エントリ 多数のタブをグループ化して管理できる「TooManyTabs」 超クールなタブインタフェースをjQueryで作成するチュートリアル フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」 タブ式のスライドウィジェットを簡単作成できるjS「jFlow」
死ぬまでに見ておくべきCSSデザインサイト集まとめ - GIGAZINE
ということで、今まで数限りなくネットのあちこちで紹介されてきたCSSデザイン関連のサイトがリスト化されてまとめられたようです。これだけあれば当分はブログなどのデザインのネタに困ることはなさそう。インスピレーションを得るのに使うもよし、デザインの参考にするのもよし、知っておいて損はないものばかりです。 リストは以下の通り。 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards http://www.cssbeauty.com/ CSS Drive- Categorized CSS gallery and examples. http://www.cssdrive.com/ Stylegala - Web Design Publication http://www.stylegala.com/ CSS Mania http:
チェックボックスを綺麗に並べるCSSサンプル:phpspot開発日誌
Checkbox alignment in IE and Firefox | Xinotes チェックボックスを綺麗に並べるCSSサンプル。 次のように、チェックボックスの横に、改行入りのテキストを入れても綺麗に配置するサンプルです。 簡単そうでなかなか難しいテクニックかもしれないので覚えておくとよいかも。 サンプル IEでもFirefoxでも動作。Chromeでも試してみたところ動作しました。 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル CSSでクールなINPUTフォームを作成するサンプル CSSベースのクールなフォーム、サンプル集 CSSでフォームデザインをする際のチュートリアル
クールにデザインされた多機能LightBox「ColorBox」:phpspot開発日誌
ColorBox - customizable lightbox plugin for jQuery クールにデザインされた多機能LightBox「ColorBox」 もう成熟してきたこの分野ですが、ColorBoxはなかなか多機能かつクールなようなのでご紹介。 単一の写真表示 写真をグループ化してページ送り機能 AjaxでHTML取得 インラインＨＴＭＬも可能 ビデオ埋め込み IFRAMEで外部ページの埋め込み 機能も勿論多機能でいいのですが、デザインが色々と選べるところがいいです。 以下、３つのテーマが基本テーマ以外に用意されているみたいです。 シンプル調 Apple風(?) シンプル調2 カスタマイズして簡単にデザイン変更もできそうです。 jQueryプラグインで、MITライセンスとのこと。 関連エントリ カスタマイズできる多機能LightBox「Lightview」 表示法が新しく
SelectorGadget: point and click CSS selectors
SelectorGadget is an open source tool that makes CSS selector generation and discovery on complicated sites a breeze. Just install the Chrome Extension or drag the bookmarklet to your bookmark bar, then go to any page and launch it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (it will turn green). SelectorGadget will then g
W3Schools Online Web Tutorials
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
25 jQuery Plugins for Navigation - DesignM.ag
li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> Home Categories Tutorials Resources Inspiration Freelance Interviews Design Freebies About Contact Advertise With Us Write For Us Contact
Moving Boxes
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! We’ve been down the jQuery “sliders” path a few times before. Once for the Auto-Playing Featured Content Slider and again for the Start/Stop slider. Many of the concepts presented in those tutorials are the same with this slider, so I’m not going to throw a lot of source code at you this tim
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/03/form-design-2.html
http://www.designwalker.com/2009/02/jquery-dropdown.html
Rendur 2.4
HTML、CSS、JavaScriptの練習に最適な便利ツール『rendur』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
