CSSでボタンを実装するときに記述しておくと便利なスタイルのまとめ

2024/04/09 107 users CSS ズーム 実装 誤動作 スマホアプリ

Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトライン... 続きを読む

HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir | コリス

2019/11/11 447 users コリス ホバー時 class エフェクト デスクトップ

シンプルなHTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリを紹介します。 デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます。 Izmir Izmir -GitHub Izmirの特徴 Izmirのデモ Izmirの使い方... 続きを読む

アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシート -a11y css reset | コリス

2019/07/01 43 users コリス スクリーンリーダー アクセシビリティ CSS リセット

アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシートを紹介します。コンテンツを視覚的に隠す際に見えなくするだけでなく、スクリーンリーダーにもアクセス可能にし、フォーカス時の振る舞いなどが定義されています。 a11y css reset -GitHub a11y css resetの特徴 a11y css resetの中身 a11y... 続きを読む

テキストフィールドのフォーカス時に背景色を変更する JavaScript

2005/08/21 131 users テキストフィールド JavaScript 背景色 mixi

■ テキストフィールドのフォーカス時に背景色を変更する JavaScript 以下の JavaScript を読み込ませれば、フォームのテキストフィールドにフォーカスした時に、背景に色がつくようになります。今どのフィールドを選択しているのかが視覚的にわかるので便利。 mixi にこの機能がついていたんだけど、onfocus なんてのをいっぱい書いていて非効率的だと思ったので、読み込ませるだけで勝手... 続きを読む