CSSでアスペクト比を管理する Result See the Pen oNzebOr by kachibito (@kachibito) on CodePen. CSSでアスペクト比を管理しよう、みたいなネタです。 上サンプルはサイズがバラ... 2020.12.21
detailsタグを使った開閉コンテンツのスタイルサンプルいろいろ Result See the Pen <details> Animation by kachibito (@kachibito) on CodePen. detailsタグを使った開閉コンテンツのスタイ... 2020.11.14
イージングをCSS関数で管理する Result See the Pen Easings Are Rad by kachibito (@kachibito) on CodePen. 使わせてもらいそうなのでメモ。イージングアニメーションをCSS関数で... 2020.07.27
CSSのみで、クリックするとGIFアニメが再生されるやつ Result See the Pen CSS only "click to show GIF" by kachibito (@kachibito) on CodePen. 画像をクリックするとG... 2020.07.20
CSSだけで任意のテキストを1クリックで全選択 Result See the Pen Select All by kachibito (@kachibito) on CodePen. 1クリックで全選択できるようにする的なやつです。オートコピーまでは出来ません ... 2020.05.09
contenteditableな要素にplaceholderを与える Result See the Pen Placeholder support for contentEditable elements, without JavaScript by kachibito (@kachibito... 2020.03.29
clip-pathで背景を斜めにカットする Result See the Pen CSS Tip of the Day 17 by kachibito (@kachibito) on CodePen. CSSで背景を斜めにカットする方法です。別段特別な内容で... 2020.02.06
CSSだけで画像のビフォーアフターを見れるやつ Result See the Pen Image Swapping ↔ pure Css by kachibito (@kachibito) on CodePen. 画像のビフォーアフターみたいなやつをCSSで、という... 2019.11.13
CSSだけでマウスホバー時にtableの行と列とセルを別の色でハイライトさせる Result See the Pen Pure CSS Table Column Hover by kachibito (@kachibito) on CodePen. こういうの。項目が多いほどセルは小さくなりがちだ... 2019.10.13
CSSで「続きを読む」を作る Result See the Pen Pure CSS read more toggle by kachibito (@kachibito) on CodePen. 以前書いたものとは別で、こちらは任意の場所で区切... 2019.10.03
子要素の数が特定の数の間である場合にスタイルを適応させる Result See the Pen "Between" quantity queries by kachibito (@kachibito) on CodePen. 子要素が特定の数の場合のみスタ... 2019.09.20
フローチャート式のサイトマップ Result See the Pen Tree view from unordered list by kachibito (@kachibito) on CodePen. フローチャート式のサイトマップというか、... 2019.09.05
blockquoteのcite属性を使って引用元をユーザーに明示する Result See the Pen CSS only citation by kachibito (@kachibito) on CodePen. blockquoteのcite属性に書いた引用元を表示する、というも... 2019.08.23
外部サイトのリンクにだけ特定のアイコンを付与する Result See the Pen Inline Icons & Wrapping by kachibito (@kachibito) on CodePen. 外部サイトのリンクにだけ特定のアイコンを付ける、... 2019.07.29
IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する Result See the Pen Multi-line-truncation in Pure CSS w/IE11 support (Exclusions) by kachibito (@kachibito) on Co... 2019.07.24
hrの使いやすそうなスタイリングいろいろ Result See the Pen bPLrqX by kachibito (@kachibito) on CodePen. いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にし... 2019.07.01
リストにCSSカウンターで数字を表示して全体的にグラデーションカラーにする Result See the Pen CSS Gradient Counter List by kachibito (@kachibito) on CodePen. CSSカウンターで加えた数字をグラデーションに、とい... 2019.06.10
自動ナンバリングできるCSSカウンターを同ページ内で複数使うサンプル Result See the Pen Overlapping CSS Counters by kachibito (@kachibito) on CodePen. 自動連番できるCSSカウンターを親要素と子要素の入れ子... 2019.06.01
CSSだけでシンプルなLight/Darkモード Result See the Pen Dark Mode without Javascript by kachibito (@kachibito) on CodePen. Webアプリやスマホアプリ等でよくあるダークモ... 2019.04.18
CSSでフォルダツリーを作る Result See the Pen File Tree CSS by kachibito (@kachibito) on CodePen. こういうの。まぁ特別なものでもないんですがコードがすっきりしてたのでメモ ... 2019.04.04
CSSだけで簡易的なリストのソート Result See the Pen Sort Elements with Flexbox (Pure CSS) by kachibito (@kachibito) on CodePen. 選択したグループに該当するア... 2019.03.11
CSSで要素を斜めに2分割して境界線を透過 Result See the Pen Animated CSS mask-image gradient by kachibito (@kachibito) on CodePen. mask-imageとlinear-gradie... 2018.12.21