Webサイトをもっと万人に対してアクセスしやすくするために·HTML_CodeSniffer MOONGIFT
HTML_CodeSnifferはウェブアクセシビリティ改善のためのブックマークレットです。 Webは限られた人たちのものではなく万人向けのものであるべきです。そこで考えられるべき項目として障害のある人に対するアクセシビリティです。そのチェックに使えるブックマークレットがHTML_CodeSnifferです。 実行すると右上にフローティングウィンドウが出ます。エラー、警告、通知の3つに分けてポイントが出ます。もちろんポイントが少ない方が良いです。 各項目の説明を見られます。これらはW3Cのウェブコンテンツ・アクセシビリティ・ガイドラインに則っています。 指摘されている箇所を確認できるマーカーも出ます。 MOONGIFTの場合…がっくりするくらいのエラー数です…。 アクセシビリティと漠然と言われてもなかなか具体的な施策が思いつきませんが、エラーや警告という形で表してくれれば対応もとりやすくな
HTML5/CSS3を使った多機能デザインフレームワーク·HTML KickStart MOONGIFT
HTML KickStartはBootstrapライクなデザインテンプレートフレームワークです。 最近ではWebサイトのベースにBootstrapを利用することが多いのですが、今回はその類似ソフトウェアとしてHTML KickStartを紹介します。こちらもかなり高機能です。 Typography。 リストとメニュー。 メニューは階層対応。 テーブル。 ツールチップ。上下左右自在です。 アイコン。 プログラミングコード。 ボタン。 タブ。 パン屑。 グリッド。 画像。 スライドショー。 動画、地図、カレンダー。 フォーム。 入力フィールドのサイズ。 その他色々。 極力シンプルなHTML構造設計、jQuery利用、HTML5、モーダルウィンドウなどが特徴に挙がっています。唯一残念なのは現状はレスポンシブWebデザインでないことかも知れません。しかし全てのデバイスへの対応を考えないならむしろ手
レガシーなWebブラウザでもsessionStorageを·sessionStorage MOONGIFT
sessionStorageはHTML5非対応のWebブラウザでもsessionStorageを使えるようにするライブラリです。 HTML5の機能の一つ、Web Storage。その一つであるsessionStorageをレガシーなWebブラウザでも使えるようにするソフトウェアがsessionStorage（名称が紛らわしいですが…）です。 最初の画面です。この時点でセッションが開始しています。 26秒経過しています。 別なタブです。こちらでは8秒。タブごとにセッション情報が管理されています。 IE8でも動きます。もちろんタブごとに情報が違います。 使い方は簡単で、sessionStorageオブジェクトに対してsetItem(key, value)でデータの保存、getItem(key)でデータの取得になります。テキストのみ保存できるようですが、データをシリアライズすればサーバとの連携も
HTMLコードを解析して問題箇所と理由を知らせてくれるブックマークレット・HTML_CodeSniffer - かちびと.net
HTMLの構文チェックをその場で できるブックマークレットです。 問題箇所の数や、問題箇所もお しえてくれます。割と便利そう だったのでご紹介してみます。 HTMLのlintです。ブックマークレットを起動させてその場で解析、問題箇所も教えてくれます。 OSSとしてGithubでも公開されてますので日本語に直しての利用も出来ますね。 ↑ 起動させるとすぐに解析してくれます。 ↑ 表示されたボックス下部のView Reportに進むと個別箇所が一覧で表示され、それぞれの問題箇所を上図のようにアイコンで教えてくれます。 errorとwarningの表示/非表示のスイッチも出来ます。なかなか便利ですね。 HTML_CodeSniffer
HTML5でつくられた、ページ遷移・画面遷移のアイディアがすごい
HTMLファイ部のほんだです。シュッ 「ページ遷移」、聞くだけでゾクゾクしませんか？ 僕は大好きです。 Web Creator's Contest Q（HTML、CSS、JavaScript エンジニアのためのコンテストサイト）では、 ページ遷移・画面遷移をテーマにしたコンテストを開催中です。 とても好評で、5回目となった当コンテスト。 今回のテーマも、力の入ったコードがたくさん投稿されています！ 魅力的な画面遷移エフェクトのコード集！ Cubic Transition ※「▶Play」ボタンをクリック！
ドラッグ＆ドロップでファイルをアップできるHTML5のデモ:phpspot開発日誌
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery | InsertHTML ドラッグ＆ドロップでファイルをアップできるHTML5のデモ。 デスクトップなどからファイルをブラウザにドロップしてサムネイルを表示→ボタンを押下でアップロード実施というインタフェースのアップローダ実装デモです。 ソースをDLしてそのまま使うことも可能です。 ドロップするとサムネイルと共にボタンが表示されます。 ボタンを押すとファイルがアップロードされます。 使い慣れるといちいちダイアログからファイルを選ぶのが馬鹿らしくなりますね。 サンプルにはPHPスクリプトもおまけでついてきますが、値をValidateしていなかったりするため、実際に利用するには注意が必要そうです。 関連エントリ これは必見のWEBデザインの近未来。HTML5で構築
HTML5の新要素を IE8以下を対応させる方法
HTML5が少しづつですが普及してきて日本の一般企業でも HTML5が利用されるようになってきました。ただ、その際に気になるのは IE です。IE6 はブラウザ対象から外れてきていますが、IE7, IE8 は対象から外すことはできません。しかしながら、IE7、IE8 は HTML5の新要素（nav, article, header, footer, section, hgroup）を認識することができません。そのため CSS が思った通りに表示されなかったりします。 どうしたら良いでしょうか？HTML5+CSS基礎講座で紹介している内容ですが抜粋してご紹介いたします。 これを解消するには JavaScript を利用します。イギリスのHTML5関連ブログ HTML5Doctor の筆者の一人でもある Remy SharpはIEにHTML5を対応する JavaScript を用意してくれてい
HTML5のmenu要素にも対応した、独自の右クリックメニューを実装するjQueryプラグイン・jQuery contextMenu - かちびと.net
HTML5のmenu要素もサポートしている オリジナルのコンテキストメニュー を実装するjQueryプラグインです。 普通のサイトじゃ使わないでしょう けど、最近ではHTML5製のリッチコン テンツ等利用するシーンもあるかも なのでメモがてら。 基本的に通常のWebサイトでコンテキストメニューを変えてしまうのはユーザビリティを大きく損ないますが、HTML5によるペイントツールやゲームなど幅広いコンテンツの実装が可能になってきましたのでこういったライブラリも用途が出来始めた気がします。 右クリックメニューを独自のものに変えます。それだけならちょっとアレなんですが、このプラグインは左クリックメニューにも出来るので一応覚えておいてもいいんじゃないかなと。他にもmenu要素にも対応してたり、アイコンを付けたりなどいろいろ応用が利くみたい。 右クリックでフォームが出る・・なんてのも作れる。実際あった
作ろう！HTML5用Webアプリケーションフレームワーク·Brunch MOONGIFT
BrunchはHTML5によるWebアプリケーション開発を支援するnode.jsフレームワークです。 HTML5をビジネス向けに率先して使っていくのは難しいと思いますが、それでも試してみたいと考えている人は多いはずです。そこでBrunchを活用してみると良いでしょう。HTML5ベースのWebアプリケーションを開発するための仕組みをまとめて提供してくれます。 Twitterのデモアプリです。 Todoアプリのデモです。 コードの記述に際してはJavaScript/CoffeeScript/IcedCoffeeScript/Royが使えます。CSSはSassやLESSを使うこともできます。ベースを作ってくれるコマンドがあるので、それを使いつつ後は既存のデモアプリを参考に作っていくとWebアプリケーションを素早く作ることができます。 Brunchはnode.js/JavaScript製、MIT
HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
IE8以前に救済。HTML5のタグを利用可能に·html5shiv MOONGIFT
html5shivはIEをはじめとするHTML5非対応WebブラウザでHTML5のタグとスタイルを使えるようにするソフトウェアです。 HTML5のWebサイトを作りたいと思いつつ、IE向けのデザイン適用について心配する声は多数あります。そこで使ってみたいのがhtml5shivです。HTML5非対応のIEでもHTML5の要素を使ったデザインをサポートします。 例えばこんなデザイン。HTML5を使っていますがちゃんとスタイルシートが当たっています。 ソースコード。sectionタグなどを使っています。 まだ開発中ということもあって全てのテストが通る訳ではなさそうです。 別なソース。markタグを使ったり、jQueryも使えています。 こんな感じのグラフも描けています。 グラフのソース。おそらくCanvasタグで描かれているはず。 html5shivを使えばHTML5非対応のWebブラウザであっ
SIE0.93betaの公開 - プラグインレスでSVGを表示する「SIE」開発ブログ
SVGのsymbol要素をサポートしてみました 本日、SIE0.93betaを公開しましたが、新しく、SVGのsymbol要素がサポートされています。ベータ版ですので、不安定かもしれませんので、ご注意ください。 ダウンロード http://sourceforge.jp/projects/sie/downloads/54706/sie-093beta.zip/ 更新履歴 version 0.92からの変更点 dur属性がindefiniteの場合に対応 endElementメソッドとbeginElementメソッドのリスト更新バグを修正 dur属性の規定値を、indefiniteから変更 NAIBU.stop関数をgetCurrentTimeメソッドを中心に修正 set要素に関するバグの修正 set要素のendEventが発火しないバグを修正 チケット #27038「symbol要素が未実装
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
Loading...
sakurachiro.com
