この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で

このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の

なんと、お問い合わせフォームやメール送信フォームはパパッと簡単に作れてしまいます。難しいのは、サーバー側での処理ですが、今回はいくつかの記事に分けて細かく詳しく説明していきます(>ω<) この記事では、htmlでメールフォームを作る時に使われるformタグ、inputタグ、selectタグ、textareaタグについて説明します。 実は、facebookのログイン画面やTwitterのアカウント登録画面、アンケートなどで入力するフォームもhtmlのformを使って記述されています。一度覚えてしまえば何かと使えそうですね！ 基本要素「formタグ」と「action属性」「method属性」 htmlでメールフォームを作るには、formタグを使います。 formタグにはaction属性とmethod属性を指定してあげることが必要です。 formタグ 入力フォームや送信フォームを表示させたい時に

AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ &nbsp;を&emsp;に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:

jQuery mobile で、Datepicker って指でタッチしにくいのでは？ といつも思ってたので、inputタグに readonly 属性をつけることを考えなかった。 スマホでは、Datepicker を使う場合、input 領域をタッチしてキーボードが出て不便。 readonly="readonly" を着ければキーボードは出現することなくDatePickerとして使える。 よくよく考えたら、ＰＣ用のＷｅｂページで、jQuery-ui Datepicker を使う時も、これでいいのだ。

This domain may be for sale!

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

HTML5 による実装を進めるにあたり、何らかのポリフィル用のライブラリを導入することが望ましいです。 ここでは Webshim というポリフィル・ライブラリの紹介、簡単な使用方法について説明します。 日々開発が続けられているものなので、利用する際には Webshim 開発プロジェクトのウェブサイトを参照してください。 Webshim はポリフィルライブラリと UI コンポーネントの拡張ライブラリ Webshim はフォーム検証、ジオロケーション、メディア・エレメント、各種 UI ウィジェットなど、HTML5/CSS3 (以後 HTML5) で導入された機能に関するポリフィルを行なうライブラリです。 またポリフィルを実施するという目的からさらに発展して、現在は UI コンポーネント、ウィジェットのカスタマイズ用のライブラリとして多数のオプションを提供するべく拡張が進められています。 Web

これを適用すると、以下のような外観になります。元のスタイルがなくなり、右端の矢印も消えてなくなります。今のところ、ChromeやFirefoxでもappearanceはベンダープレフィックス（-webkit-や-moz-など）が必要です。 （キャプチャは Mac版Chrome） なお、自動的に最新バージョンを使うことになるのであまり気にすることはないと思いますが、Firefox30〜34では「-moz-appearance: none;」が機能しないというバグがあったようです。 詳しくは、GitHub「How to hide <select> dropdown’s arrow in Firefox when using “-moz-appearance: none;”.」で書かれています。この不具合はバージョン35で修正されたということで、35、36で確認したところ問題ありませんでした。