モダンフロントエンドをリードする会社、ピクセルグリッドが運営するWeb制作者のための有料フロントエンド技術情報メディア「CodeGrid」です。過去記事からの HTML / CSS / JavaScriptなどに関するお役立ちTipsと、毎週の配信内容をポストしています。
- Tweets5.7K
- Following606
- Followers2.3K
- Likes3.6K
ALT HTMLのダイアログ要素を示すシンプルなコード例：<dialog><div>....</div></dialog>
ALT ダイアログ要素のonclickハンドラが、e.target === e.currentTarget のときに dialog.close() を呼んで背景クリックでダイアログを閉じることを示す JavaScript コードスニペット。
ALT dialog.onclick = (e) => { dialog.close(); };
ALT コード： <script type="module"> import confetti from 'https://esm.sh/[email protected]'; confetti(); </script>
ALT コード： <script type="module"> const a = 1; </script> <script type="module"> console.log( a ); // エラー：aが見つからない </script> <script type="module"> const a = 2; // エラーにならない </script>
ALT ダーク背景のタイトル画像で、中央に大きく「モデルとエフォートの考え方」、黄色の副題「利用制限とつきあうAIエージェントコーディング」があり、周囲にGPT・Claude・Luna・Solなどのモデル名と low/medium/high/xhighなどの性能ラベルが散在している。
ALT 管理画面のワイヤーフレームで、テストが複雑な操作になっているという図。左にページ一覧、中央に編集中のメインエリアと「ここに追加」や画像プレースホルダーのブロック、右に部品設定パネル（複製・削除など）、下に部品選択モーダルとページ削除確認ダイアログが表示されている。
ALT ダークテーマのナビゲーション例で、サブメニューを持つ項目（製品、サポート）に下向き三角▼が表示され、ノートPC・デスクトップ・よくある質問・お問い合わせなどの子項目を含むメニュー構成を示している。
ALT カードのレイアウト例で、画像があるとサムネイルと本文が横並びの2カラムに、画像がないと本文だけの1カラムになることを示すダークテーマのUIサンプル。
ALT 単一コードポイントU+304Cで表される「が」と、U+304B（か）＋結合濁点U+3099の2つのコードポイントで表される見た目は同じだが異なるコード列であることを示す図。