【本日公開・明日朝まで無料】npmのパッケージを、インストールやビルドなしでブラウザから使う方法を紹介します。ブラウザ向けに配信するCDNを使い、「import map」で名前とURLを対応づけます。バンドラーとの使い分けも整理します：script要素にtype="module"を付ける利点 - ビルドなしでnpmのパッケージを使う www.codegrid.net/articles/202... #codegrid

【Tips】
CSSの:has()を使うと、見出しが連続するときだけ、間の余白を詰められます✂️

h2:has(+ h3),
h3:has(+ h4) {
margin-bottom: 0.25em;
}

「直後に別の見出しが続く見出し」を:has()で選択し、そのmargin-bottomを縮める書き方です。

#codegrid #css

【本日公開・明日朝まで無料】
CSS Gridで隙間に線を引くとき、空セルにまで線が伸びていたら不格好ですよね😅

rule-visibility-itemsのall / around / betweenを使い分ければ、空いている領域への線の出し方を細かく制御できます💡

www.codegrid.net/articles/202... #codegrid #css

【Tips】
CSSの:has()を使うと、サブメニューをもつ項目にだけ、HTMLを変えずにアイコンを付けられます💫

nav li:has(> ul) > a::after {
content: ' ▼';
font-size: 0.75em;
}

「直接の子としてulをもつli」を:has()で選択し、そのリンクに::afterでアイコンを追加する書き方です✏️

#codegrid #css

【最新公開一覧】CodeGrid先週公開の3本はこちら🎉
🔸文字列の正規化をおこなうString.prototype.normalize()
🔸AI向けナレッジの作り方 後編 MCPでつなぐ自分と会社のAIコンテキスト
🔸隙間に線を引くcolumn-rule/row-rule 第2回 CSS GridとFlexboxで区切り線を引く
codegrid.net/issues/695/?...
#codegrid

【Tips】
CSSの:has()を使うと、imgの有無だけでカードのレイアウトを切り替えられます。

.card:has(img) {
display: grid;
grid-template-columns: 1fr 2fr;
}

.card:not(:has(img)) {
display: grid;
grid-template-columns: 1fr;
}

画像がある/ないでHTMLの構造を変えずに、レイアウトだけをCSS側で自動的に出し分けられます。

#codegrid #css

【本日公開・明日朝まで無料】PDFからコピペした「が」、なぜか文字列比較で一致しない…なんてことありませんか?🤔
見た目は同じでも、内部のコードポイント列が違うのが原因なんです🧩
NFC・NFD・NFKC・NFKDの4つの正規化形式の違いを、日本語の具体例でスッキリ整理しました✍️

文字列の正規化をおこなうString.prototype.normalize() - 見た目と内部が異なる文字列の正体と対処
www.codegrid.net/articles/202...
#codegrid

【本日公開・明日朝まで無料】
タグ一覧みたいな折り返すリストに`border-left`で区切り線を引くと、折り返した2行目の先頭にも線が残ってしまうんですよね😅

`column-rule`ならこれだけで解決✨

.tags {
column-rule: 1px solid #c00;
}
www.codegrid.net/articles/202... #codegrid #css

【本日公開・明日朝まで無料】方針は、決めるより伝え続けるほうが難しい。ドキュメントは読まれなくても、AI向けナレッジにしておけば日々の業務相談への回答に反映されます：AI向けナレッジの作り方 - MCPでつなぐ自分と会社のAIコンテキスト www.codegrid.net/articles/202... #codegrid

【本日公開・明日朝まで無料】PDFからコピーした文字列が一致しない――原因は内部のコードポイント列の違いです。NFC・NFD・NFKC・NFKDという4つの正規化形式の違いを日本語の具体例で整理します：文字列の正規化をおこなうString.prototype.normalize() - 見た目と内部が異なる文字列の正体と対処 www.codegrid.net/articles/202... #codegrid

【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます
🔸文字列の正規化をおこなうString.prototype.normalize()
🔸AI向けナレッジの作り方 後編 MCPでつなぐ自分と会社のAIコンテキスト
🔸隙間に線を引くcolumn-rule/row-rule 第2回 CSS GridとFlexboxで区切り線を引く
codegrid.net/issues/695/?...
#codegrid

【本日公開・明日朝まで無料】区切り線のためにアイテム側のセレクターと格闘してきた経験はありませんか。`column-rule`と`row-rule`は、CSS GridやFlexboxの隙間そのものに線を引くという発想で、この悩みを解消します：隙間に線を引くcolumn-rule/row-rule - CSS GridとFlexboxで区切り線を引くcolumn-ruleとrow-rule www.codegrid.net/articles/202... #codegrid

【Tips】
CSSだけで、ユーザーの入力値を盗み取る攻撃があるのをご存じですか？😳

属性セレクターで先頭文字ごとに条件分岐し、一致したら外部画像をリクエストさせる、という手口です。

CSPの`style-src`でインラインスタイルを許可しない設定にしておくことは、この手の攻撃に対して有効です🛡️

#codegrid #csp #security

【Tips】
LLMは、同じコンテキストに実装とテストがあると「正しいテスト」ではなく「通るテスト」を書いてしまう癖があります:test_tube:

防ぐにはテスト作成と実装のコンテキストを物理的に分けるのが有効です。プロンプトで「カンニングするな」と言っても限界がありますよ。

#codegrid #claudecode

【Tips】
CSSの:has()を使うと、一覧の中の1枚だけがホバーされている状態を、CSSだけで判定できます💁‍♂️

```
.card-list:has(.card:hover) .card:not(:hover) {
opacity: 0.5;
}
```

「ホバーされている.cardを持つ.card-list」を:has()で捉え、:not(:hover)でホバーされていないカードだけを暗くする書き方です。

#codegrid #css

【Tips Quiz】
正解は「B. 迷ったら/clear」でした。

/compactは要約自体がコンテキストを消費するため、リフレッシュ効果は思ったほど大きくありません。
同じ問題を2回超えて修正させたら/clearが目安です:broom:

#codegrid #claudecode

【最新公開一覧】CodeGrid先週公開の3本はこちら🎉
🔸AIと働く現場から 第2回 AIが実装を担って、何が残ったか
🔸Webサイトホスティングで使うCloudflare Workers 第3回 Next.jsのサイトをWorkersにデプロイする
🔸script要素にtype="module"を付ける利点 第2回 モジュールにするだけで得られるメリット
codegrid.net/issues/694/?...
#codegrid

【Tips Quiz】
正解は「C. やや『pushy』に強めに書く」でした。

Claudeはスキルを使うべき場面で使わない「undertrigger」しがちなので、それを相殺するために強めの表現が推奨されています:sparkles:
#codegrid #claudecode

【本日公開・明日朝まで無料】同じJavaScriptタグでも、type="module"と書いた時点で扱いが変わります。スコープ、実行のタイミング、strict modeまで、さまざまなメリットを受けられます：script要素にtype="module"を付ける利点 - モジュールにするだけで得られるメリット www.codegrid.net/articles/202... #codegrid

【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます
🔸AIと働く現場から 第2回 AIが実装を担って、何が残ったか
🔸Webサイトホスティングで使うCloudflare Workers 第3回 Next.jsのサイトをWorkersにデプロイする
🔸script要素にtype="module"を付ける利点 第2回 モジュールにするだけで得られるメリット
codegrid.net/issues/694/?...
#codegrid