タグ

2022年12月10日のブックマーク (4件)

  • 国交省ハザードマップ検討会のWebアクセシビリティの認識が詰んでいる - 水底の血

    ツッコミが追いつかないというのは、こういうことを指すの…? ハザードマップのユニバーサルデザインに関する検討会 - 国土交通省水管理・国土保全局 障害等に対応する一人ひとりのニーズに応じた水害リスク情報提供のあり方を検討する有識者会議を開催します! ~ハザードマップのユニバーサルデザインに関する検討会(第1回)の開催~ - 国土交通省 ハザードマップは、主に地図上に水害リスクに関する情報を示すものですが、視覚等に障害を有する場合は紙面等の情報を取得することが困難であること、また、自身のリスクが把握しづらく、避難行動に役立ちにくいという意見もあることから、一人ひとりの環境やニーズに合ったリスク情報提供のあり方を整理するため、「ハザードマップのユニバーサルデザインに関する検討会」を設置し、令和3年12月23日(木)に第1回検討会を開催します。 という趣旨らしいです。これまで検討会は4回開催され

    国交省ハザードマップ検討会のWebアクセシビリティの認識が詰んでいる - 水底の血
  • CSSでスクロールバーの有無によるがたつきをなくす: Days on the Moon

    この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー(スクロールバーが内容の前面に覆いかぶさるようなもの)が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー(スクロールバーが常に表示されるようなもの)が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。 クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときで

    klim0824
    klim0824 2022/12/10
  • CSS Grid・Flexboxの 最近の進化とミライ

    DIST.38 「CSSな夜」で発表した内容です。 https://dist.connpass.com/event/266728/ Twitter https://twitter.com/tonkotsuboy_com

    CSS Grid・Flexboxの 最近の進化とミライ
    klim0824
    klim0824 2022/12/10
  • リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA

    ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTMLCSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用

    リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA
    klim0824
    klim0824 2022/12/10
    button要素にcursor:pointerが付いてない理由は元々リンクの存在を示すものだから。https://developer.mozilla.org/ja/docs/Web/CSS/cursor インタラクティブな要素に付けるとなるとinputやselectは?みたいな話に