HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css | コリス

2021/03/22 602 users コリス table フレームワーク CSS グラフ

棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャート... 続きを読む

HTML 5.2で新しく登場した<dialog>要素で、ダイアログ ボックスを実装する方法と注意点 | コリス

2018/03/16 159 users dialog ダイアログボックス コリス ダイアログ ボックス

ダイアログ ボックスはWebサイトやスマホアプリでよく見かけます。しかし、その実装方法は何通りもあります。その多くはWebを視覚的にナビゲートしないユーザーにとっては実質的にダイアログボックスを使用できず、アクセシブルに実装するのは困難でした。 HTML 5.2で登場した新しい<dialog>要素はこの問題を解消し、実装方法を迷うことなくダイアログ ボックスを利用できるようにするものです。 <di... 続きを読む

Web屋の私が勘違いしていた、世界のネット通信環境の驚くべき状況 - WPJ

2017/11/24 191 users WPJ Calibre 知見 手助け Ｗｅｂ屋

アプリやWebサイトをより良く、より速く、よりアクセシブルにする手助けが私の仕事です。 Calibre でWebを構築したり、メンテしたりする際にぶつかる課題について、知見が集まりました。 この1年で本当に驚いたことは、一般のユーザーがどうインターネットにアクセスしているかです。Web業界に従事しているのに、ほとんど理解していませんでした。自分たちがユーザーにコンテンツを配信する方法がいかに時代遅... 続きを読む

2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス

2017/04/27 171 users コリス CSS 軽量フレームワーク Flexbox グリッド

Flexboxで実装されたグリッドのみをはじめ、さまざまなコンポーネントが利用できるもの、ファイルがモジュール化されたもの、アクセシブルに特化されたものなど、2017年にチェックしておきたいCSSの軽量フレームワークを紹介します。 mini.css -GitHub mini.css テンプレート一覧 モバイルデバイスと最新のブラウザを考慮して設計された軽量（7KB）CSSフレームワーク。ほとんどの... 続きを読む

シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret | コリス

2015/02/10 388 users セマンティック コリス フレームワーク 商用 HTML

シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークで... 続きを読む

コンテンツからみるWebアクセシビリティの課題と提案 : could

2013/12/09 153 users could Webアクセシビリティ 課題 提案 コンテンツ

アクセシビリティコンテンツ コンテンツからみるWebアクセシビリティの課題と提案 Webアクセシビリティは、技術だけで解決できるものではありません。文書をきれいに整理・整頓しただけでは、利用者のニーズに合ったコンテンツを提供しているとはいえません。利用者がアクセスしたいコンテンツを提供するという考え方が不可欠になります。 コンテンツは本当にアクセシブルか Webアクセシビリティは、大きく分けて 2... 続きを読む

[CSS]適切ではないマークアップを注意してくれるスタイルシート -holmes.css | コリス

2011/05/18 168 users コリス CSS ブックマークレット スタイルシート イエロー

ページ内のマークアップで誤っている箇所、無効な箇所、アクセシブルでない箇所をハイライトで明示してくれるスタイルシートを紹介します。 デモページ レッドのハイライト エラー イエローのハイライト 警告 グレーのハイライト 好ましくない holmes.cssの使い方 holmes.cssの使い方は、2通りあります。 スタイルシートファイルをページに適用 ブックマークレットを使用（要JavaScript... 続きを読む

[JS]IE6にも対応、簡単設置のカスタマイズも容易なアコーディオンのスクリプト -Easy Accordion | コリス

2010/09/14 118 users コリス アコーディオン スクリプト jQuery カスタマイズ

テキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。 アクセシブルで初期表示に任意のパネルを選択できるなど、高性能な超軽量スクリプトなので、アコーディオンを導入する方は是非検討してみてはいかがでしょうか？ Easy Accordionの主な特長 IE6を含め、クロスブラウザ対応。 スムースなアニメーションを伴... 続きを読む

[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider | コリス

2010/07/25 232 users コリス Ajax スクリプト コンテンツスライダー スライダー

クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。... 続きを読む

アクセシブルで、美しいフォームを実装するためのチュートリアル集 | コリス

2009/03/11 225 users コリス チュートリアル集 美しいフォーム

アクセシブルで、美しいフォームを実装するためのチュートリアル集をnoupeから紹介します。 Beautiful Forms - Design, Style, & make it work with PHP &a [...] 続きを読む

[JS]jQueryのプラグイン33+1選 -2009年2月 | コリス

2009/02/09 224 users jQuery コリス スライダー アニメーション 気持ち

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Accessible News Slider スムーズなアニメーションが気持ちいい、アクセシブルなスライダー。 Easy Slider 1.5 自動 [...] 続きを読む

Dive Into Accessibility

2006/04/10 113 users 文書 答え 英語版 質問

この文書は2つの質問に答えるために書いてみたんだ。 1コ目は、「なんでサイトをアクセシブルにした方がいいのか」。 だから、ここの情報はサイトを持ってない人には向かないかも。 2コ目は、「じゃどうしたらサイトをアクセシブルにできるのか」。 1コ目の答えが納得できるものじゃなかったら、2コ目はどうでもいいってことになるよね。 じゃ行ってみよう。 Dive Into Accessibility（英語版）... 続きを読む