リストにCSSカウンターで数字を表示して全体的にグラデーションカラーにする
Result See the Pen CSS Gradient Counter List by kachibito (@kachibito) on CodePen. CSSカウンターで加えた数字をグラデーションに、とい...
CSS - 小技
自動ナンバリングできるCSSカウンターを同ページ内で複数使うサンプル
Result See the Pen Overlapping CSS Counters by kachibito (@kachibito) on CodePen. 自動連番できるCSSカウンターを親要素と子要素の入れ子...
CSSだけでシンプルなLight/Darkモード
Result See the Pen Dark Mode without Javascript by kachibito (@kachibito) on CodePen. Webアプリやスマホアプリ等でよくあるダークモ...
CSSでフォルダツリーを作る
Result See the Pen File Tree CSS by kachibito (@kachibito) on CodePen. こういうの。まぁ特別なものでもないんですがコードがすっきりしてたのでメモ ...
CSSだけで簡易的なリストのソート
Result See the Pen Sort Elements with Flexbox (Pure CSS) by kachibito (@kachibito) on CodePen. 選択したグループに該当するア...
CSSで要素を斜めに2分割して境界線を透過
Result See the Pen Animated CSS mask-image gradient by kachibito (@kachibito) on CodePen. mask-imageとlinear-gradie...
任意のコンテンツを徐々に表示させる
Result See the Pen Happy Ada Lovelace Day by kachibito (@kachibito) on CodePen. CSSだけでアクセス時に徐々に任意のコンテンツを表示させます 本記事で...
画面を斜めに分割して2つの動画を表示する
Result See the Pen Two videos separated diagonally by kachibito (@kachibito) on CodePen. 画面を斜めに分割して動画を2つ同時に再生するサンプルで...
異なる複数の絵文字を連続表示させる
Result See the Pen Simple Emoji Animations by kachibito (@kachibito) on CodePen. 特に凝ったものではなく、keyframesで連続表示しています。 ア...
CSSだけでスクロールに応じたプログレスバー
Result See the Pen CSS only scroll indicator by kachibito (@kachibito) on CodePen. スクロールするとプログレスバーが進んで、 あとどれくらいページの...
CSSだけでスクロールしても追従するサイドバー
Result See the Pen WyQWoL by kachibito (@kachibito) on CodePen. よく見かけるスクロール時のストーカーコンテンツをCSSだけでやろうという内容です。 特にトリックでもな...
detailsタグでクリックで開閉するFAQコンテンツ
Result See the Pen Using the HTML5 Details Tag for FAQs by kachibito (@kachibito) on CodePen. detailsタグでFAQコンテンツっぽいや...
アスタリスク表示してマウスホバーで注釈表示
Result See the Pen CSS Only In-Place Translation by kachibito (@kachibito) on CodePen. 注釈がある事をアスタリスク（これ→*）で明示し、マウスホバ...
CSSだけで、長いテキストを一部隠してボタンクリックで全文表示
Result See the Pen SlideToogle con CSS :checked by kachibito (@kachibito) on CodePen. たまに見かけるコンテンツの表示/非表示のトグルです c...
ラジオボタンでタブ実装
Result See the Pen Basic CSS content switcher demo by kachibito (@kachibito) on CodePen. 今更感満載かもですが、いわゆるCSSオンリーのタブです...
リンク先の拡張子に合わせてアイコンを表示する
Result See the Pen #3 Selector de Atributo $= by kachibito (@kachibito) on CodePen. 等のように拡張子を限定してアイコンを付与する css h...
背景を斜めにする
Result See the Pen dJNjQo by kachibito (@kachibito) on CodePen. 親要素を回転させ、子要素を逆回転で元に戻してます css html via none
CSSだけで要素に自動連番
Result See the Pen auto nanbering by kachibito (@kachibito) on CodePen. ulのように自動で連番が付くやつです。li以外でも実装可能です css ca...
見出しでテキストの終わりから先は線にする
Result See the Pen gogOYa by kachibito (@kachibito) on CodePen. 平行線を挿入する見出しの左寄せ版、みたいなのです コードがシンプルで使いやすい印象でした css...
リストを本の目次のような見た目にする
Result See the Pen Bookish by kachibito (@kachibito) on CodePen. 本の目次っぽい見た目のリスト。 css html via Bookis...
hrの上にカスタムデータ属性で設定したテキストを表示する
Result See the Pen HR with centered text by kachibito (@kachibito) on CodePen. hrに疑似要素を加えてテキストを表示させるtipsです ただ、hrタグは...
センターに配置したテキストの両側を線で挟むやつ
Result See the Pen CSS line behind title text by kachibito (@kachibito) on CodePen. よくあるやつです。ベーシックな方法、spanを使わないパターン、...