code
このページはテンプレートのソースをそのまま貼り付けてあるコピペ用のページです。 各コードブロック右上の「コピー」ボタンで全文をコピーできます。
TOPページ
<header class="site-header">
<div class="site-header-inner">
<a href="/index.html" class="site-name">site name</a>
<div class="drawer" id="drawer" popover="manual">
<button class="drawer-close" type="button" aria-label="メニューを閉じる">✕</button>
<nav class="site-nav" tabindex="-1" aria-label="サイト内ナビゲーション">
<ul>
<li><a href="/index.html">top</a></li>
<li><a href="/about.html">about</a></li>
<li><a href="/gallery/index.html">gallery</a></li>
<li><a href="/timeline.html">timeline</a></li>
<li><a href="/tags.html">tags</a></li>
<li><a href="/code.html">code</a></li>
</ul>
</nav>
</div>
<button
class="nav-toggle"
type="button"
aria-label="メニューを開く"
aria-expanded="false"
aria-controls="drawer"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M3 6h18M3 12h18M3 18h18" />
</svg>
</button>
</div>
</header>
<main class="site-main">
<section class="hero">
<h1 class="hero-title">site name</h1>
</section>
<section class="top-section">
<h2 class="section-title">latest works</h2>
<ul class="gallery-grid is-top">
<li class="gallery-item">
<a href="/gallery/001.html">
<span class="gallery-thumb">
<img
src="https://placehold.jp/24/1a1a1a/ffffff/600x600.png?text=art+01"
alt="作品サムネイル: 夜半"
>
</span>
<span class="gallery-caption">
<span class="gallery-caption-title">夜半</span>
<span class="gallery-caption-meta">2026.05.23</span>
</span>
</a>
</li>
<li class="gallery-item">
<a href="/gallery/001.html">
<span class="gallery-thumb">
<img
src="https://placehold.jp/24/333333/ffffff/600x600.png?text=art+02"
alt="作品サムネイル: 残響"
>
</span>
<span class="gallery-caption">
<span class="gallery-caption-title">残響</span>
<span class="gallery-caption-meta">2026.05.10</span>
</span>
</a>
</li>
<li class="gallery-item">
<a href="/gallery/001.html">
<span class="gallery-thumb">
<img
src="https://placehold.jp/24/555555/ffffff/600x600.png?text=art+03"
alt="作品サムネイル: 白昼"
>
</span>
<span class="gallery-caption">
<span class="gallery-caption-title">白昼</span>
<span class="gallery-caption-meta">2026.05.01</span>
</span>
</a>
</li>
</ul>
<p class="top-section-more">
<a href="/gallery/index.html">view gallery</a>
</p>
</section>
<section class="top-section">
<h2 class="section-title">about</h2>
<p>
モノクロのイラストを中心に公開している個人ポートフォリオです。
作品はギャラリーからご覧いただけます。
</p>
<p class="top-section-more">
<a href="/about.html">read about</a>
</p>
</section>
</main>自己紹介ページ
<header class="site-header">
<div class="site-header-inner">
<a href="/index.html" class="site-name">site name</a>
<div class="drawer" id="drawer" popover="manual">
<button class="drawer-close" type="button" aria-label="メニューを閉じる">✕</button>
<nav class="site-nav" tabindex="-1" aria-label="サイト内ナビゲーション">
<ul>
<li><a href="/index.html">top</a></li>
<li><a href="/about.html">about</a></li>
<li><a href="/gallery/index.html">gallery</a></li>
<li><a href="/timeline.html">timeline</a></li>
<li><a href="/tags.html">tags</a></li>
<li><a href="/code.html">code</a></li>
</ul>
</nav>
</div>
<button
class="nav-toggle"
type="button"
aria-label="メニューを開く"
aria-expanded="false"
aria-controls="drawer"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M3 6h18M3 12h18M3 18h18" />
</svg>
</button>
</div>
</header>
<main class="site-main">
<h1 class="page-title">about</h1>
<section class="about-section">
<h2 class="section-title">about</h2>
<p>
モノクロのイラストを中心に公開している個人ポートフォリオです。
商業活動とは無関係に、描きたいときに描いたものを並べています。
</p>
</section>
<section class="about-section">
<h2 class="section-title">about me</h2>
<dl class="about-list">
<dt>HN</dt>
<dd>(your name)</dd>
<dt>創作ジャンル</dt>
<dd>イラスト / モノクロ / ドローイング</dd>
<dt>連絡先</dt>
<dd><a href="mailto:hello@example.com">hello@example.com</a></dd>
</dl>
</section>
<section class="about-section">
<h2 class="section-title">notes</h2>
<p>
当サイトの画像の無断転載・無断利用はご遠慮ください。
作品にはフィクションが含まれます。実在の人物・団体とは関係ありません。
</p>
</section>
</main>ギャラリー一覧ページ
<header class="site-header">
<div class="site-header-inner">
<a href="/index.html" class="site-name">site name</a>
<div class="drawer" id="drawer" popover="manual">
<button class="drawer-close" type="button" aria-label="メニューを閉じる">✕</button>
<nav class="site-nav" tabindex="-1" aria-label="サイト内ナビゲーション">
<ul>
<li><a href="/index.html">top</a></li>
<li><a href="/about.html">about</a></li>
<li><a href="/gallery/index.html">gallery</a></li>
<li><a href="/timeline.html">timeline</a></li>
<li><a href="/tags.html">tags</a></li>
<li><a href="/code.html">code</a></li>
</ul>
</nav>
</div>
<button
class="nav-toggle"
type="button"
aria-label="メニューを開く"
aria-expanded="false"
aria-controls="drawer"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M3 6h18M3 12h18M3 18h18" />
</svg>
</button>
</div>
</header>
<main class="site-main">
<h1 class="page-title">gallery</h1>
<ul class="gallery-grid">
<li class="gallery-item">
<a href="/gallery/001.html">
<span class="gallery-thumb">
<img
src="https://placehold.jp/24/1a1a1a/ffffff/600x600.png?text=art+01"
alt="作品サムネイル: 夜半"
>
</span>
<span class="gallery-caption">
<span class="gallery-caption-title">夜半</span>
<span class="gallery-caption-meta">2026.05.23 / illustration</span>
</span>
</a>
</li>
<li class="gallery-item">
<a href="/gallery/001.html">
<span class="gallery-thumb">
<img
src="https://placehold.jp/24/333333/ffffff/600x600.png?text=art+02"
alt="作品サムネイル: 残響"
>
</span>
<span class="gallery-caption">
<span class="gallery-caption-title">残響</span>
<span class="gallery-caption-meta">2026.05.10 / illustration</span>
</span>
</a>
</li>
<li class="gallery-item">
<a href="/gallery/001.html">
<span class="gallery-thumb">
<img
src="https://placehold.jp/24/555555/ffffff/600x600.png?text=art+03"
alt="作品サムネイル: 白昼"
>
</span>
<span class="gallery-caption">
<span class="gallery-caption-title">白昼</span>
<span class="gallery-caption-meta">2026.05.01 / illustration</span>
</span>
</a>
</li>
<li class="gallery-item">
<a href="/gallery/001.html">
<span class="gallery-thumb">
<img
src="https://placehold.jp/24/222222/ffffff/600x600.png?text=art+04"
alt="作品サムネイル: 沈黙"
>
</span>
<span class="gallery-caption">
<span class="gallery-caption-title">沈黙</span>
<span class="gallery-caption-meta">2026.04.18 / illustration</span>
</span>
</a>
</li>
<li class="gallery-item">
<a href="/gallery/001.html">
<span class="gallery-thumb">
<img
src="https://placehold.jp/24/444444/ffffff/600x600.png?text=art+05"
alt="作品サムネイル: 余白"
>
</span>
<span class="gallery-caption">
<span class="gallery-caption-title">余白</span>
<span class="gallery-caption-meta">2026.04.02 / illustration</span>
</span>
</a>
</li>
<li class="gallery-item">
<a href="/gallery/001.html">
<span class="gallery-thumb">
<img
src="https://placehold.jp/24/666666/ffffff/600x600.png?text=art+06"
alt="作品サムネイル: 黎明"
>
</span>
<span class="gallery-caption">
<span class="gallery-caption-title">黎明</span>
<span class="gallery-caption-meta">2026.03.20 / illustration</span>
</span>
</a>
</li>
</ul>
<!-- 作品が無いときは上の <ul> を削除して以下を表示 -->
<!-- <p class="empty">作品はまだありません。</p> -->
</main>作品個別ページ
<header class="site-header">
<div class="site-header-inner">
<a href="/index.html" class="site-name">site name</a>
<div class="drawer" id="drawer" popover="manual">
<button class="drawer-close" type="button" aria-label="メニューを閉じる">✕</button>
<nav class="site-nav" tabindex="-1" aria-label="サイト内ナビゲーション">
<ul>
<li><a href="/index.html">top</a></li>
<li><a href="/about.html">about</a></li>
<li><a href="/gallery/index.html">gallery</a></li>
<li><a href="/timeline.html">timeline</a></li>
<li><a href="/tags.html">tags</a></li>
<li><a href="/code.html">code</a></li>
</ul>
</nav>
</div>
<button
class="nav-toggle"
type="button"
aria-label="メニューを開く"
aria-expanded="false"
aria-controls="drawer"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M3 6h18M3 12h18M3 18h18" />
</svg>
</button>
</div>
</header>
<main class="site-main">
<a href="/gallery/index.html" class="artwork-back">← back to gallery</a>
<article>
<figure class="artwork-figure">
<img
src="https://placehold.jp/24/1a1a1a/ffffff/1200x900.png?text=artwork"
alt="作品: 夜半"
>
</figure>
<h1 class="artwork-title">夜半</h1>
<div class="artwork-meta">
<time datetime="2026-05-23">2026.05.23</time>
<span class="media">illustration</span>
<span>CLIP STUDIO PAINT</span>
</div>
<p class="artwork-desc">
作品についての短いコメントをここに書きます。 二次創作 /
オリジナルの別、版権元、配布・利用の可否などを添えてください。
</p>
<!-- 前後ナビ: 最初の作品は prev を、最後の作品は next を is-disabled にする -->
<!-- href は対応する作品ページ（/gallery/002.html 等）に書き換える -->
<nav class="artwork-nav" aria-label="作品ナビゲーション">
<span class="artwork-nav-prev is-disabled">← prev</span>
<a href="/gallery/001.html" class="artwork-nav-next">next →</a>
</nav>
</article>
</main>つぶやきタイムラインページ：本文だけ
<h1 class="page-title">timeline</h1>
<ul class="timeline">
<li class="timeline-item is-pinned">
<div class="timeline-meta">
<span class="timeline-pin">pinned</span>
<time class="timeline-time" datetime="2026-06-14T10:30">2026.06.14 10:30</time>
</div>
<div class="timeline-body">
<p>
ピン留めしたつぶやき。固定したいお知らせや、いちばん上に置いておきたい一言をここに。
</p>
</div>
<div class="timeline-media">
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
</div>
</li>
<li class="timeline-item">
<div class="timeline-meta">
<time class="timeline-time" datetime="2026-06-13T22:05">2026.06.13 22:05</time>
</div>
<div class="timeline-body">
<p>画像を複数そえたつぶやき。日々の記録や作業の途中経過などを、写真と一緒に短く。</p>
</div>
<div class="timeline-media">
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
</div>
</li>
<li class="timeline-item">
<div class="timeline-meta">
<time class="timeline-time" datetime="2026-06-12T09:12">2026.06.12 09:12</time>
</div>
<div class="timeline-body">
<p>テキストだけの短いつぶやき。ひとことメモやリンクの共有に。</p>
</div>
</li>
<li class="timeline-item">
<div class="timeline-meta">
<time class="timeline-time" datetime="2026-06-10T18:40">2026.06.10 18:40</time>
</div>
<div class="timeline-body">
<p>画像を1枚そえたつぶやき。</p>
</div>
<div class="timeline-media">
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
</div>
</li>
</ul>
<!-- つぶやきが無いときは上の <ul> を削除して以下を表示 -->
<!-- <p class="empty">まだつぶやきはありません。</p> -->つぶやきタイムラインページ：body まるごと
<header class="site-header">
<div class="site-header-inner">
<a href="/index.html" class="site-name">site name</a>
<div class="drawer" id="drawer" popover="manual">
<button class="drawer-close" type="button" aria-label="メニューを閉じる">✕</button>
<nav class="site-nav" tabindex="-1" aria-label="サイト内ナビゲーション">
<ul>
<li><a href="/index.html">top</a></li>
<li><a href="/about.html">about</a></li>
<li><a href="/gallery/index.html">gallery</a></li>
<li><a href="/timeline.html">timeline</a></li>
<li><a href="/tags.html">tags</a></li>
<li><a href="/code.html">code</a></li>
</ul>
</nav>
</div>
<button
class="nav-toggle"
type="button"
aria-label="メニューを開く"
aria-expanded="false"
aria-controls="drawer"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M3 6h18M3 12h18M3 18h18" />
</svg>
</button>
</div>
</header>
<main class="site-main">
<h1 class="page-title">timeline</h1>
<ul class="timeline">
<li class="timeline-item is-pinned">
<div class="timeline-meta">
<span class="timeline-pin">pinned</span>
<time class="timeline-time" datetime="2026-06-14T10:30">2026.06.14 10:30</time>
</div>
<div class="timeline-body">
<p>
ピン留めしたつぶやき。固定したいお知らせや、いちばん上に置いておきたい一言をここに。
</p>
</div>
<div class="timeline-media">
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
</div>
</li>
<li class="timeline-item">
<div class="timeline-meta">
<time class="timeline-time" datetime="2026-06-13T22:05">2026.06.13 22:05</time>
</div>
<div class="timeline-body">
<p>画像を複数そえたつぶやき。日々の記録や作業の途中経過などを、写真と一緒に短く。</p>
</div>
<div class="timeline-media">
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
</div>
</li>
<li class="timeline-item">
<div class="timeline-meta">
<time class="timeline-time" datetime="2026-06-12T09:12">2026.06.12 09:12</time>
</div>
<div class="timeline-body">
<p>テキストだけの短いつぶやき。ひとことメモやリンクの共有に。</p>
</div>
</li>
<li class="timeline-item">
<div class="timeline-meta">
<time class="timeline-time" datetime="2026-06-10T18:40">2026.06.10 18:40</time>
</div>
<div class="timeline-body">
<p>画像を1枚そえたつぶやき。</p>
</div>
<div class="timeline-media">
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
</div>
</li>
</ul>
<!-- つぶやきが無いときは上の <ul> を削除して以下を表示 -->
<!-- <p class="empty">まだつぶやきはありません。</p> -->
</main>
<!-- つぶやき添付画像の拡大表示（PhotoSwipe v5）。各 .timeline-media を 1 ギャラリーとして扱う -->
<script type="module">
import PhotoSwipeLightbox from "https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe-lightbox.esm.min.js";
for (const media of document.querySelectorAll(".timeline-media")) {
const lightbox = new PhotoSwipeLightbox({
gallery: media,
children: "a",
pswpModule: () =>
import("https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js"),
});
lightbox.init();
}
</script>装飾用スタイル（共通）
<style>
/* ============================================================
010 Frame — モノクロ高コントラスト / sans-serif グリッドギャラリー
配色とフォントはこの :root で差し替え可能
============================================================ */
:root {
--accent: #e2402a;
--color-bg: #ffffff;
--color-surface: #f4f4f4;
--color-text: #111111;
--color-muted: #6b6b6b;
--color-line: #e4e4e4;
--content-width: 1120px;
--header-height: 56px;
--font-en: "Space Grotesk", system-ui, sans-serif;
--font-ja: "Zen Kaku Gothic New", system-ui, sans-serif;
--font-body: var(--font-ja);
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
:root {
--accent: #ff5a40;
--color-bg: #0e0e0e;
--color-surface: #1a1a1a;
--color-text: #f2f2f2;
--color-muted: #9a9a9a;
--color-line: #2a2a2a;
}
}
body {
font-family: var(--font-body);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.8;
font-weight: 400;
display: flex;
flex-direction: column;
min-height: 100dvh;
}
::selection {
background: var(--accent);
color: #fff;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
/* --- ヘッダー（上部固定） --- */
.site-header {
position: sticky;
top: 0;
z-index: 10;
background: var(--color-bg);
border-bottom: 1px solid var(--color-line);
}
.site-header-inner {
max-width: var(--content-width);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: var(--header-height);
padding: 0 1.25rem;
}
.site-name {
font-family: var(--font-en);
font-weight: 700;
font-size: 1.15rem;
letter-spacing: 0.02em;
color: var(--color-text);
}
.site-name:hover {
color: var(--accent);
text-decoration: none;
}
/* --- drawer: SP は右からスライド、PC は display:contents でフラット化 --- */
.drawer {
position: fixed;
inset: 0 0 0 auto;
width: min(20rem, 80dvw);
height: 100dvh;
margin: 0;
padding: 4rem 1.75rem 2rem;
background: var(--color-bg);
border: 0;
border-left: 1px solid var(--color-line);
transform: translateX(105%);
transition: transform 220ms ease;
overflow-y: auto;
}
.drawer:popover-open {
transform: translateX(0);
}
@starting-style {
.drawer:popover-open {
transform: translateX(105%);
}
}
.drawer::backdrop {
background: rgba(0, 0, 0, 0.5);
}
.site-nav ul {
list-style: none;
padding-left: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.site-nav a {
font-family: var(--font-en);
font-size: 1rem;
color: var(--color-text);
}
.site-nav a:hover {
color: var(--accent);
text-decoration: none;
}
.site-nav a[aria-current="page"] {
color: var(--accent);
}
.drawer-close {
position: absolute;
top: 0.85rem;
right: 1.1rem;
font-size: 1.25rem;
background: transparent;
border: 0;
color: var(--color-text);
cursor: pointer;
}
.nav-toggle {
background: transparent;
border: 0;
color: var(--color-text);
cursor: pointer;
padding: 0.25rem;
}
@media (min-width: 768px) {
.drawer {
display: contents;
}
.site-nav ul {
flex-direction: row;
gap: 1.5rem;
}
.site-nav a {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-muted);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
color: var(--color-text);
}
.drawer-close,
.nav-toggle {
display: none;
}
}
/* --- メイン --- */
.site-main {
flex: 1 0 auto;
width: 100%;
max-width: var(--content-width);
margin: 0 auto;
padding: 3rem 1.25rem 5rem;
}
/* --- 見出し h1-h6 視覚差別化 --- */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
line-height: 1.35;
}
h1 {
font-size: 2rem;
margin: 2.5rem 0 1rem;
padding-bottom: 0.4rem;
border-bottom: 2px solid var(--color-text);
}
h2 {
font-size: 1.5rem;
margin: 2.2rem 0 0.9rem;
}
h3 {
font-size: 1.2rem;
margin: 1.8rem 0 0.7rem;
padding-left: 0.6rem;
border-left: 3px solid var(--accent);
}
h4 {
font-size: 1.05rem;
margin: 1.5rem 0 0.6rem;
color: var(--color-muted);
}
h5 {
font-size: 0.95rem;
margin: 1.3rem 0 0.5rem;
font-family: var(--font-en);
text-transform: uppercase;
letter-spacing: 0.1em;
}
h6 {
font-size: 0.85rem;
margin: 1.2rem 0 0.4rem;
font-family: var(--font-en);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-muted);
}
/* --- hero / セクションタイトル / ページタイトル --- */
.hero {
padding: 2.5rem 0 3rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--color-line);
}
.hero-title {
margin: 0;
padding: 0;
border: 0;
display: block;
font-family: var(--font-en), var(--font-ja);
font-weight: 700;
font-size: clamp(2.8rem, 12vw, 5.5rem);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--color-text);
}
.section-title {
font-family: var(--font-en), var(--font-ja);
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 1.2rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--color-line);
}
.page-title {
font-size: 1.9rem;
margin: 0 0 2rem;
padding: 0;
border: 0;
}
.top-section {
margin-top: 3.5rem;
}
.top-section-more {
margin-top: 1.25rem;
font-family: var(--font-en);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* --- 段落・強調（em/strong/mark をそれぞれ別装飾） --- */
p {
margin: 0 0 1.2rem;
}
em {
font-style: italic;
color: var(--accent);
}
strong {
font-weight: 700;
border-bottom: 2px solid var(--accent);
}
mark {
background: color-mix(in oklab, var(--accent) 20%, transparent);
color: inherit;
padding: 0 0.15em;
}
/* --- リスト・引用・表・コード（ベース装飾は素タグに） --- */
ul,
ol {
padding-left: 1.4rem;
margin: 0 0 1.2rem;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li {
margin: 0.3rem 0;
}
dl {
margin: 0 0 1.2rem;
}
dt {
font-weight: 700;
}
dd {
margin: 0 0 0.6rem 1rem;
color: var(--color-muted);
}
blockquote {
margin: 0 0 1.2rem;
padding: 0.5rem 1.2rem;
border-left: 3px solid var(--accent);
color: var(--color-muted);
}
table {
width: 100%;
border-collapse: collapse;
margin: 0 0 1.2rem;
}
th,
td {
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-line);
text-align: left;
}
th {
background: var(--color-surface);
font-weight: 600;
}
hr {
border: 0;
border-top: 1px solid var(--color-line);
margin: 2.5rem 0;
}
code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.9em;
background: var(--color-surface);
padding: 0.1em 0.35em;
border-radius: 2px;
}
pre {
margin: 0 0 1.2rem;
padding: 0.9rem 1.1rem;
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: 2px;
overflow: auto;
}
pre code {
background: transparent;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
/* ===== フォーム要素 ===== */
label {
display: block;
font-size: 0.85rem;
color: var(--color-muted);
margin-bottom: 0.3em;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
-webkit-appearance: none;
border: 1px solid var(--color-line);
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.95rem;
padding: 0.5rem;
border-radius: 0;
}
textarea {
width: 100%;
min-height: 4rem;
margin: 0.5rem 0;
resize: vertical;
}
select {
padding-right: 1.75rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
}
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
-webkit-appearance: none;
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--color-line);
padding: 0.5rem 1.5rem;
font-family: var(--font-body);
font-size: 0.95rem;
cursor: pointer;
touch-action: manipulation;
letter-spacing: 0.05em;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
border-color: var(--accent);
}
.form-actions {
display: block;
text-align: center;
}
/* --- ギャラリー一覧（010 専用ホバー版グリッド） --- */
.gallery-grid {
list-style: none;
padding-left: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.gallery-grid.is-top {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.gallery-item {
margin: 0;
}
.gallery-item a {
position: relative;
display: block;
overflow: hidden;
border: 1px solid var(--color-line);
background: var(--color-surface);
color: inherit;
}
.gallery-item a:hover {
text-decoration: none;
}
.gallery-thumb {
display: block;
aspect-ratio: 1 / 1;
}
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gallery-caption {
position: absolute;
inset: auto 0 0 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 1.5rem 0.85rem 0.7rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
color: #fff;
}
.gallery-caption-title {
font-weight: 700;
font-size: 0.95rem;
}
.gallery-caption-meta {
font-family: var(--font-en);
font-size: 0.75rem;
opacity: 0.85;
}
/* hover 可能環境ではホバーで浮上、touch（hover 不可）では常時表示にフォールバック */
@media (hover: hover) {
.gallery-caption {
opacity: 0;
transform: translateY(0.5rem);
transition:
opacity 200ms ease,
transform 200ms ease;
}
.gallery-item a:hover .gallery-caption,
.gallery-item a:focus-visible .gallery-caption {
opacity: 1;
transform: translateY(0);
}
}
/* --- 作品詳細 --- */
.artwork-back {
display: inline-block;
font-family: var(--font-en);
font-size: 0.85rem;
color: var(--color-muted);
margin-bottom: 1.5rem;
}
.artwork-back:hover {
color: var(--color-text);
text-decoration: none;
}
.artwork-figure {
margin: 0 0 1.5rem;
padding: 0.75rem;
border: 1px solid var(--color-line);
background: var(--color-surface);
text-align: center;
}
.artwork-figure img {
max-width: 100%;
height: auto;
}
.artwork-title {
font-size: 1.8rem;
margin: 0 0 0.7rem;
padding: 0;
border: 0;
}
.artwork-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
font-family: var(--font-en);
font-size: 0.8rem;
color: var(--color-muted);
margin-bottom: 1.5rem;
}
.media {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.15rem 0.6rem;
border: 1px solid var(--color-line);
border-radius: 999px;
color: var(--color-text);
}
.artwork-desc {
max-width: 40rem;
color: var(--color-muted);
}
/* 前後ナビ（差し色を使用） */
.artwork-nav {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-line);
font-family: var(--font-en);
font-size: 0.9rem;
}
.artwork-nav-prev,
.artwork-nav-next {
color: var(--accent);
}
.artwork-nav-next {
margin-left: auto;
text-align: right;
}
.artwork-nav .is-disabled {
color: var(--color-muted);
pointer-events: none;
}
/* --- about --- */
.about-section {
margin-top: 2.5rem;
}
.about-list {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem 1.5rem;
margin: 0;
}
.about-list dt {
font-family: var(--font-en);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-muted);
}
.about-list dd {
margin: 0;
color: var(--color-text);
}
/* --- つぶやきタイムライン --- */
.timeline {
list-style: none;
padding-left: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.timeline-item {
padding: 1.75rem 0;
border-bottom: 1px solid var(--color-line);
}
.timeline-item:first-child {
padding-top: 0.5rem;
}
.timeline-item:last-child {
border-bottom: 0;
}
.timeline-item.is-pinned {
border-left: 2px solid var(--accent);
padding: 1.75rem 1.25rem;
background: var(--color-surface);
}
.timeline-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 1rem;
margin-bottom: 0.75rem;
font-family: var(--font-en);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-muted);
}
.timeline-pin {
font-size: 0.66rem;
letter-spacing: 0.16em;
padding: 0.12rem 0.5rem;
border: 1px solid var(--accent);
border-radius: 999px;
color: var(--accent);
}
.timeline-time {
color: var(--color-muted);
}
.timeline-body {
line-height: 1.8;
}
.timeline-body p {
margin: 0 0 0.75em;
text-wrap: pretty;
}
.timeline-body p:last-child {
margin-bottom: 0;
}
.timeline-media {
margin-top: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.5rem;
}
/* 画像が 1 枚のときは横いっぱいに引き伸ばさない */
.timeline-media:has(a:only-child) {
grid-template-columns: minmax(0, 320px);
}
.timeline-media a {
display: block;
}
.timeline-media img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--color-line);
}
/* --- 一覧が空のとき --- */
.empty {
padding: 2rem;
border: 1px dashed var(--color-line);
color: var(--color-muted);
text-align: center;
}
</style>動き（メニュー開閉など）
<script>
function init() {
const drawer = document.getElementById("drawer");
const openBtn = document.querySelector(".nav-toggle");
const closeBtn = drawer?.querySelector(".drawer-close");
const sheet = drawer?.querySelector(".site-nav");
const main = document.querySelector("main");
if (drawer && openBtn && sheet && main) {
function openDrawer() {
drawer.showPopover();
document.documentElement.style.overflow = "hidden";
document.body.style.overflow = "hidden";
main.inert = true;
openBtn.setAttribute("aria-expanded", "true");
requestAnimationFrame(() => sheet.focus());
}
function closeDrawer() {
drawer.hidePopover();
document.documentElement.style.overflow = "";
document.body.style.overflow = "";
main.inert = false;
openBtn.setAttribute("aria-expanded", "false");
}
openBtn.addEventListener("click", () => {
if (drawer.matches(":popover-open")) {
closeDrawer();
} else {
openDrawer();
}
});
closeBtn?.addEventListener("click", closeDrawer);
// backdrop tap または drawer 内の sheet 外領域 click で close
drawer.addEventListener("click", (event) => {
if (!sheet.contains(event.target)) closeDrawer();
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape" && drawer.matches(":popover-open")) {
closeDrawer();
}
});
}
// sticky header 不透明化の fallback (animation-timeline 未対応時)
if (!CSS.supports("animation-timeline: scroll()")) {
const header = document.querySelector(".site-header");
if (header) {
const onScroll = () => {
header.classList.toggle("scrolled", window.scrollY > 80);
};
document.addEventListener("scroll", onScroll, { passive: true });
onScroll();
}
}
}
// head / body どちらに置いても動くよう DOM 構築完了を待つ
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
</script>