【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
Web制作を変える！2022年の便利オンラインツール・ベスト110選
Web制作を変える！2022年の便利オンラインツール・ベスト110選 これからのウェブデザインに欠かせないツール大集合 この記事では、2022年に公開された便利なWebオンラインツール・ベスト110個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2022年にかけて、合計343個の新しいツールやサービスを紹介してきました。 その中でも、Webデザイン制作に便利なツールを厳選したコレクションで、「無料で利用できるツール」を揃えています。 特に今年は、人工知能やAIテクノロジー関連のツールが増えたことで、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 🕹 CSSツール（16個） 🧰 Webデザイン便利ツール（19個） 🦄 デザインツール
Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
CSS スタイルシート制作を楽にする！知っておきたい便利ツール25選まとめ
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
価値あるCSSの設計と運用のために | 第1回 まず、どうやっています？
価値あるCSSの設計と運用のために 第1回 まず、どうやっています？ 10人のエンジニアがいたら、10通りの進め方があるとも言えるCSSの設計。どのような設計や運用がベターか知りたい人もいるのではないでしょうか。その一端を、座談会形式で話してもらいました。 はじめに このシリーズでは、CSSを設計／運用していくというテーマで、どんなことに注意しているかを話してもらいます。 第1回目となる今回は、設計に入るときに確認したいことです。対応ブラウザやコーディングルールなどの技術面のほかに、デザインカンプや仕様書に「まだ」出ていない情報をどこまで汲み取るのかという「気遣い」「空気を読む」などの話題も出ています。 参加者は、ピクセルグリッドのエンジニア5名です。 高津戸 壮（@Takazudo） 小山田 晃浩（@yomotsu） 山田 敬美（@tacamy） 坂巻 翔大郎（@GeckoTang） 中
破綻しにくいCSS設計の法則 15 - Qiita
ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく 詳細度または特異性の高いものほど後方に記述する 可能な限り!importantしない 可能な限りハックしない 変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく 例えば、こういうScrap & Buildは単に通信量のムダ。 * { f
CSSのセレクタをインタラクティブに確認できる超絶便利ブックマークレット『SelectorGadget』 | 100SHIKI
CSSのセレクタをインタラクティブに確認できる超絶便利ブックマークレット『SelectorGadget』 February 27th, 2009 Posted in その他 Write comment かなりマニアックではあるが、その筋の人にはすっごく便利なのでは。 SelectorGadgetではCSSのセレクタを書くためのブックマークレットを配布している。CSSのセレクタは慣れるまで書くのが大変である。 しかしこれを使えば「タイトルだけを指定するCSSセレクタ」「このテーブルのこの列だけを指定するセレクタ」なんてのをインタラクティブに指定しながら確認していくことができる。 使い方は簡単で、まずはブックマークを好きなページで起動する。すると右下にセレクタ表示用のボックスが現れる。 次にセレクタに含めたいDOMをクリックする。するとそこが緑になり、さらにそのセレクタにマッチするDOMが黄色
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダン日本語フォント指定