CSS - 小技

CSSだけでマウスホバー時にtableの行と列とセルを別の色でハイライトさせる

Result See the Pen Pure CSS Table Column Hover by kachibito (@kachibito) on CodePen. こういうの。項目が多いほどセルは小さくなりがちだ...

CSSで「続きを読む」を作る

Result See the Pen Pure CSS read more toggle by kachibito (@kachibito) on CodePen. 以前書いたものとは別で、こちらは任意の場所で区切...

子要素の数が特定の数の間である場合にスタイルを適応させる

Result See the Pen "Between" quantity queries by kachibito (@kachibito) on CodePen. 子要素が特定の数の場合のみスタ...
Ads

フローチャート式のサイトマップ

Result See the Pen Tree view from unordered list by kachibito (@kachibito) on CodePen. フローチャート式のサイトマップというか、...

blockquoteのcite属性を使って引用元をユーザーに明示する

Result See the Pen CSS only citation by kachibito (@kachibito) on CodePen. blockquoteのcite属性に書いた引用元を表示する、というも...

外部サイトのリンクにだけ特定のアイコンを付与する

Result See the Pen Inline Icons & Wrapping by kachibito (@kachibito) on CodePen. 外部サイトのリンクにだけ特定のアイコンを付ける、...

IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する

Result See the Pen Multi-line-truncation in Pure CSS w/IE11 support (Exclusions) by kachibito (@kachibito) on Co...

hrの使いやすそうなスタイリングいろいろ

Result See the Pen bPLrqX by kachibito (@kachibito) on CodePen. いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にし...

リストにCSSカウンターで数字を表示して全体的にグラデーションカラーにする

Result See the Pen CSS Gradient Counter List by kachibito (@kachibito) on CodePen. 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...
Ads