タグ

アクセシビリティとCSSに関するd4-1977のブックマーク (5)

  • https://codepen.io/tak-dcxi/pen/eYdVGEv

  • 「font-sizeの指定はpxとremどちらを使うべきか?」問題に対する回答

    こんにちは。TAK(@tak_dcxi)です。 今回は SNS で頻繁に話題になる「font-size の指定はpxとremどちらを使うべきか?」問題について。 自分が観測している限りだと、 font-size の指定は px と rem どちらを使うべきか? Web デザイナーはコーディングの知識があったほうがいいか? jQuery はオワコンなのか? 実装者はピクセルパーフェクトに拘らないとダメか? h1 タグはどこに使うべきか? あたりは四半期に一度は話題になっている感覚がありますね。 おそらくこの記事を読んでいる方や、もしくはタイムラインにこの記事の Twitter カードなんかが流れてきてウンザリしている方も多いことでしょう。僕も正直「またこの話題か…」という感想ですが、頻繁に話題になるということはそれだけ意見が割れているということなので、自分なりの見解をまとめるためにもこの記事

    「font-sizeの指定はpxとremどちらを使うべきか?」問題に対する回答
    d4-1977
    d4-1977 2020/12/29
    そうか、フォントサイズの指定でBEMが関係するようにすることがあるか、ナルホド。とはいえ、figmaとかでpxで書かれていたら、そのままコピペになってしまいそうで、これも悩ましい話。
  • キーボード操作を意識したHTML/CSSコーディング

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

    キーボード操作を意識したHTML/CSSコーディング
    d4-1977
    d4-1977 2020/12/12
    button要素の使いこなし考えないとなあ… というのも、reset.cssなども関係してくるから、すぐに出来なくて、どうやるか?は、しっかり考える必要があるから、スキルを見るのにちょうどいいのかな
  • カード型コンポーネントの僕なりのHTMLとCSSを紹介 - Shibajuku

    こんにちは。 最近、今更ながらPodcastって面白いなぁーとワクワクしてます。 どうも、しばひろです。 ということで、Shibajukuでもポッドキャストを始めてみました。 Shiabajukuのサロンメンバーたちの会話を盗み聞きしてもらうというポッドキャスト「シバジュク酒場」です。 さて、今日は、色んなWebサイトでよく見かけるカード型コンポーネントについて書いてみたいと思います。 というのも、よく見かけるコンポーネントだからこそ、色んなマークアップ方法があると思うのですが、僕なりのマークアップ方法が誰かの参考になるかもしれないし、色んなコンポーネントのマークアップを考えるきっかけになるかもしれないので書いてみようと思いました。 カード型コンポーネントって何? まず、カード型コンポーネントがどんなコンポーネントかっていうと、まるでカードのような縦型になっていて、一般的には、最初に画像が

    カード型コンポーネントの僕なりのHTMLとCSSを紹介 - Shibajuku
    d4-1977
    d4-1977 2020/02/25
    どこまで配慮するか?ですよね。動的とかになると特に。
  • パンくずリスト(Topic Path)を作成する際に使えそうなサンプル8種|CSS HappyLife

    普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10

    パンくずリスト(Topic Path)を作成する際に使えそうなサンプル8種|CSS HappyLife
  • 1