「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません - Qiita
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありませんHTMLアクセシビリティWAI-ARIA 最近、「アクセシビリティを向上させたいなら、HTMLの disabled 属性ではなく、aria-disabled 属性を使うべき」という主張を見かけますが、本当にそうなのでしょうか？ disabled属性を使っていても、スクリーンリーダーで要素を知覚できる そのような主張をしている人、それを受け止めた人の中には「 disabled 属性を使った要素はスクリーンリーダで読めなくなる」と誤解している人が少なからず存在するように思われます。しかしこれは正しい理解ではありません。 たしかに、disabled属性を付加している button 要素や input 要素、 select 要素、 textarea 要素は、Tabキーによるフォーカスはでき
フォントサイズを表すremって何者!? - Qiita
概要 CSSでのフォントサイズ指定に使用できる単位にはいろいろなものがあります。 その中でも、先日初めてremを使用する機会があったので、学びの整理として記事にまとめたいと思います。 remとは ルート要素のフォントサイズを1とした時の相対的なサイズ指定を表します。 ルート要素についての記述は以下のとおりです。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/html <html> は HTML 要素で、 HTML 文書においてルート (基点) となる要素 (最上位要素) であり、ルート要素とも呼ばれます。他のすべての要素は、この要素の子孫として配置しなければなりません。 つまり、<html>に指定されているフォントサイズを1とした時の相対的な文字サイズを表すのがremです。 例 以下のように、<html>に10pxを指定したと
第五回: HTMLとCSS - Qiita
こんにちは、株式会社カスタマトリックスの寺尾です。 こちらは 新卒社員と学ぶWEBプログラミング 企画になります。 可能な限り毎日更新していくのでご期待ください。 本日は第五回、「HTMLとCSS」を説明していきます。 まずはWEBサイトの見た目を司る二つのプログラミング言語から勉強していきます。 前回はこちら https://qiita.com/r-terao/items/d02ea64015f26b115300 第一回はこちら https://qiita.com/r-terao/items/e6237c4dc59db9e96ec6 HTML WEBプログラミングの勉強をしていると必ず聞くHTML、何が凄くてこんなに長く使われているのかご存知でしょうか？ HTMLは「ハイパーテキストマークアップランゲージ(HyperText Markup Language)」という意味です。 これは「ハ
見た目そのまま編集可能なオープンソースのHTMLメールデザインツール「SENDUNE」を使ってみた
SENDUNEは簡単にHTMLメールをデザインできるオープンソースのツールとのことなので、実際に使い勝手を確かめてみました。 Open source, drag and drop HTML email designer. | SENDUNE https://designer.sendune.com/ サイトにアクセスするとこんな感じ。あらかじめプリセットが用意されています。 「Your Logo」と書かれた部分をクリックすると左側でロゴの設定を編集できるようになりました。「Upload Image」をクリック。 標準でいくつかの画像が用意されていますが、今回は「Click To Upload JPEG or PNG or GIF」をクリックし、手持ちのGIGAZINEロゴ画像を選択して「開く」をクリックしました。 アップロードされた画像を確認し、「Select」をクリック。 ロゴの下の枠に
HTMLのフォーム送信がEnterキーなのか送信ボタンなのか判別する方法 - Qiita
HTMLのフォームは、送信ボタン（<button type="submit">）をクリックするだけでなく、暗黙の送信手段による送信もサポートされています。大抵のウェブブラウザでは、フォームの入力欄（inputやtextarea）でEnterキーを押すことで、送信ボタンを押さなくても送信できる挙動をサポートしており、これが暗黙の送信に該当します。 この記事では、理由はともかく、フォームの送信（submitイベント）がEnterキーによって起きた（暗黙の送信）のか送信ボタンを押したことで起きたのかを判定したい人に向けてその方法を伝授します。 TL;DR 暗黙の送信用の見えない送信ボタンと、ユーザーが押す用の見える送信ボタンを用意しましょう。 解説 Enterキーのような方法による暗黙の送信は、実際には「そのフォームのdefault buttonに対してclickイベントを発生させる」という機構
JavaScript、HTML、CSSを使って画面切り替えをつくろう！ - Qiita
はじめに 下記画像のように、「Aボタン」をクリックすると「A画面」が、 「Bボタン」をクリックすると「B画面」が表示されるような 画面切り替えをJavaScript、HTML、CSS を使って作成していきます。 JavaScript、HTML、CSS ファイルの作成 ますはJavaScript、HTML、CSS のファイルを同じ階層に作成します。 HTML の作成 ヘッダーの作成 次に index.html のヘッダーを作成していきます。ヘッダーの内容については今回詳しくお伝えしませんが、先程作成したCSSファイルとJavaScriptファイルに連携できるようにしています。 <link rel="stylesheet" href="./style.css" /> で style.css に連携。 <script src="./script.js" defer></script> で scr
HTML,CSS超初心者向け クラス名の付け方 - Qiita
CSS設計を学びたい！ どうもエンジニアになって数ヶ月のひよっこすらなっていない卵エンジニアです！🐣 この記事を見ているのはmarginなどのプロパティやレスポンシブ、flexを学んだばかりという方が意外と悩みがちなクラス名をどうつけるかについて記事にしました！参考にしたのは『技術評論社 CSS設計完全ガイド 半田淳志 第5版』です。有名な本なだけあってわかりやすく、分厚い本でしたがスラスラ読めました。 まず、クラス名をつける前に、みなさんはWebサイトを制作するときにどんなことを意識していますか？クラス名をつける前に、制作するWebサイトをどれだけ細分化と抽象化して見ることが出来ているかが大切です。では細分化と抽象化とは何か？それはWebサイトを見たときに、ブロックやパーツごとに分けることを細分化、デザインが共通してるパーツやブロックを見つけることを抽象化と言います。 細分化 細分化を
【HTML】ボタン要素にdisabled属性をつけるのをやめませんか？ - Qiita
はじめに みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか？ この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。 そのため、キーボード（Tabキー等）で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時 ボタンの存在が認知できないため、支援技術（スクリーンリーダ等）で操作しているユーザーにとって、「送信ボタンどこだろう？」と思ってしまったり、「なんで送信ボタンが出てこないんだろう？」と思ってしまい、操作を完了させることができなくなります。 aria-disabl
【小ネタ】HTMLのみでサイト内検索を実現する - Qiita
.search-form { display: flex; align-items: center; gap: 0 10px; width: 400px; } .search-form input { width: 100%; height: 34px; padding: 1px 5px 1px 8px; border: 1px solid #999999; box-sizing: border-box; color: #000; outline: none; } .search-form button { display: flex; justify-content: center; align-items: center; width: 30%; max-width: 140px; height: 34px; border: none; background-color: #4070f
AWSの公式ドキュメントが修正されるに至った経緯 - Qiita
ことのはじまり @kohki_takatama さんの記事 XMLのイメージを掴む が投稿される HTML / XML のリリースされた年 が 1998 / 1993 となっておりおかしいことに気が付いてコメントする HTML XML 逆では？ June 1993 https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt 1993年にはIETFからHTML仕様書バージョン1.0が公開され、SGMLからの拡張として文法定義のDTDを持つようになった。 https://ja.wikipedia.org/wiki/HyperText_Markup_Language XML の仕様は、World Wide Web Consortium (W3C) により策定・勧告されている。1998年2月に XML 1.0 が勧告された。 https://ja.w
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 KeyboardEvent - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent Why the GOV.UK Design System team changed the input type for numbers – Technology in government https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-desig
紙っぽいかわいいWebサイト作りたい - Qiita
かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます） 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする （疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
HTMLで画面実装したときに閲覧したページ - Qiita
+* HTML *+ 要素と属性 https://so-zou.jp/web-app/tech/html/specification/element-attribute.htm idとclassとの違い https://www.sejuku.net/blog/85629 +* CSS *+ IDを指定 https://www.tagindex.com/stylesheet/basic/format3.html CSSの無効化 https://magazine.techacademy.jp/magazine/38815 +* JavaScript *+ タグを追加 https://www.javadrive.jp/javascript/before/index2.html タグに属性を追加 https://kasumiblog.org/javascript-setattribute/ +*
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSレイアウト再入門:完全に理解してCSSを記述するために
半角スペースを表示したいなら ではなくwhite-space: pre;を使いましょうという話 - Qiita
