Developer's guide to accessibility mechanics
From The Front, Bologna 2016 @LeonieWatson Platform controls Role is "checkbox" Accessible name is "Bold" State is focused, checked, focusable Web control <input type="checkbox" id="bold"> <label for="bold">Bold</label> Role is "checkbox" Accessible name is "Bold" State is focused, checked, focusable HTML Accessibility API Mappings (AAM) The relationship between platform objects and web objects is
最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
スマホサイトでは「お気に入り/ブックマーク」への促しは有効な手段かもしれない / Maka-Veli .com
なぜ有効かというと ターゲットが、より一般層に近いから はい出た冒頭で結論。僕の悪い癖。 デバイス標準の機能というのは非常に有効です。 シェアボタンはそもそもシェアする先に自分が登録している必要があります。 しかし、他人へ発信する事やSNS登録する事に抵抗を覚えるユーザーはまだまだ多いです。 Webに浸かってると当たり前に思っている事が通用しないような、普段パソコンを触らない層にもアプローチできるのが今のスマホサイトだと思うんですよね。 （ここでは仮に”一般層”と呼ぶ事にします） 僕のブログのようなのは全体から見るとニッチですし専門的で、見てくださってる方々はそもそものITリテラシーが高いのでコレに当てはまりませんが、一般層は違います。 偶然、何かのサイトから訪れたり検索で訪れたり。その時に、「このサイト好きだなー、また見たいなー」と思っても、どうしていいかわからない状態に
【iPhone】UIデザイン向上をサポートをするOSS 5つ - enator's blog
2013-02-16 【iPhone】UIデザイン向上をサポートをするOSS 5つ iOSオープンソースライブラリ徹底活用作者: 菊田剛出版社/メーカー: 秀和システム発売日: 2012/12メディア: 単行本 クリック: 6回この商品を含むブログ (1件) を見る書き終えて、なんとなくタイトルに少し違和感が。。。日々色々なアプリがリリースされていますが、様々なアプリUIを提供してくれます。 中には、ClearやPathのような奇抜(というと言い過ぎ？)なUIなものもあれば、標準UIコンポーネントから構築されたアプリまで、様々です。ただ、ある著名なアプリや、これは便利！というようなUIというのは自然と広まり スタンダードになっていく傾向もあります。例えば、下にぐいっとひっぱって更新。 元々どのアプリで実装されたものかわかりませんが、TwitterやFacebookなどでも実装され
こだわりのページ内リンクスムーズスクロール scrollsmoothly.js
「ページ内リンク スムーズスクロール」でググればいくらでも出てくるシロモノだけど、自分の要望をすべて満たすものが無かったので作ってみた。 こだわりのページ内リンクスムーズスクロール scrollsmoothly.js 動作サンプル 以下のソースコードをサンプルページのようにhead内で読み込むだけでOK。 ソースコード(Javascript) scrollsmoothly.js 読み込み例 <script type="text/javascript" src="scrollsmoothly.js"></script> 特徴 縦横斜めにスクロール可能 スクロール中にもリンクをクリック可能 別のページからのリンクでも指定の場所までスムーズスクロールします MIT License 動作確認ブラウザ IE6, IE7 Firefox 2,3 Opera 9.27 Safari 3.1 関連エントリ
flipsnap.jsというのを書いた - Webtech Walker
最近タッチデバイスでスワイプしてスライドするようなUIを書く機会が多いので汎用的に使えるようにしてみた。 DEMO pxgrid/js-flipsnap - GitHub iScrollでもsnapっていう機能使うと同じようなことができるんだけど、iScrollでこれをやろうとするとこのスクロールが効いてるところはネイティブの縦スクロールが効かなくなるという問題があって、それを解決しようと思って最初はiScrollの内部をいじってたんだけど、ちょっとiScrollベースだとどうしても無理なところがあったのでこの機能だけ切り出してみたというわけ。 一応Androidでも動いてるっぽい。 iScrollみたいに多機能じゃないけどまあこれだけ使いたいっていうこと結構あるので割といいんじゃないかと。TODOはとりあえずドキュメント。 追記（2012/02/04）：クロスブラウザに対応しました。
HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
JavaScriptで作られた、見たことないUIデザインのWebサイト
株式会社サイゾー（Cyzo inc.） / Raffael Stüken / La Moulade - Creative St...他...全11件
公式のはてなブックマークの数値表示がカッチョわるいので、テキスト表示させるJavaScriptを書いてみた。 – 和洋風KAI
嗚呼・・・。公式のはてなブックマークの件数表示。 これ非常に便利なのですがMSゴシック体で表示されるため、Mac環境だとフォントが上の画像のように合わずしっくりこないのが玉にキズ・・・。アンダーラインもあわねぇ。サイズもあわねぇ。車もそんなに走ってねェ・・・。 というわけで、見た目をしっくりさせるためにテキストではてブ数を表示させるJavaScriptを@akio0911さんにアドバイスをもらいつつ書いてみました。 追記：書きなおしてみました! 「先日書いた"はてブ数"をテキスト表示するJavaScriptがカッチョ悪かったのでシンプルに書きなおしてみた。 | 和洋風◎」 参考にしたのは @amachang さんの記事。 HTML だけで、件数を埋め込む例を書いてみたよ！やり方は簡単callback パラメータに document.write を指定するだけ！ 引用元：新はてなブックマーク
あなたのソースコードを彩る、Syntax Highlighterまとめ | Blog.37to.net
home blog labs about contact Web・コンピュータ > あなたのソースコードを彩る、Syntax Highlighterまとめ Syntax Highlighter ソース ブログ 作成： 2007-06-30T19:14:27+09:00 更新： 2009-04-29T00:31:57+09:00 ブログに貼り付けたソースコードを分かりやすく見せたい！ というのはコードを書くブロガーなら誰でも思うはず。 最近はコードを書いてもそのまま貼り付けるだけになってしまっていましたが、やはりソースコードは色づけされて分かりやすい方がいい。 何故かまとまった情報が無いようなので、まとめてみました。 ちなみに、ライブラリを選ぶ最中にまとめたので、どのツールも未使用なのであしからず。 JavaScript系 JavaScriptを使って自動で色分けしてくれるようなツール。 元
Tumblrみたいに、「j」「k」で移動できる「jQuery.keyMove.js」
この記事は11年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。TumblrやGmail、Googleリーダーなどで実装されている、「j」や「k」で次の記事／前の記事に移動できるインターフェースが便利だなーと思って、作ってみました。 デモはこちらから。 ダウンロードはこちらから。 MITライセンスですので、どうぞご自由にいじってください。商用も可です。 ※全角モードになっていると動きません。 使い方は簡単なので、デモのソースを見れば分かるとは思います。 移動したい要素に同じクラス名をつけておいて、そのクラスにkeyMoveファンクションを実行するだけ。 <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jqu
ギャラリーなど斬新なjQueryプラグイン15
43 Best jQuery Carousel Sliders, Plugins, Tutorials and Examples Nowadays mostly designers & developers use sliders or carousels in their blog or website and jquery make this very easy to be used. jQuery has overpowered Flash in a lot of web uses becoming a very powerful tool for web designers. In web design a carousel is an element giving visitors easy access to several content items. It is typic
Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン :: 5509
Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン Ajaxやタブクリックなどのイベントでもブラウザの「戻る」「進む」を有効にすることができるjQueryのhashchange eventというプラグインを紹介します。同じような効果を得られるスクリプトより断然使いやすいのでおすすめです。 使い方はとても簡単で windowにhashchangeイベントをbindするだけです。 $(window) .hashchange(function() { Hoge(location.hash.replace('#', '')); }); // ハッシュフラグメントが変わったときにHoge()を実行する $(window).hashchange(); // Windowロード時に実行できる Ben Alman » jQuery hashc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vex – Beautiful, functional, modal dialogs in Javascript
http://www.universalsubtitles.org/ja/