タグ

2020年11月7日のブックマーク (4件)

  • CSSフレームワークからみる、フォーカス・インジケータの違いを考察 - ME to FE

    CSSフレームワークからみる、フォーカス・インジケータの違いを考察 フォーカスってなに? フォーカスの可視化について フォーカスのスタイル CSSフレームワークはどのような対応をしているのか? BULMA 特徴 Bootstrap 特徴 Materialize 特徴 Pure.css 特徴 skeleton 特徴 CSSフレームワークの総評 1. Bootstrap 2. BULMA 3. Pure.css 4. Skeleton 5. Materialize まとめ フォーカスってなに? 「フォーカス」とは、パソコン画面上でウインドウや入力ボックス、アイコンやボタン、画像といった対象物が「次の操作」を受けられる(アクティブな、選択された)状態のことです。 引用:weblio辞書「フォーカス」(別窓でリンク) 上記の動作サンプルを例にすると、テキストフォーム、セレクトフォーム、ラジオボタン

    CSSフレームワークからみる、フォーカス・インジケータの違いを考察 - ME to FE
  • :focus-ringの代用としてwhat-inputを試す - yuhei blog

    前回の記事で紹介した:focus-ringのポリフィルはイマイチだった。element.focus()で制御したときにいい感じにならないというつぶやきを見て知った。 具体的な例として、モーダルを閉じた後の挙動について考えたい。 モーダルを閉じた後は、フォーカスはモーダルを開いたボタンに戻るように実装する。そのために、button.focus()のようにしてフォーカスをスクリプトで制御する。この際、:focus-ringのポリフィルだとfocus-ringが有効になる処理が実行されず、キーボード操作をしていても適切なスタイルが表示されないことになる。 調べてみるとWhat Input?という似たライブラリがあった。ユーザーの入力端末を検出する機能があり、同じくfocus-ringの制御をすることが目的らしい。:focus-ringのポリフィルとは違い、入力端末の検出結果をhtml要素の属性な

    :focus-ringの代用としてwhat-inputを試す - yuhei blog
  • Tailwind Starter Kit by Creative Tim | Free & Open Source Design System

    A beautiful extension for TailwindCSS.Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the already one from TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue and Angular. Great for your awesome projectPutting together a page has never been easier than matching together pre-made components. From landing pages pres

    Tailwind Starter Kit by Creative Tim | Free & Open Source Design System
  • vimrc の分割管理を上手くやる 2020年版

    筆者の環境について Vim にはプラグインマネージャも沢山あります。その中で僕は vim-plug を使っています。Software Design という雑誌で「Vim の細道」という連載をやっている事もあり、皆さんに一番リーチしやすいプラグインマネージャを選んでいるという事もありますが、基は「トラブルが発生しづらい」という理由で使っているのもあります。 vimrc の分割管理 ところで最近は Vim プラグインが沢山あり、個々に設定が必要な場合もあります。全て vimrc の中に書いてしまうのも良いのですが、そうするとどこからどこまでが、どのプラグインの設定か分からないといった問題が起きてしまいます。僕は vimrc をプラグイン毎に分割して管理しています。 Big Sky :: ぼくがかんがえたさいきょうの Vim のこうせい 2019年 年末版 " Vim 体の機能のデフォルト値

    vimrc の分割管理を上手くやる 2020年版