Design Tokens Generatorはデザイントークンを作成し、まとめてCSS変数にしてくれるWebアプリです。 デザイントークンとは？については以下のAdobe blogをご参照ください。

Result リンクのテキストがない場合はhref属性に指定されているURLをテキストにしてリンク化する css/*empty疑似セレクタとbefore疑似セレクタを併用*/ a[href]:empty::before { /*href属性の値をbeforeに表示する*/ content: attr(href); }html<a href="https://github.com/AllThingsSmitty/css-protips"></a>viaCSS Protips

Result 少しのVanillaなJSで作るページ内スクロールと追従するナビゲーション。よくドキュメントページとかナレッジ共有系のWebサイトで見かけますね。 今更感なネタですが、ボーっとCodePenの2020年ベストPenみたいな記事を眺めてたら見かけたので割と需要あるネタですしメモ的にと思って書いてます。 javascriptwindow.addEventListener('DOMContentLoaded', () => { const observer = new IntersectionObserver(entries => { entries.forEach(entry => { const id = entry.target.getAttribute('id'); if (entry.intersectionRatio > 0) { document.querySelec

SVG Quick Editorは任意のSVGの各所の色やパスの削除等を簡単に行えるオープンソースのWebアプリです。 アップロードにはほとんど時間がかからず即座に表示されます。色やパスが個別にリスト化され、変更やパスの削除などが可能となっています。リストにマウスホバーすることでプレビューエリアの該当箇所がハイライトされるのでどの部分を編集するかも分かりやすくなっています。 SVGファイルの簡易的な編集をノーコードで行える、といったもので非開発者向けとなっています。本アプリはOSSとしてもソースコードが公開されています。ライセンスはMIT。 SVG Quick Editor

Guess CSS!はクイズ形式でCSSを視覚的に学べるWebアプリです。完成図を見て正しいコードを選択するクイズ形式となっています。 文章での出題ではなく、正しいコードを選ぶだけのシンプルな問題なので誰でも学べるようになっています。回答したら正誤判定し、次の問題に進めるようになっています。 割と悩む問題もあって勉強不足を痛感する2021年のクリスマスイブでした。年末でご多忙化でしょうし、少しの息抜きにぜひお試しください。問題は結構多いようで途中で離脱してしまいました。一応OSSとなっていてソースコードも公開されています。 Guess CSS!

CSS Layoutはよく採用される汎用的なレイアウトやUIパターンのCSSコードを60ほどコレクションしているプロジェクトサイトです 例えばレイアウトなら3カラム、サイドバー2カラム、１カラムグリッドレイアウト、左右分割やヘッダー追従などなど、UIならナビゲーションやフォームの各部品、アコーディオンやカードなどなどWebサイトを見ていれば必ずどこかで見かけるようなものが網羅されており、骨組みのCSSをコピーできるようになっています CSSフレームワークを細分化して１つずつ提供する、みたいな印象でした。地味に便利な気がします CSS Layout

Result jQuery//全部非表示にする $('.someList li').hide(); // リストをシャッフルする var items = $('.someList li').get().sort(function() { return Math.round(Math.random()) - 0.5; }).slice(0, 3); // ランダムで3つだけ抽出して表示 $(items).show();​html<ul class="someList"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul>​viaShow a Random Numbe

今更ながら不況なのでネットで 安く買えるEコマースサイトや 通常よりも安く済ませる方法などを 調べたのでシェアしたいと思って エントリします。殆ど既出な情報です。 ほんとにお金が無い時には役に立たない 情報かも知れません。 仕事の過程で物入りな時に探した情報です。何かと出費を抑えたい時代。少しでも安く済ませられるよう、激安ネットショップやモノを安く買う方法等の情報をまとめました。順不同です。 生活応援通販のヒラキ とにかくココは絶対に紹介したいサイト。金額が異常なほど安い。スニーカー180円で有名なサイトです。他にも雑貨80円均一、女性用ブーツ780円などなど。配送はクロネコヤマト等なので送料が高いという罠も無し（多分）。更に5250円以上で送料も無料とまとめ買いにもうってつけです。 生活応援通販のヒラキ ロヂャース ディスカウントで有名なロヂャースのオンラインショップ。実店舗同様、安い商

Livedownは各エディタでMarkdown記法を使う際にリアルタイムプレブビュー機能を付加するプラグイン。VimやSublime text、Emacsなどのプラグインが用意されています。Markdownを書く機会が多い方には便利そうですね。ライセンスはMIT。 Livedown

暫く空いてしまいましたが、jQueryを コピペに頼らず自分で書いてみよう、 という記事。第三回目です。僕よりも 全然詳しい人のほうが多いんですが、 最近何度かデベロッパーさんの憤り の発言を目にするので多少でも貢献 出来ればと思います。 というわけで第三回目はよく見るタブメニューを書いてみましょう、というもの。 「jQueryを使ったスムースなタブメニュー – ウェビメモ」という記事をお見かけしたのですが、簡単なタブメニューですのでコピペにもプラグインにも頼らず自分で作ってみようじゃないかと、そういう趣向です。 内容は完璧に良いコードとかではなく、あくまで脱ビギナーという内容となります。ビギナーの僕が何様だみたいな話は置いといて。 分かりやすさをメインにしていますので厳密には説明が少し違う点もあるかもしれません。誤解招きそうな記述ありましたらご指摘下さい。 ゴールの確認まず完成形を見てみ