アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス
2020年11月14日 jQuery, アクセシビリティ 多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！ こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに
Web制作で使えた！jQueryプラグインまとめ＋起業しました
作成：2014/09/1 更新：2014/11/01 Web制作 > 報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動画 １．動画をブラウザの背景全体に再生させる ２．動画を綺麗に表示させる WP管理画面
「2009年のWeb制作情報のまとめ」のまとめ - かちびと.net
復習用。探すのが面倒なので備忘録的 に2009年のまとめをまとめます。時間 がある時に見て自分の必要なものを 確認しようと思います。同じお思いの 方とシェアしようと思ってエントリー。 Web制作関連のみになっています。 かなり時間がかかりそうなので正月辺りにもチェックします。こういうのは一気にやりたい。 100 Best Photoshop Tutorials From 2009 Photoshopチュートリアルベスト100。膨大な量です。 100 Best Photoshop Tutorials From 2009 The Best Free Fonts of 2009 2009年のベストフリーフォント12個。50 Best Free Fonts From 2009も同サイトで発表されました。 The Best Free Fonts of 2009 The Best jQuery Plu
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
[JS]背景画像をアニメーションさせて、サイトの印象をガラッと変えるスクリプト
背景画像にアニメーションのエフェクトを加え、カラーをゆっくりと変更してサイトの印象をガラッと変えるスクリプトをYOU LOVE.USから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(function() { // *** // Scrolling background // *** // height of background image in pixels var backgroundheight = 4000; // get the current minute/hour of the day var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); // work out how far through
Toggle Tutorial - jQuery CSS Toggle Effect - javascript toggle tutorial - simple Toggle Effect
I know there are a lot of toggle tutorials out there already, but when I was learning the basics of jQuery and the toggle effect, I had a hard time finding resources on how to switch the “open” and “close” graphic state. After reading a few tutorials and mix and matching techniques I was able to achieve this effect, but wanted to share it with those who experienced the same frustration that I had
jScrollPane
jScrollPane is a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style. You can easily control the apperance of the custom scrollbars using simple CSS. jScrollPane is crossbrowser, working on all browsers that support jquery and it also degrades gracefully. If a user's browser doesn't support jQuery or has J
[JS]PDFなどのリンク先の容量を自動表記するスクリプト -addSizes.js
Natalie Downeから、PDF、MP3、DOCファイルなどにリンクした際、自動でファイル容量を表示するスクリプト「addSizes.js」を紹介します。 addSizes.js Snazzy automatic link file-size generation デモ addSizes.jsでファイル容量を表示するのは簡単で、「addSizes.js」と「jquery.js」を外部ファイルとして設置し、PDFファイルへのリンクを「http://」から記述するだけです。 ※リンクの記述は、絶対パスのみ有効です。 対応ファイルは初期設定では、「.pdf」「.doc」「.mp3」「.m4u」となっています。 他の種類のファイルを追加する場合は、addSizes.jsのL.2に追加します。 例：「.jpg」を追加する場合 <textarea name="code" class="js" c
タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」:phpspot開発日誌
タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」 2009年06月16日- jQuery TOOLS - The missing UI library for the Web タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」。 同様のライブラリは他にあるかもしれませんが、アニメーションや見た目の点で非常に洗練されていて覚えておく価値アリなものになってます。 Expose 該当部分だけを目立たせることが出来る ↓↓クリックするとクリックした位置以外がグレー表示になります Tooltip イカしたスタイルがかかったツールチップ Tab 綺麗なタブUI Overlay LightBox風のページ内ウィンドウ実装 Scrollable 少ないスペースでコンテンツをスクロールするウィジェット実
Create an apple style menu and improve it via jQuery - Kriesi.at - Premium WordPress Themes
Create an apple style menu and improve it via jQuerySince I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done. Since the Apple-flavored Leopard-text-in
[JS]jQueryのプラグイン33+1選 -2009年5月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Beautiful jQuery sliders 洗練されたインターフェイスの画像ギャラリー。 BigPicture パネル表示やギ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを中心としたJavaScript
[JS]簡単に設置ができるmp3プレイヤーのスクリプト -jPlayer