キーボード操作を意識したHTML/CSSコーディング
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
Barrier - 一組のキーボードとマウスで複数台のPCを操作
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 机の上に複数台のPCを置いている人は珍しくありません。しかし、複数台あるとキーボードとマウスもその台数分必要になります。取り違えれば、別なマシンを動かしてしまったりします。これはとても面倒です。 そこで使ってみたいのがBarrierです。複数台のPCを一つのキーボードとマウスで操作できるようになります。 Barrierの使い方 一台がサーバ、他はクライアントとして接続します。 クライアントが立ち上がると自動的に接続が開始されます。 macOSの場合、セキュリティ設定も必要です。 Barrierはこの手のソフトウェアとして有名なSynergyのコア部分を使って作られています。Synergyは有償ソフトウェアになったので、オープンソースで使い続けたい方はBarrierがいい選択肢になる
神速！Googleカレンダーのショートカット操作術！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
表示切り替え 表示期間をキーボードのキーひとつで切り替えがサクサクできます。 今日 t Todayのtを押すと今日の日付、かつ今の時間帯に移動フォーカスしてくれます。 先の予定を見たあと、一気に戻る際に便利です。 1日 d or 1 Dayのdを押すと1日の表示に切り替わります。 1週間 w or 2 Weekのwを押すと1週間の表示に切り替わります。 私は基本的にこの1週間のビューでカレンダーを見ています。 1ヶ月 m or 3 Monthのmを押すと1ヶ月の表示に切り替わります。 次の期間 j 待っていました！ ご存知Vimのキーバインドでもあるjです。 ちなみにNextのnでも同じ挙動になります。 前の期間 k 続けて、同じくVimのキーバインドでもあるkです。 ちなみにPastのpでも同じ挙動になります。 フォーカス系 このショートカットを使用すると入力欄にフォーカスされ、クリック
Slow Quit Apps - 間違った終了操作からアプリを守る
macOSを操作していてあるあるなのが、間違ってコマンド + Qを推してしまってアプリが終了してしまうと言うことです。保存していないコンテンツが全部消えてしまったり、ブラウジング中だったタブもすべてリセットされてしまったりします。 そこで使ってみたいのがSlow Quit Appsです。アプリの終了をほんの少しだけ遅らせてくれます。 Slow Quit Appsの使い方 実際に使っているところです。コマンド + Qを押し続けるとインジケータが上がっていきます。 Slow Quit Appsでは一回コマンド + Qを教えてもアプリケーションは終了しません。押し続けてインジケータがいっぱいになると終了します。途中で離すと元に戻ります。これで誤ったアプリケーション終了を回避できるでしょう。 Slow Quit AppsはmacOS用のオープンソース・ソフトウェア（GPL）です。 dteoh/Sl
Adobe Readerの操作をスピーディに――覚えておきたいショートカット5選
キーボードを使ってAdobe Readerをより素早く操作するための、選りすぐりのショートカットを5つ紹介する。 保管コストの削減や劣化の防止、検索性の向上、再利用の促進――。こうしたさまざまな利点が認められ、徐々に広がりつつある紙の文書や帳票のデジタルデータ化ですが、用途や目的を考えずむやみにスキャンすると、かえって効率が悪くなったり、作業に手戻りを発生させてしまうこともあります。 また商法や税法で保管が義務付けられている文書の場合、電子帳簿保存法やe-文書法などのルールに則った手順を踏む必要があり、自分の判断でやみくもにデータ化するわけにいかないといった事情もあります。 本連載ではこうした現在の状況を踏まえつつ、文書のデータ化にまつわる情報、さらにはフォーマットであるPDFや変換機器であるスキャナ、保存先となるストレージに至るまで、業務現場と情報システム部門に役立つ知識やTips、活用
意図しないドラッグ＆ドロップによる誤操作を未然に防いでくれる便利ソフトウェア「AlterDnD」を使ってみました
マウスやノートパソコンのタッチパッドを使用する際に発生すると困ったりイライラしたりする問題の1つが、誤操作によるドラッグ＆ドロップです。誤操作でドラッグ＆ドロップしてしまうと、隣のファイル内や、最悪の場合ゴミ箱に無意識のうちに移動してしまい、「あれ？さっきまでデスクトップにあったはずのファイルが見当たらない」となることがあり、大変やっかいです。「AlterDnD」はマウスの左ボタンによるドラッグ＆ドロップ操作を変更し、やっかいな誤作動を未然に防いでくれるとのことなので実際に使用してみました。 AlterDnD (ドラッグ＆ドロップ改変ツール) プロジェクト日本語トップページ - SourceForge.JP http://sourceforge.jp/projects/alterdnd/ 上記URLを開いたら「ダウンロード」をクリックして、ダウンロードページを表示します。 ダウンロードペー
アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス
2020年11月14日 jQuery, アクセシビリティ 多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！ こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに
Webサイトにチュートリアル機能をプラスするjQueryプラグイン「Bootstro.js」
TOP > javascript , WebDesign > Webサイトにチュートリアル機能をプラスするjQueryプラグイン「Bootstro.js」 新しいゲームを始めたり初めてのWebサービスを利用する時、どんな操作をすれば良いのか最初にチュートリアルがあると、とても分かりやすいですよね。今回はWebサイトにそんなチュートリアル機能を付与するプラグイン「Bootstro.js」を紹介したいと思います。 実際にデモを動かしてみるとわかりますが、対象箇所のハイライト + 画面スクロールで、とてもわかりやすく説明を受けることができます。 ボタンやキーボードによる操作も可能で、次々と説明を流すことも可能。例えばWebサービスで使い方を説明したり、ゲームコンテンツのサイトにも使えるのではないでしょうか。 jQueryプラグインなので使い方もとても簡単。特定のクラスをチュートリアルした
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
[JS]着眼点が面白い！スクロールできない状態でキーボードやクリックでスクロールさせるスクリプト -Scrollocue
2番目のパラグラフに移動して、ハイライト表示 Scrollocueの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="js/jquery-2.0.3.js"></script> <script src="js/scrollocue.js"></script> Step 2: HTML スクロールのキューとなるパラグラフを配置し、適用する範囲を指定できるようラッパーで包みます。 適用範囲のラッパー：#container <div id="container"> <h1>Scrollocue</h1> <div class="section meta"> <p>A simple autocue/teleprompter system.</p> <p>Just use the arrows or spacebar t
iPhoneで同じ文字を連続して入力する方法
iPhoneで同じ文字を連続して入力する方法を紹介します。 本エントリーはビギナー向けの内容です。 １．問題点 日本語かな入力の状態で、「い」を入力するには「あ」のキーを2回タップします。 「あ」のキーを2回タップして「い」を入力 しかし「いいい」という風に入力たい場合、「い」を入力したあと、少し待って「い」が確定しないと次の文字が入力できません。 そのまますぐにタップすると「いい」ではなく「う」になってしまいます。 「い」を入力したあとにすぐに「あ」のキーをタップすると「う」になる 「いい」と入力するには「あ」の部分の背景色が元に戻るまで1秒ほど待たないといけません。 「あ」の部分の背景色が元に戻った状態 なお、フリック入力であれば「いいい」という文字は連続して入力できますが、例えば「あああ」という文字はタップでしか選択できないため、タップ入力同様、少し待たないと次の文字を入力できません
[JS]シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のスクリプト -Unslider
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
[JS]設置も簡単、機能も豊富、キーボード操作でパネルをスライドする -FerroSlider
複数のパネルを縦・横のライン状、L字状、十字状などに配置し、スムーズなアニメーションでスライド表示するjQueryのプラグインを紹介します。 FerroSlider jQuery Plugin [ad#ad-2] FerroSliderの主な特徴 各パネルをラインやカラム、マトリックス状に配置が可能。 パネルのスライドはスムーズなアニメーション。 アニメーションのエフェクトはカスタマイズ可能。 アニメーション中は進行方向を表示。 各パネルはアスペクト比を維持してブラウザいっぱいに表示。 カスタマイズしたスクリプトをAJAXで実装可能。 コンテナの中にスライドするコンテンツの要約を設置。 キーボードの矢印キーで操作が可能。 クリックでも操作可能なナビゲーションも設置可能。 コンテンツをスルーできるリンクの設置も可能。 FerroSliderのデモ デモではデフォルトの状態をはじめ、さまざまな
キーボードで画面操作するスライド系jQueryプラグイン・Ascensor
なかなかユニークなプラグインだった ので備忘録。ちょっとしたイベントサイト 等に使えそうです。キーボードで画面 を縦横にスライドさせることが可能な jQueryプラグイン・Ascensor。スライド にもいいかもですね。 たまに同じようなコンテンツを見かけはしますけど、複数覚えておいても損はしないですしね。 キーボードの矢印キーでイベントを発生させる的な。縦横に全画面がスライドしてくれますよ。 上記のようにパンくず的にマップも付けられます。 IE6 / IE7 IE6/IE7でも動作はしますが、スクロールだけでてしまうので必要ならcssハックあたりを試してみてください。js自体は動作します。 以下でデモを触れます。デモファイルをセットでダウンロードしたい場合は左に進んで下さい:) Ascensor
[AS3] キーボードのキー操作をVectorオブジェクトで扱う
投稿者：野中 文雄 | 投稿日：2011.02.14 | [AS 3][ActionScript][Tips][野中ゼミ] 「キーボードのキー操作を扱うふたつの手法」では、タイムラインに配置したMovieClipインスタンス(my_mc)を、キーボードの矢印キーで上下左右に動かしてみました(再掲図001)。この同じお題をVectorクラスで整えてみましょう。 図001■ タイムラインに配置したMovieClipインスタンスを矢印キーで上下左右に動かす(再掲) 01 キーコードをインデックスとしてVectorインスタンスに操作の情報を与える 矢印キーのキーコードは37〜40です(gihyo.jp「ActionScript 3.0で始めるオブジェクト指向スクリプティング」第13回「キーボードによる操作」p.2の表2「Keyboardクラスの矢印キーの定数」参照)。しかし、Vectorインスタン
![[AS3] キーボードのキー操作をVectorオブジェクトで扱う](https://cdn-ak-scissors.b.st-hatena.com/image/square/a092edc21fa668dd8fd9d4117d5f1ea7812f16d6/height=288;version=1;width=512/http%3A%2F%2Ff-site.org%2Fogp_2013.jpg)
[AS3] キーボードのキー操作を扱うふたつの手法
投稿者：野中 文雄 | 投稿日：2010.12.22 | [AS 3][ActionScript][Tips][野中ゼミ] キーの押し下げ操作は、InteractiveObject.keyDownイベント(定数KeyboardEvent.KEY_DOWN)で扱います。リスナー関数が引数に受取るイベントオブジェクト(KeyboardEvent.keyCodeプロパティ)から押したキーのコードがわかりますので、その整数値に応じて処理を振分けます。 定石といえるのは、キーコードの整数値を条件判断で切り分けることです。もっとも、キーコードはすべて値がユニークですので、配列との相性がよいです。処理したいキーコードのインデックスに、必要な情報を納めると、条件判定が要らなくなります。 01 キーコードを条件判定で振分ける このたびのお題として、タイムラインに配置したMovieClipインスタンス(my_
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カメラマンや写真好きの人のためのPhotoshopとLightroomの操作をまとめたチートシート
IDEA * IDEA