> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.
# アーティファクトとは？
> アーティファクトはReplitで公開できる成果物—Webアプリ、モバイルアプリ、スライドデッキ、アニメーション、データビジュアライゼーション、3Dゲーム、デプロイして共有できるデザイン—です。
export const ArtifactGrid = () => {
if (typeof document !== "undefined" && !document.getElementById("artifact-grid-styles")) {
const style = document.createElement("style");
style.id = "artifact-grid-styles";
style.textContent = `
.artifact-grid-wrap {
--ag-bg: var(--replit-docs-bg, #F6F6F4);
--ag-icon-bg: var(--replit-docs-bg-elevated, #F1F1EE);
--ag-icon-border: var(--replit-docs-border, #DEDAD5);
--ag-text: var(--replit-docs-text-muted, #5C5C5C);
--ag-icon-color: var(--replit-docs-text-muted, #5C5C5C);
}
.dark .artifact-grid-wrap,
html.dark .artifact-grid-wrap,
[data-theme="dark"] .artifact-grid-wrap {
--ag-bg: var(--replit-docs-bg, #1E1E1F);
--ag-icon-bg: var(--replit-docs-bg-elevated, #222223);
--ag-icon-border: var(--replit-docs-border, #39393D);
--ag-text: var(--replit-docs-text-muted, #B8B8BE);
--ag-icon-color: var(--replit-docs-text-muted, #B8B8BE);
}
@keyframes ag-fade-in {
from { transform: translateY(8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@media (hover: hover) {
.artifact-grid-wrap .ag-icon-btn:hover {
background: var(--ag-icon-border) !important;
}
}
`;
document.head.appendChild(style);
}
const types = [{
name: "Web",
icon:
}, {
name: "Mobile",
icon:
}, {
name: "Slides",
icon:
}, {
name: "Design",
icon:
}, {
name: "Animation",
icon:
}, {
name: "Data Viz",
icon:
}, {
name: "3D Game",
icon:
}];
const rows = [types.slice(0, 4), types.slice(4, 7)];
const iconBtnStyle = {
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "48px",
height: "48px",
border: "1px solid var(--ag-icon-border)",
borderRadius: "12px",
background: "var(--ag-icon-bg)",
cursor: "default",
color: "var(--ag-icon-color)",
padding: 0,
transition: "background 120ms ease-out",
flexShrink: 0
};
return
{rows.map((row, ri) =>
)}