コンポーネントごとに考えるアクセシビリティのカレンダー | Advent Calendar 2023 - Qiita
はじめに みなさん初めまして。🎅🏻 Qiita株式会社で マネージャー・PdM・デザイナーをしている、自分のことをデザイナーであると自認 @degudegu2510 です。 去年に続き、今年のQiita Advent Calenar 2023でも、1人で25記事以上投稿した方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉 Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、今年も25記事完走してやろうとこのカレンダーを作成しました。 「有給を使ってでも、25記事完走するぞ！💪🏻」という気概でいるので、購読・応援していただけると嬉しいです。 ※ 2022 完走賞：【完走賞ゲットだぜ！】CSSでポケモンマスターになってやる Advent Calendar 2022 テーマ このカレンダーは、 UIコンポーネントごとに考えるアクセシビリティ
JavaScriptで背景色から適した文字色が白か黒かを判定する方法
2017/08/09 ユーザーの入力した値によって背景色を変更すると、文字色と重複して見えなくなってしまうケースがあります。背景色によって、文字色は白がいいか黒がいいかを判定するには、W3Cで公開されているアルゴリズムを利用しましょう。 サンプルコード背景色から適した文字色が白か黒かを判定する関数です。引数、返り値、共にhex(例: #ff0000)の値です。 function blackOrWhite ( hexcolor ) { var r = parseInt( hexcolor.substr( 1, 2 ), 16 ) ; var g = parseInt( hexcolor.substr( 3, 2 ), 16 ) ; var b = parseInt( hexcolor.substr( 5, 2 ), 16 ) ; return ( ( ( (r * 299) + (g * 5
Redirecting...
Redirecting... Click here if you are not redirected.
PhotoshopでのWeb制作効率を向上させる「JSX」とは
ご存じの方もいらっしゃると思いますが、Adobe Photoshop は JavaScript で制御することができます。 Photoshop 用の JavaScript ファイルのことを「JSX」と呼びます。拡張子は .jsx です。 Photoshop を使ってWeb制作されている方は多いかと思いますが、Photoshop は本来写真加工用のソフトでありWebデザイン用のソフトではないため、特にレイアウト機能が Fireworks、Illustrator、InDesign などに比べ貧弱です。 しかし、JSX を使用することにより Photoshop のレイアウト機能やWeb制作向けの機能をある程度向上させることができます。 JSX は昔から Photoshop に搭載されていましたが、書き方の参考になるような書籍やサイトが少ないためかそれ程注目されていなかった気がします。 しかし、最
まるで画像のような文字を動的に作るjQueryプラグイン·jQuery sIFR Plugin MOONGIFT
これは素敵なライブラリ。プログラマ（というのは言い訳に過ぎないが）はデザインが苦手だ。そのため、インパクトのあるロゴをデザインしようと思ってもなかなかうまくいかない。 上のフォントがどうなるかは詳細にて！ これはもう諦めた方が良い。だが単なる文字で書かれているだけではインパクトが薄い、使うのはjQuery sIFR Pluginだ。 jQuery sIFR PluginはjQueryプラグインとして動作するオープンソース・ソフトウェアで、文字を素敵なフォントで表示してくれるソフトウェアだ。 jQuery sIFR PluginはFlashを使い、動的に指定した文字を指定したフォントで描いてくれる。CSSで指定するのとは違い、JavaScriptが動作し、Flashが動いている環境であれば誰でも同じ結果を得ることができる。 このように表示させることが可能！ さらに動的に生成されるということも
Google Mapsのマーカーを見やすくしてくれる『Mapeed』 | 100SHIKI
Google Mapsのマーカーは便利であるが、あまりたくさんあるとクリックしにくいし、わけがわからなくなる。 そこで登場したのがMapeedだ。 このサイトで提供されているライブラリを利用すれば（JavaScriptのコードを入れるだけでいいっぽい）、密集しているマーカーを見やすくしてくれる。 一つ一つのマーカーを全部表示するのではなくて、ある程度まとめて色と数字でわかりやすく表示しちゃおう、というアイデアだ。なかなかナイスなのではなかろうか。 ちょっとしたことではあるが、これでぐっとデータの可視性が高まるだろう。データが膨大に存在するネットだからこそ、こうした「データを見やすくする」仕組みは重要ですな。
もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
URLを埋め込みコンテンツに変換するoEmbedの仕様 - Codin’ In The Free World
http://oembed.com/ eEmbedというのは、あるリソースのURL(例えばFlickrの特定の写真のページのURL)を サードパーティ上で、写真自体の埋め込みに変換したいときに、 埋め込みに必要なパラメータを取得するためのプロトコルみたいです。 mixiのデコリンク機能がイメージとして近いかもしれません。 http://alpha.mixi.co.jp/blog/?p=38 宮川さんが既にPerl Moduleにしてますね。 http://search.cpan.org/~miyagawa/Web-oEmbed-0.01/ 仕様を適当に訳したので載せておきます。 Spec oEmbedは、サードパーティのサイトのURLを埋め込み表現するためのフォーマットです。 これによって、ユーザーがそのリソースへのリンクをポストしたときに、 リソースをパースすること無しに、 写真や動画の
jQueryでテーブルをかなり便利にフォーマットしてくれる『Flexigrid』 - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
あるＳＥのつぶやき: Ajaxライブラリまとめ
Ajax/JavaScriptライブラリをまとめておきます。（順不同） | 基本 | 統合 | 表示系 | GUI部品 | イメージ | PGM連携 | ブラウザ | Flash | その他 | | 部品集 | リンク | 編集履歴 | ・基本ライブラリ ・・・Ajax開発のベースになるもの ↑TOP prototype.js 超メジャーなAjaxライブラリ prototype.js の開発者向けメモ prototype.jsリファレンス prototype.jsリファレンス(JavaScriptist) prototype.js逆引きサンプル集 Prototype 1.5.0 Cheat Sheet Prototype 1.5 PDF － API/サンプル/解説 Prototype.js Documentation － まとめサイト Prototype 1.6.0へのアップグレード実例紹
IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナル
Dean Edwards氏は7日(米国時間)、IEの動作をW3C標準仕様へ準拠させるためのライブラリIE7.jsの最新版を公開した。IE7.jsはJavaScriptで開発されたMS Internet ExplorerのHTML/CSS表示を調整するライブラリ。IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表示できるようにもなる。 IE7.jsは基本的にMSIE5/6向けに用意されていたライブラリをIE7に対応させたもの。これまでのモジュール構造は廃止され、IE7.jsやIE8.jsといったように個別のファイルに分離されている。ホスティング先もGoogle Codeへ変更された。IE7.jsはサイズも縮小され、圧縮した状態で11KBほど。またbase2.DOMのセレクタエンジンを使うことでより高速に動
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vivliostyle Inc. 株式会社ビブリオスタイル
ユンサンの／／YungSang's: 透過PNG と IE と IE7 まとめ
lllcolor.com