モダンフロントエンドをリードする会社、ピクセルグリッドが運営するWeb制作者のための有料フロントエンド技術情報メディア「CodeGrid」です。過去記事からの HTML / CSS / JavaScriptなどに関するお役立ちTipsと、毎週の配信内容をポストしています。
Joined September 2011
- Tweets5.7K
- Following606
- Followers2.3K
- Likes3.6K
【本日公開・明日朝まで無料】
AIエージェントの利用制限で手が止まること、ありませんか？
モデルもエフォートも「とりあえず最高設定」が正解とは限りません。
体験談を元に、使い分けるコツを紹介します。
codegrid.net/articles/2026-m…
#codegrid
ALT ダーク背景のタイトル画像で、中央に大きく「モデルとエフォートの考え方」、黄色の副題「利用制限とつきあうAIエージェントコーディング」があり、周囲にGPT・Claude・Luna・Solなどのモデル名と low/medium/high/xhighなどの性能ラベルが散在している。
【本日公開・明日朝まで無料】
AIにE2Eテストを書かせたくても、複雑な管理画面では操作手順を書き出すのがひと苦労！
Playwrightのcodegenなら、ブラウザで操作するだけでテストコードとして記録できます。
codegrid.net/articles/2026-p… #codegrid
ALT 管理画面のワイヤーフレームで、テストが複雑な操作になっているという図。左にページ一覧、中央に編集中のメインエリアと「ここに追加」や画像プレースホルダーのブロック、右に部品設定パネル（複製・削除など）、下に部品選択モーダルとページ削除確認ダイアログが表示されている。
【本日公開・明日朝まで無料】
CSS Gridで隙間に線を引くとき、空セルにまで線が伸びていたら不格好ですよね😅
rule-visibility-itemsのall / around / betweenを使い分ければ、空いている領域への線の出し方を細かく制御できます💡
codegrid.net/articles/2026-c… #codegrid
【Tips】
CSSの:has()を使うと、サブメニューをもつ項目にだけ、HTMLを変えずにアイコンを付けられます💫
nav li:has(> ul) > a::after {
content: ' ▼';
font-size: 0.75em;
}
「直接の子としてulをもつli」を:has()で選択し、そのリンクに::afterでアイコンを追加する書き方です✏️
#codegrid #css
ALT ダークテーマのナビゲーション例で、サブメニューを持つ項目（製品、サポート）に下向き三角▼が表示され、ノートPC・デスクトップ・よくある質問・お問い合わせなどの子項目を含むメニュー構成を示している。
【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
ALT カードのレイアウト例で、画像があるとサムネイルと本文が横並びの2カラムに、画像がないと本文だけの1カラムになることを示すダークテーマのUIサンプル。