imgタグに指定した画像のURLが存在しない時に表示される状態をCSSだけで対応する Result See the Pen zYoLQYq by kachibito (@kachibito) on CodePen. 1番上が画像のURLが存在しない時で、特に何もしない場合に表示されるやつ。 2番目...2021.03.06
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 Tree view from unordered list by kachibito (@kachibito) on CodePen. フローチャート式のサイトマップというか、...2019.09.05
外部サイトのリンクにだけ特定のアイコンを付与する Result See the Pen Inline Icons & Wrapping by kachibito (@kachibito) on CodePen. 外部サイトのリンクにだけ特定のアイコンを付ける、...2019.07.29
Font Awesomeのアイコンをアニメーションするグラデーションカラーで表示する Result See the Pen Font Awesome Animated Gradient by kachibito (@kachibito) on CodePen. Font Awesomeのアイコンをア...2019.06.19
CSSでフォルダツリーを作る Result See the Pen File Tree CSS by kachibito (@kachibito) on CodePen. こういうの。まぁ特別なものでもないんですがコードがすっきりしてたのでメモ ...2019.04.04
アニメーションエフェクト付きのtoggleボタン Result See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by kachibito (@kachibito) on CodePen. CSSのみで実装したアニメーション...2018.10.04
異なる複数の絵文字を連続表示させる Result See the Pen Simple Emoji Animations by kachibito (@kachibito) on CodePen. 特に凝ったものではなく、keyframesで連続表示しています。 ア...2018.08.26
グラデーションな下線 Result See the Pen Underline gradient animation by kachibito (@kachibito) on CodePen. 下線がグラデーションになっているかのようにする 疑似要素を...2018.07.24
CSSだけでLightbox風に画像ポップアップ Result See the Pen CSS Lightbox by kachibito (@kachibito) on CodePen. アニメーションエフェクトの不要なら結構シンプルなコードになります css h...2018.06.11
水の波紋っぽいエフェクト Result See the Pen CSS ripple effect by kachibito (@kachibito) on CodePen. 水上で起こる波紋のようなエフェクトです css html via...2018.05.26
文章の一部を訂正した風のスタイル Result See the Pen del-ins pair by kachibito (@kachibito) on CodePen. こういうやつ。insとdelタグを使用します フォントやrotateを使う事でリアル感...2018.05.12
アスタリスク表示してマウスホバーで注釈表示 Result See the Pen CSS Only In-Place Translation by kachibito (@kachibito) on CodePen. 注釈がある事をアスタリスク(これ→*)で明示し、マウスホバ...2018.02.07
テーブルのセルが空だった場合にハイライトしたり文字を挿入したり Result See the Pen GQKmMW by kachibito (@kachibito) on CodePen. 5年前にjQueryでテーブル内で空の要素をハイライトさせる、という記事を書いたのを偶然確認したのでCS...2018.01.28
CSSだけで、長いテキストを一部隠してボタンクリックで全文表示 Result See the Pen SlideToogle con CSS :checked by kachibito (@kachibito) on CodePen. たまに見かけるコンテンツの表示/非表示のトグルです c...2018.01.25
シンプルなタイムライン Result See the Pen Responsive HTML Timeline by kachibito (@kachibito) on CodePen. RWD対応のシンプルなタイムライン css スマフォ向けのコード...2017.09.14
矢印型のパンくずナビゲーション Result See the Pen Pure CSS3 breadcrumb navigation - the pixel perfect way by kachibito (@kachibito) on CodePen. 矢印型...2017.09.11
CSSのみで作られたスピナー集 Result See the Pen Such Spinners, Much Loading by kachibito (@kachibito) on CodePen. CSSのみで作られたスピナー集です。 見た目とは反してkey...2017.09.09
ボタンの角に印をつけ、マウスホバーで伸びてくるエフェクト Result See the Pen CSS button hover effect by kachibito (@kachibito) on CodePen. 角についた印がマウスホバーで伸びてくる、というアニメーションエフェクト...2017.09.06
見出しでテキストの終わりから先は線にする Result See the Pen gogOYa by kachibito (@kachibito) on CodePen. 平行線を挿入する見出しの左寄せ版、みたいなのです コードがシンプルで使いやすい印象でした css...2017.09.05
画像を背景にした吹き出し Result See the Pen Image arrow (Pure CSS) by kachibito (@kachibito) on CodePen. よく見るCSS吹き出しに画像背景を設定した案 通常の吹き出しを作る方法...2017.09.03