少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
『読み手につたわる文章 - テクニカルライティング』を読んで、レビューテクニックを身につけよう！ - Magnolia Tech
booth.pm mochikoさんが書かれた『読み手につたわる文章 - テクニカルライティング』という本を読みました。 この本はビジネスの現場で必要な「相手に伝えたいことを正しく伝える」ためのテクニックが詰まった本です。 大事なことがコンパクトに詰まっていて、何度も読み返したり、他の人に紹介するのに適しています。この辺はどうしても商業出版だと一定のページ数が無いと出版が難しいので、同人誌として出版するのに向いている構成ですね。 いくつか「そうだよねー」と思ったトピックを拾っておくと... 読者層を決めてから書こう 自分も何らかの文書を書く時は、「誰が読むのか？」というのを常に一番考えて書いています。特に、特定の読み手が想定できる報告書などの文書は、まずはどこまで相手の理解度を前提条件として想定できるか？ということを考えます。不特定多数の人向けの文書では難しいですが、特定の人向け、特に直接
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG