:has()を使って親要素内に存在する子要素を数えるCSSのサンプル Result See the Pen Counting child items with :has() by kachibito (@kachibito) on CodePen. かなり世間から遅れていて今...2022.09.06 | 10時03分04秒
非推奨のmarqueeタグのような動作をモダンなCSSで再現 Result See the Pen CSS Marquee Examples by kachibito (@kachibito) on CodePen. ジオシティーズ時代のWebサイトの象徴のような存在...2022.08.12 | 9時59分25秒
文章の任意の行で文字省略を3点リーダーでなくグラデーションで Result See the Pen MDN's cool truncation by kachibito (@kachibito) on CodePen. 長い文章を自動で省略するやつです。 CSSだけ...2022.08.07 | 10時01分45秒
CSSだけでスクロールに合わせて動くホログラムっぽいやつ Result See the Pen Untitled by kachibito (@kachibito) on CodePen. 角度を変えたり等、動かす事でキラキラする、いわゆるホログラムっぽいものをC...2022.07.14 | 10時03分23秒
単一要素で枠線のあるポップなbox-shadowを作る Result See the Pen Untitled by kachibito (@kachibito) on CodePen. ちょっとコミック風の、枠線ありのポップなbox-shadowを単一要素で作...2022.06.24 | 10時05分50秒
CSSの@counter-styleでリストのマーカーを自由に生成する Result See the Pen Counter style with @counter-style by kachibito (@kachibito) on CodePen. @counter-style...2021.08.17 | 10時10分15秒
SVGを使ったCSSツールチップ Result See the Pen Tooltip appear by kachibito (@kachibito) on CodePen. マウスホバーでツールチップが表示されるよくあるやつ。 吹き出しにSV...2021.05.08 | 9時53分37秒
imgタグに指定した画像のURLが存在しない時に表示される状態をCSSだけで対応する Result See the Pen zYoLQYq by kachibito (@kachibito) on CodePen. 1番上が画像のURLが存在しない時で、特に何もしない場合に表示されるやつ。 2番目...2021.03.06 | 10時04分53秒
CSSでアスペクト比を管理する Result See the Pen oNzebOr by kachibito (@kachibito) on CodePen. CSSでアスペクト比を管理しよう、みたいなネタです。 上サンプルはサイズがバラ...2020.12.21 | 10時06分03秒
detailsタグを使った開閉コンテンツのスタイルサンプルいろいろ Result See the Pen <details> Animation by kachibito (@kachibito) on CodePen. detailsタグを使った開閉コンテンツのスタイ...2020.11.14 | 10時04分37秒
イージングをCSS関数で管理する Result See the Pen Easings Are Rad by kachibito (@kachibito) on CodePen. 使わせてもらいそうなのでメモ。イージングアニメーションをCSS関数で...2020.07.27 | 10時03分09秒
CSSのみで、クリックするとGIFアニメが再生されるやつ Result See the Pen CSS only "click to show GIF" by kachibito (@kachibito) on CodePen. 画像をクリックするとG...2020.07.20 | 10時08分57秒
CSSだけで任意のテキストを1クリックで全選択 Result See the Pen Select All by kachibito (@kachibito) on CodePen. 1クリックで全選択できるようにする的なやつです。オートコピーまでは出来ません ...2020.05.09 | 9時31分32秒
contenteditableな要素にplaceholderを与える Result See the Pen Placeholder support for contentEditable elements, without JavaScript by kachibito (@kachibito...2020.03.29 | 10時10分05秒
clip-pathで背景を斜めにカットする Result See the Pen CSS Tip of the Day 17 by kachibito (@kachibito) on CodePen. CSSで背景を斜めにカットする方法です。別段特別な内容で...2020.02.06 | 10時08分09秒
CSSだけで画像のビフォーアフターを見れるやつ Result See the Pen Image Swapping ↔ pure Css by kachibito (@kachibito) on CodePen. 画像のビフォーアフターみたいなやつをCSSで、という...2019.11.13 | 9時56分42秒
CSSだけでマウスホバー時にtableの行と列とセルを別の色でハイライトさせる Result See the Pen Pure CSS Table Column Hover by kachibito (@kachibito) on CodePen. こういうの。項目が多いほどセルは小さくなりがちだ...2019.10.13 | 10時13分31秒
CSSで「続きを読む」を作る Result See the Pen Pure CSS read more toggle by kachibito (@kachibito) on CodePen. 以前書いたものとは別で、こちらは任意の場所で区切...2019.10.03 | 9時52分28秒
子要素の数が特定の数の間である場合にスタイルを適応させる Result See the Pen "Between" quantity queries by kachibito (@kachibito) on CodePen. 子要素が特定の数の場合のみスタ...2019.09.20 | 10時09分40秒
フローチャート式のサイトマップ Result See the Pen Tree view from unordered list by kachibito (@kachibito) on CodePen. フローチャート式のサイトマップというか、...2019.09.05 | 10時28分25秒
blockquoteのcite属性を使って引用元をユーザーに明示する Result See the Pen CSS only citation by kachibito (@kachibito) on CodePen. blockquoteのcite属性に書いた引用元を表示する、というも...2019.08.23 | 10時04分55秒
外部サイトのリンクにだけ特定のアイコンを付与する Result See the Pen Inline Icons & Wrapping by kachibito (@kachibito) on CodePen. 外部サイトのリンクにだけ特定のアイコンを付ける、...2019.07.29 | 9時40分46秒