GitHub - WebdevShefali/CheatSheetsYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
最近のCSSは進化が早い！ モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ
最近のCSSは進化が早く、またブラウザはエバーグリーン（自動で最新版にアップデートするブラウザ）になり月一ペースでアップデートされ、モダンCSSの機能もたくさんサポートされました。 CSSの新機能をはじめ、ブラウザのサポートが充実した機能を紹介します。2024年はこれらのモダンCSSを使用する機会が増えますね。 :has()疑似クラスがすべてのブラウザにサポートされました CSSのコンテナクエリ CSSのスタイルクエリ CSSのネスト CSSの@scopeはセレクタの適用範囲を設定できる CSSで三角関数が使用できるようになった スクロールをトリガーにしたアニメーションの実装が大きく変わる 今までは面倒だったことが簡単に実装できるようになった新機能 知っておくと便利なCSSの知識とテクニック HTML関連も少しだけ :has()疑似クラスがすべてのブラウザにサポートされました まずは、:h
CSSだけで任意のテキストを1クリックで全選択
Result 1クリックで全選択できるようにする的なやつです。オートコピーまでは出来ません 分かる人ならコードを見るまでも無くタイトルでピンと来てると思いますがuser-selectを使います csscode { -webkit-user-select: all; user-select: all; display: block; font-size:16px; padding: 20px; border: 1px dashed #999; color: #31808c; background-color: #fff; text-align: left; overflow: auto; }user-selectはテキストをコピペできないようにするuser-select: none;の情報が多いみたいですがallにするとこんな風に任意のテキストの全選択をサポートできるようになります can
CSS で何番目の要素を指定する方法 - by Takumi Hirashima
CSS で何番目の要素を指定する方法を紹介します。 例えば、前から後ろから何番目の要素の見た目を変えたい時などに便利な方法です。 前から数えてn番目の要素にスタイルを適用 前から数えてnの倍数の要素にスタイルを適用 前から数えてn番目の要素からnの倍数の要素にスタイルを適用 説明に使用するベースの HTML は次の通りです。 ここでは、ul タグに含まれる li タグを対象に説明します。 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> 前から数えてn番目の要素にスタイルを適用 前から数えてn番目の要素にスタイルを適用する場合は、CSS の疑似クラス :nth-child() を使用します。 例えば、前から数えて3番目の要素を変更する場合は、対象の要素（例の場合 li タグ）に値「3」を加えた擬似要素 :nt
マウスで選択した文字数を数える
Result マウスドラッグした文字数を数えます。JSはバニラです 使う機会があるかは分かりません jsfunction biR() { document.addEventListener("mousedown", rOS); document.addEventListener("mouseup", rOS); document.addEventListener("onkeyup", rOS); document.addEventListener("onkeydown", rOS); document.addEventListener("onkeydown", rOS); document.onselectionchange = function() { rOS(); }; } function rOS() { var cout, rts, rt; c = window.getSelect
CSSの便利な疑似セレクタ「:empty」と「:blank」、その違いと賢い使い方
エラーメッセージを実装する際、エラーがある時とエラーがない時の区別は「:empty」や「:blank」を使用すると、非常に簡単にスタイルを定義することができます。 「:empty」と「:blank」、その違いと実際にどのように使用するのか、どちらが便利なのかを紹介します。 :empty and :blank 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私は誤解していた 「:empty」と「:blank」の違い 「:empty」と「:blank」を実際に使用する場面 「:empty」の方が十分ではないと思った理由 「:empty」と「:blank」のサポートブラウザ まとめ 私は誤解していた 私は1ヵ月前のツイートで、「:empty」と「:blank」についてひどい誤解をしてました。 「:empty」は有用ではなく、「:bla
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
