アクセシビリティTIPS（カラー編） 色のバリアフリー度をチェック - ［ホームページ集客の方法］All About
ホームページ集客の方法 ガイド：小澤 圭 ホームページへの集客に貢献する広告方法についてご紹介していきます！ 提供:オーバーチュア 取材依頼 問合せ コントラスト 色覚バリアフリーでは、「コントラスト」が一番のポイントと言っても過言ではありません。例えば、左の2つの画像ではどちらが見易いか一目瞭然です。 単純な文字画像であっても、その背景色とのコントラストによって、見易さが決まります。 では、右の画像はどうでしょうか？コントラストが非常にはっきりしているわけではありませんが、問題なく認識できるレベルだと思います。ところが、後ほど紹介するチェックツールでこの配色を調べると、白内障、及び色覚障碍全体の25％を占めると言われる第一色覚障碍（赤が暗く感じられる色覚障碍）の人にとっては「見難い」と診断されてしまいます。 逆に、左の画像は少々見づらいと思います。コントラストが弱いですよね。と
asahi.com（朝日新聞社）：色のバリアフリーへ２０色 色見本、デザインに活用 - 社会
よく使われる色づかい（上）と、誰でも見分けやすいように考えられた色（下）。厳密な色再現ではない＝伊藤准教授提供 誰でも見分けやすいように工夫した色見本を、東京大や日本塗料工業会などが作った。色覚障害や白内障の人のほか、一般の人にも色を実際に見てもらい、２千色以上から２０色に絞り込んだ。塗料用に続き、印刷インキ用の色見本も近く完成、デザイン業界などで使ってもらう予定だ。 東大の伊藤啓・准教授（分子神経生物学）は印刷インキメーカーのＤＩＣなどと協力、２年前から色見本づくりを進めてきた。実生活で使いそうな色を、屋外で日にあてたり、古い蛍光灯の下に置いたりして、色覚障害の人や白内障手術を受けた人のべ約４０人に見てもらった。 これまでよく使われた色づかいでは、赤と緑は色覚障害の人にとってまぎらわしく、黄色は白内障の人には明るすぎたという。そこで赤はオレンジ寄りに、緑は青みを強く、黄色は濃くした
IE8バグ？：a要素内に画像があってa要素に背景を指定した時に位置がずれる
キャプチャ見てもらうと分かるようにIE8だけ極端に位置がおかしい。 IE8がリリースされてから、まだあんまりいじってないのでよく分かってないのですが、今組んでいるサイトをIE8でチェックしたら、「あれ？表示がおかしい...」って事に遭遇してしまったので、エントリー。 よくある感じで、リストのマーカー変わりに背景の指定をa要素にして、そのリスト内には画像テキストが入ってたんです。はい。 毎度のようにサンプルも用意してみました。 サンプルを見る 発生条件は調べた感じa要素内にimg要素があって、a要素にbackgroundプロパティの指定をした時に起こる感じです。 img要素にテキストが隣接してても同様でした。 サンプルみたいなデザインの場合、マーカー部分も一緒に切ってしまう事が多いから過去の案件は大丈夫だと思うけど・・・ 取りあえず、今回のサンプルに使ったソースは以下です。 <ul> <li
チェックアウトボタンの111個のサンプルとデザインの傾向
Internet Marketing Companyのエントリーから、チェックアウトボタンの111個のサンプルとそのデザイン傾向を探り、ベストなチェックアウトボタンを作成するポイントを紹介します。 111 Designs for Checkout Buttons エントリーは英語圏内のため、文言など英語仕様となっています。 チェックアウトボタンのデザインの傾向 ボタンの色（背景） ブルー：19% ブラウン：4.5% グレー：10% グリーン：15% オレンジ：11% ピンク：2% パープル：4% レッド：22% ホワイト：5% イエロー：7% ボタンの色（テキスト） ブラック：10% ブルー：8% ホワイト：77% ブラウン、グリーン、オレンジ、ピンク、パープル、レッド、イエロー：1%以下 「checkout」の綴り check out：7% checkout：93% 「checkout/
[JS]スムーズにスライドするパネルを実装するスクリプト
Switch On The Codeのエントリーから、スムーズにスライドするパネルを実装するスクリプトを紹介します。 Inline Sliding Panels タブ「Click Me」をクリックすると、パネルがスムーズにスライドし、それに追随して他のコンテンツも移動します。 追随しない旧版は下記です。 Javascript Sliding Panels Inline Sliding PanelsはjQueryやPrototypeなど他のJavaScriptに依存することなく動作し、動作環境はIE7, Fx3, Op9.5, Safari3.1となっています。 ※IE6, Fx2でも動作しました。
Yola - Make a Free Website
Easy to Use No technical experience required! Make your free website with our easy drag & drop functionality. Everything you need is at your fingertips. Powerful & Flexible Get under the hood. Advanced users can easily edit images online, as well as add HTML, Javascript, and sitewide CSS. Take complete control of your website.
[CSS]Hack無しで実装する、中央に配置するタブ型ナビゲーション | コリス
Matthew James Taylorのエントリーから、リスト要素でマークアップしたタブ型ナビゲーションを中央に配置するスタイルシートの紹介です。 <textarea name="code" class="html" cols="60" rows="5"> <div id="centeredmenu"> <ul> <li><a href="#">Tab one</a></li> <li><a href="#" class="active">Tab two</a></li> <li><a href="#">Tab three</a></li> <li><a href="#">Tab four</a></li> </ul> </div> </textarea>
Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」:phpspot開発日誌
FitFlash - Smart Flash Resize Script FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution. Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」。 通常、Flashムービー(SWF)はブラウザに貼り付けた状態だと固定サイズとなっています。 このムービーサイズをJavaScriptで動的にうまく調節できるライブラリがFitFlashです。 FitFlashは次
HTML 5 における HTML 4 からの変更点
この文書「HTML 5 における HTML 4 からの変更点」は、W3C の HTML ワーキンググループ による「HTML 5 differences from HTML 4 (W3C Working Draft 10 June 2008)」の日本語訳です。 規範的な文書は原文のみとなっています。この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。 原文が勧告 (Recommendation) ではなく、策定途中の草案 (Working Draft) であることにご注意ください。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。また、この日本語訳自身も更新されている可能性があります。日本語訳の最新版は、W3C 仕様書 日本語訳一覧 から参照することができます。 公開日: 2008-06
第35回 FlashムービーとJavaScriptを連携させてみよう：ITpro
最近ではAjaxの流行もあり，JavaScriptのライブラリがかなり充実していますね。これらのライブラリの関数を始めとしたJavaScriptの関数を，Flashムービーから呼ぶことができれば，Flashムービーだけでは実現が難しい処理も意外に簡単にできてしまうこともあります。 ムービーを表示しているHTMLドキュメントのURIを取得する あけましておめでとうございます。本年もよろしくお願いいたします。 さてさて，図1のムービーでは，ムービーを表示しているHTMLファイルのURI（URL）を表示しています。 図1：ムービーを表示しているHTMLファイルのURIを取得するムービー（クリックするとムービーを表示します） Flashムービーでは，ムービー自身のURIは「_urlプロパティ」を使って取得できますが，ムービーを表示しているHTMLファイルのURIまでは取得できません。では，図1のム
FlashからJavaScript関数を呼び出す
ムービー上からブラウザ上のJavaScriptを呼び出すにはgetURL()でURL指定部分にjavascript:を記述しその後に実行する命令を記述します。ただし、このまま命令を記述してしまうとブラウザ上に[object window]などの実行結果後の値が表示されてしまいます。これを防ぐためにjavascript:void()として値を返さないようにしvoid()内に実行するJavaScriptの命令を記述するようにします。 getURL("javascript:void(window.open('sample.html','subWin','width=320,height=240'))") サブウィンドウを320x240サイズで開きsample.htmlを表示する getURL("javascript:void(document.myFORM.myData.value=12345)
「JavaScript＠Keynavi.Net」 レイヤーの表示・非表示切替え：kl_layer_show/hide(id)
//----------------------------------------------------------------------------- //kl_layer_show/hide(id) //返り値：成功時は１失敗時は０ //id：対象となるレイヤー(オブジェクト)かそのID //----------------------------------------------------------------------------- function kl_layer_show(id){ var e=kl_getelem(id); if(!e) return 0; if(KL_NS4) e.visibility='show'; else if(e.style) e.style.visibility='visible'; else return 0; return 1;
POLAR BEAR BLOG: 「クリーンな水平分割」がウェブデザインの最新流行？
海外の WEB2.0 系サイトのデザインを見ていると、どこかしら似ていると感じることが多いと思います。「カドが丸い」「ロゴが反射している」などなど、これまでも様々な点が指摘されてきましたが、最近のトレンドは「クリーンな水平分割」なんだとか： ■ Analysis of Web 2.0 Design & Layout Trends – Part 1: Clean, Colorful and Horizontally Divided (StyleIgnite.com) 「クリーンな水平分割」とは、StyleIgnite による造語。しかしこの表現がピッタリだということは、例に挙げられているサイトを見れば一目瞭然です： ■ shoeboxed.com 上の画像は、現時点でのキャプチャ。画面全体が大胆に水平分割されていて、余白スペースも大きく開けられていますね。まさしく「クリーンな水平分割」。 念
CSS - dtをfloatする場合の注意点 | Try | d-spica
dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。 Tried at 2008-05-12 まず，マークアップは次の通り <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-06</dt> <dd>ページ2を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-04</dt>
Adobe : FLVPlayback コンポーネントのカスタマイズ
Flash Professional 8 での機能アップグレードの 1 つは Flash Video 用の新しい FLVPlayback コンポーネントです。Flash Video コンポーネントの外観を自由にカスタマイズしたいと考えていたユーザーには待望のアップグレードです。FLVPlayback コンポーネントでは、拡張された ActionScript API が提供され、グラフィックのカスタマイズ、スキンの適用のための方法も複数用意されています。 この記事では、FLVPlayback コンポーネントへのスキン適用のための、次の 3 つの方法について順に説明します。 [スキンの選択] ダイアログボックスから作成済みスキンを選択する FLVPlayback カスタム UI コンポーネントを使用して、カスタマイズ可能なコントロールを組み合わせて配置し、それらのサイズを調整する 独自の作成済
小粋空間: IE7 の CSS ハック
「IE7 で閲覧すると表示が異なるのですが」というご質問を頂いたので、CSS ハックを利用して、IE7 のスタイルのみを変更する方法を紹介します。結論だけ述べますと、IE7 に異なるスタイルを適用する（=他のブラウザと表示を合わせる）場合、該当のセレクタの前に *:first-child+html を付与します。例えば、IDセレクタ #banner に適用させる場合、 *:first-child+html #banner { ： [IE7用のスタイルを記述] ： } となります。 なお、それ以外のブラウザのために、元の #banner の設定は、この追加したセレクタより前方に記述します（下記）。この順番を間違えると期待する表示にならないのでご注意ください。 #banner { ： [IE7以外のスタイルを記述] ： } *:first-child+html #banner { ： [IE7
2007-09-22
Adobeの新技術AIRは前からずーーっと気になっていたのですが、今日ちょっとした時間と目的が出来たので、最初の一歩をトライしてみることにした。 Adobe AIR and Adobe Flash Player Technologies | Flash Platform runtimes - Adobe Labs しかし、ブックマークしていたいろんなサイトを見てみると、Flexがどうのこうのとか書かれている。FlashからでもAIRアプリを作れるんじゃないのか？と思って調べたが埒があかないので、英語ドキュメントをちらりと見てみたら、簡単だったので手順だけメモしておく。 インストール#1 まず、下記のサイトからAIR SDKをダウンロードしてインストールします。（もしかしたら後述するFlashのアップデートだけインストールすれば十分かもしれませんが、一応インストールしておいて損は無いかと思う
Adobe Edge: 2007年9月 Flash CS3 でゼロからはじめよう AIRアプリケーション作成講座 Vol.1
今年の3月にアルファ版が提供されて以降、EdgeではAdobe AIRについて様々な情報をお伝えしてきました。AIRをとりまく状況は刻一刻と進化しています。先月には待望の Flash CS3 用のアップデータが提供され、Flash CS3でAIRアプリケーションの開発が行えるようになりました。一方、Flash Player の普及率はなんと99%に達し、その中で ActionScript 3 に対応した Flash Player 9 も 90% を超えています。つまり、Flash CS3 と ActionScript 3 で開発を進めれば、それはほぼすべての Web ブラウザで稼働し、さらに将来のデスクトップアプリケーション展開が約束されているというわけです。このように、開発の敷居は下がり、開発したものは誰もが楽しめるという状況の中、Edge では今月から「AIR アプリ開発記」の詳細版と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker
japan.internet.com Webビジネス - 最強の商品ページの作り方 〜競合ページに勝つ方法!?〜