はてなブックマーク

:disabledセレクタはdisabled属性が付与されているフォーム要素を探すセレクタです。 $("input:disabled") :disabledセレクタはdisabled属性がサポートされている以下の要素でのみ利用すべきである。 (button要素、input要素、optgroup要素、option要素、select要素、keygen要素、fieldset要素とtextarea要素) jQuery 1.0.0での追加/変更:disabledセレクタはjQuery 1.0で定義されました 参考URL:disabled Selector | jQuery API Documentation 登録日 : 2015年10月23日 最終更新日 : 2015年10月28日 同じカテゴリー(Selectors)のエントリー :disabled [attribute~=’value’] [at

aria-live属性は内容が更新された際にユーザーに伝達するかどうかを指定できるWAI-ARIA属性です。 aria-live属性には以下の値を指定することができます。 値 内容 off 内容が更新されてもユーザーに伝達しない(デフォルト) polite 現在の読み上げの終了やユーザー入力時など適切なタイミングで、内容が更新されたさいにユーザーに伝達する。 assertive 即座に伝達を行う 以下のサンプルではprogress要素の進歩度をJavaScriptなどで逐次変更し、100%になったタイミングで読み込み終了のメッセージを表示するサンプルです。 progress要素にはaria-live=”polite”を指定しててきじ進歩度をユーザーに伝達し、読み込み終了のメッセージにはaria-live=”assertive”を指定して即座にユーザーに伝達できるようになっています。 <pr

change()は値が変更された際に発火するイベントです。 次のサンプルでは.targetの値は変更された際にアラートが表示されます。 $( ".target" ).change(function() { alert( "Handler for .change() called." ); }); これは、.on(“change”,…)のショートハンドとして機能します。 .val()などのJavaScriptを利用して値を変更した場合にはchangeイベントは発火しません。イベントを発火させたい場合は以下に指定する方法で明示的に発火せる必要があります。 引数に何も指定しないことで設定しておいたchangeイベントを発火させる事も可能です。 $( ".target" ).change(); これは、.trigger(“change”)のショートハンドとして機能します。 また、jQuery 1.

aria-label属性は要素に対してラベル付けを行うことができるWAI-ARIA属性です。 文字列を表示する必要が無いケース、例えばアイコンのようなビジュアルで目的を表現する要素に対して指定を行います。 以下のサンプルでは、ビジュアルブラウザに対しては「☓」という文字列でダイアログを閉じる機能を提供しています。このままではスクリーンリーダー等では「☓」が提供する機能がわからないため「aria-label=”Close”」としてラベル付を行い補足をおこなっています。 <button aria-label="Close" onclick="myDialog.close()">X</button> 評価対象 スクリーンリーダーなどの支援デバイスは、 aria-labelledby属性 > aria-label属性 > テキストの内容 の順に評価するため、aria-labelledby属性と同時

orderプロパティはFlexアイテムの並び順を制御するためのプロパティです。 Flexアイテムに対して並び順を指定することができます。 以下の様なHTMLに対して、次のようなCSSを適応します。 HTML <div class="flex"> <div class="flex-item1">1</div> <div class="flex-item2">2</div> <div class="flex-item3">3</div> </div> CSS .flex{ display : -webkit-flex; /* for old webkit browser */ display : flex; padding:2px; background: black; } .flex-item1{ -webkit-order:3; /* for old webkit browser */ o

flex-wrapはFlexアイテムがFlexコンテナボックスの横幅から溢れた際の挙動を制御するためのプロパティです。 flex-wrapは以下の値を取ることができます。 値 振る舞い nowrap 改行せずFlexコンテナボックス内に収まろう縮小し表示される wrap 改行し縮小しないで表示される wrap-reverse 改行し縮小しないで表示されるが改行後のFlexアイテムは上部に表示される 図で示すと以下のようになります。 このプロパティはFlexコンテナボックスに対して指定を行います。 .flex{ display : -ms-flexbox; /*for IE10*/ display : -webkit-flex; /*for old webkit browser*/ display : flex; -ms-flex-wrap : nowrap; /*for IE10*/ -w

JSON.parse()は文字列をJSONオブジェクトに変換する為のメソッドです。 JSON.parse('{"bar":"foo"}');//{bar:"foo"} 変換できない文字列を引数に与えるとエラーが発生します。 JSONオブジェクトを文字列に変更するにはJSON.stringify()を利用します。 対応ブラウザ IE Chrome Safari Firefox iOS Android ◯ 8〜 ◯ 4〜 ◯ 4〜 ◯ 3.5〜 ◯ 4.1〜 ◯ 2.1〜

Object.create()はオブジェクトの継承を行うためのメソッドです。 ECMAScript5で追加されたメソッドでIE9から利用できます。 以下のようにして継承元のオブジェクトを引数に指定することで機能が継承された新しいオブジェクトを作成できます。 obj1 = { text1 : "text1", text2 : "text2" } obj2 = Object.create(obj1); console.log(obj2.text1);//text1 以下のサンプルではobj1の機能を継承したobj2を作成しています。作成したobj2の値を変更した場合は元のオブジェクトであるobj1に影響はありません。 obj1 = { text1 : "text1", text2 : "text2" } obj2 = Object.create(obj1) obj2.text1 = "text

ajaxSuccess()はAjaxを成功した際に実行したい関数を指定できるメソッドです。 $( document )に指定することによりjQueryで行なったAjaxが成功した際に引数に指定したコールバック関数が実行されます。 グローバルイベントとして設定されるため、ページ内で実行されるすべてのAjaxに対して実行されます。 以下のサンプルではload()が終了する際にclass属性「log」がついた要素内のテキストをtext()を利用して書き換えています。 <div class="log"></div> <div class="trigger">Trigger</div> <div class="result"></div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></scrip

RTCPeerConnection()はWebRTCを行うためのRTCPeerConnectionオブジェクトを生成するためのコンストラクタ関数です。 以下のようにnew演算子をつけて実行することでRTCPeerConnectionオブジェクトを生成することができます。 var peer = new RTCPeerConnection(); 執筆時点(2014年7月)、段階ではGoogle Chrome、Opera、Firefoxのみがベンダープリフィックス付きで対応しているため以下の様なクロスブラウザ処理が必要になります。 var RTCPeerConnection = RTCPeerConnection || webkitRTCPeerConnection || mozRTCPeerConnection || function(){}; var peer = new RTCPeerCo

jQuery Mobileで取り扱えるイベントの一覧です。 checkboxradiocreate checkboxradiocreateイベントはチェックボックスやラジオボタンの生成が終った後に実行されるイベントです。 updatelayout updatelayoutはjQuery Mobile内のコンポーネントの表示・非表示が切り替わった際に発火させるトリガーイベントです。 throttledresize throttledresizeはページがリサイズされた際に発火するイベントです。 pageshow pageshowイベントはページ遷移時に新しいページが表示された際に発火するイベントです。 pageremove pageremoveイベントはページがDOM上から削除される際に実行されるイベントです。 pageloadfailed pageloadfailedイベントはページの読み

jQuery Mobile 1.3.0で追加/変更された機能の一覧です。 $.mobile.navigate() $.mobile.navigate()はhistory APIを取り扱うためのメソッドです。 navigate navigateイベントはhashchangeイベントやpopstateイベントを感知して発火するイベントです。 data-corners コラプシブルパネルはdata-corners属性で角丸の制御ができます。 data-dismissible data-dismissible属性はポップアップをポップアップ外のタッチで非表示にしないことでできる属性です。 data-close-btn data-close-btn属性はダイアログのクローズボタンの表示位置を設定できる属性です。 data-filter-reveal data-filter-reveal属性はlist

cssメソッドはCSSの取得・変更が可能なメソッドです。 第一引数にCSSプロパティのみを指定した場合は、そのCSSプロパティの値を返します。次の例でセレクターで取得したem要素が複数ある場合は最初のem要素のcolorプロパティを取得します。 var color = $("em").css("color"); 第２引数に値を指定したばあいはCSSプロパティの変更を行ないます。次の例ではem要素のcolorプロパティをredに変更しています。 $("em").css("color","red"); 引数にオブジェクトを受け渡すことで複数のCSSの値を同時に変更できます。 $("em").css({ "color":"red", "background":"blue" }); cssText css()では特殊な値としてcssTextを指定することが可能です。cssTextを指定する場合は値

jQuery 1.9.0で追加/変更された機能の一覧です。 $.type() $.type()はJavaScriptのオブジェクトの型を判定するメソッドです。 die() die()はlive()により設定されたイベントを削除できるメソッドです。 :target :targetはハッシュフラグメントにより絞り込みが行うことができるセレクタです。 :lang() :langはlang属性から要素を絞り込めるセレクタです。 :root :rootはHTMLのルート要素を指定できるセレクタです。 :only-of-type :only-of-typeは兄弟要素の中で単一要素を絞り込めるセレクタです。 :last-of-type :last-of-typeは兄弟要素のうち最後に登場する要素を検索できるセレクタです。 :first-of-type :first-of-typeは兄弟要素のうち最初に登

JavaScriptやjQuery、jQuery Mobile、HTML、CSSなどのリファレンスを提供しています

JavaScript に関するリファレンスを提供するサイト

jQueryに関するリファレンスを提供するサイト

jQuery Mobileに関するリファレンスを提供するサイト

JavaScriptやjQuery、jQuery Mobile、HTML、CSSなどのリファレンスを提供しています

JavaScriptやjQuery、jQuery Mobile、HTML、CSSなどのリファレンスを提供しています

JavaScriptやjQuery、jQuery Mobile、HTML、CSSなどのリファレンスを提供しています TinyURLのようなURL短縮サービスを構築できるPHPプログラムです。 GPLライセンス(GNU General Public License)で公開しておりますので、ご自由にお使いください。 設置方法 まずは、URL短縮プログラムをダウンロードします。 次にダウンロードしたzipファイルを解凍します。 解凍されたtフォルダ内のindex.phpをテキストエディタで開きます。 11行目の $password = "admin"; のadminの箇所を他のパスワードに変更してください。 サーバー上の任意の場所にアップロードしてください。 アップしたフォルダのパーミッションを777に変更してください。 アップロードしたindex.phpにブラウザでアクセスすればログイン可能で

JavaScriptやjQuery、jQuery Mobile、HTML、CSSなどのリファレンスを提供しています web制作に役立つプログラムやサービスを公開しています。 Web Creative Parkが公開しているツールです。 URL短縮プログラム TinyURLのようなURL短縮サービスを構築できるPHPプログラムです。 新着情報CMS PHPで作成された新着情報を表示する簡易CMSです。 Web Creative Parkが開発したWebサービスです。 経度緯度 検索 住所や施設名から経度や緯度を検索できるサービス。 QRコードMaker QRコードを作成できるツールにです。 Amazon リンク Maker Amazon のアソシエイトリンクが簡単に作れるサービスです。 キーコード取得 キーボードを入力するとそのキーコードが表示されます。 data URL スキーム作成 da

QRコードの作成ダウンロードが可能なwebサービスです。 QRコードに埋め込む文字列を入力してください。 (例)WebCreativePark http://www.webcreativepark.net (例)KazumaNishihata QRコードのサイズを設定してください。 QRコードの画像タイプを設定してください。 当サービスはQRcode Perl CGI & PHP scripts ver. 0.50を元に作成されております。 QRコードは(株)デンソーウェーブの登録商標です。

このサイトは? JavaScriptやjQuery、jQuery Mobileなどのリファレンスを提供するサイトです。 現在総意製作中の為、情報量は少ないですが、日々追加されていっています。

JavaScriptやjQuery、jQuery Mobile、HTML、CSSなどのリファレンスを提供しています 新着情報を表示するセミカスタマイズCMSです。GPLライセンス(GNU General Public License)で公開しておりますので、ご自由にお使いください。 【注意】一部のサーバーではPHPの設定ファイルであるphp.ini で allow_url_fopen = On と記述しなくては利用できません。 設置方法 まずは、新着情報CMSをダウンロードします。 次にダウンロードしたzipファイルを解凍します。 解凍されたindex.phpをテキストエディタで開きます。 14行目の $password = "admin"; のadminの箇所を他のパスワードに変更してください。 17行目の $encode = "UTF-8"; のUTF-8の箇所を出力したい文字コードに

お約束 このスライドは W3CのHTML Slidyを使用しています scriptaculousでちょっとだけ改造してます スライドは以下のURLよりアクセスが可能です http://www.webcreativepark.net/cssnite/20070323/ プロフィール 西畑 一馬(Nishihata Kazuma) 2002年からシステム会社でデザインやらプログラムなどを 2005年から株式会社ネットテンでCMS開発の責任者を とあるWEBクリエイターのblogなんか書いてます CSSとSEOのサイトも運営していたり・・・・ WEBどっぷりの日々を送っています