<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="preconnect" href="https://cloudcdn.pro" crossorigin />
<title>記事</title>
<meta name="author" content="jane.doe@kaishi.jp (Jane Doe)">
<meta name="description" content="素晴らしいウェブサイトの構築に必要なすべてがここにあります。">
<meta name="keywords" content="kaishi スターターテンプレート, static site generator, 静的サイトジェネレーター, スターターテンプレート, bootstrap, bootstrap css, bootstrap javascript, コンテンツセキュリティポリシー, Open Graph メタタグ, レスポンシブナビゲーションバー, schema.org メタタグ">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="accessibility" content="ARIA" />
<meta name="accessibility" content="fullKeyboardControl" />
<meta name="accessibility" content="noFlashingHazard" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Kaishi">
<meta name="mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data: https:; style-src 'self' 'unsafe-inline'; font-src 'self'; media-src 'self';" />
<link rel="alternate" href="https://kaishi.jp" hreflang="ja" />
<link rel="canonical" href="https://kaishi.jp" />
<link rel="icon" type="image/x-icon" href="https://cloudcdn.pro/kaishi/images/favicon.ico" />
<link rel="apple-touch-icon" href="https://cloudcdn.pro/kaishi/images/icons/192x192.png" sizes="192x192" />
<link rel="icon" type="image/png" href="https://cloudcdn.pro/kaishi/images/icons/16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="https://cloudcdn.pro/kaishi/images/icons/32x32.png" sizes="32x32" />
<meta name="theme-color" content="rgb(143, 250, 113)" />
<link rel="manifest" href="/ja/manifest.json" />
<link rel="alternate" type="application/rss+xml" href="/ja/rss.xml" />
<style>
:root{--vp-bg:#fff;--vp-bs:#f6f6f7;--vp-ba:#f6f6f7;--vp-t1:#3c3c43;--vp-t2:#4a4a52;--vp-t3:#595960;--vp-br:#166534;--vp-bl:#14532d;--vp-bd:rgba(60,60,67,.24);--vp-nh:64px}
[data-theme="dark"]{--vp-bg:#1b1b1f;--vp-bs:#202127;--vp-ba:#161618;--vp-t1:#f5f5f7;--vp-t2:#cccccf;--vp-t3:#a1a1a8;--vp-br:#86efac;--vp-bl:#bbf7d0;--vp-bd:rgba(180,180,190,.32)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--vp-bg:#1b1b1f;--vp-bs:#202127;--vp-ba:#161618;--vp-t1:#f5f5f7;--vp-t2:#cccccf;--vp-t3:#a1a1a8;--vp-br:#86efac;--vp-bl:#bbf7d0;--vp-bd:rgba(180,180,190,.32)}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.7;color:var(--vp-t1);background:var(--vp-bg)}
a{color:var(--vp-br);text-decoration:none}
a:hover{color:var(--vp-bl)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{font-weight:600;color:var(--vp-t1)}
h1{font-size:clamp(1.75rem,4vw,2.5rem);margin:1.5rem 0 1rem}
h2{font-size:clamp(1.35rem,3vw,1.75rem);margin:2rem 0 .75rem;padding-bottom:.75rem;border-bottom:1px solid var(--vp-bd)}
h3{font-size:1.25rem;margin:1.5rem 0 .5rem}
p{margin:.75rem 0}
strong{font-weight:600}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875em}
pre{background:var(--vp-bs);border:1px solid var(--vp-bd);border-radius:8px;color:var(--vp-t1);overflow-x:auto;padding:1rem 1.25rem}
code{background:var(--vp-bs);border-radius:4px;padding:.15em .35em}
pre code{background:none;padding:0}
.skip-link{position:absolute;top:-100%;left:1rem;background:var(--vp-br);color:#fff;padding:.5rem 1rem;border-radius:8px;z-index:1000;font-weight:600}
.skip-link:focus{top:1rem;outline:none}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--vp-nh);background:var(--vp-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--vp-bd)}
.nav-inner{display:flex;align-items:center;height:var(--vp-nh);max-width:1376px;margin:0 auto;padding:0 24px}
.nav-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--vp-t1);font-weight:600;flex-shrink:0}
.nav-brand img{width:28px;height:28px}
.nav-search{display:flex;align-items:center;gap:8px;border:1px solid var(--vp-bd);border-radius:8px;padding:6px 14px;cursor:pointer;background:none;color:var(--vp-t3);font-size:14px;margin-left:auto;margin-right:16px}
.nav-search:hover{border-color:var(--vp-br)}
.nav-search svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
.nav-search kbd{font-size:11px;border:1px solid var(--vp-bd);border-radius:4px;padding:1px 5px;margin-left:8px;background:var(--vp-bs);color:var(--vp-t3)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:4px 12px;color:var(--vp-t1);font-size:14px;font-weight:500}
.nav-links a:hover{color:var(--vp-br)}
.nav-controls{display:flex;align-items:center;gap:8px;margin-left:16px;flex-shrink:0}
.lang-btn{position:relative;background:none;border:none;cursor:pointer;color:var(--vp-t2);padding:4px;display:flex;align-items:center}
.lang-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none}
.lang-dropdown{display:none;position:absolute;top:calc(100% + 8px);inset-inline-end:0;background:var(--vp-bg);border:1px solid var(--vp-bd);border-radius:8px;padding:8px;min-width:480px;max-height:70vh;overflow-y:auto;z-index:200;box-shadow:0 8px 24px #00000026}.lang-menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.lang-menu-grid a{display:flex;align-items:center;gap:6px;padding:6px 10px;color:var(--vp-t1);font-size:12px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lang-menu-grid a:hover{background:var(--vp-bs)}.lang-menu-grid .flag{font-size:14px;flex-shrink:0}.lang-btn{gap:4px;font-size:13px;font-weight:500}.lang-btn .lang-code{font-variant:all-small-caps;letter-spacing:.5px}.mobile-menu{display:none}.mobile-lang{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;padding-top:12px;border-top:1px solid var(--vp-bd);margin-top:12px}.mobile-lang a{display:flex;align-items:center;gap:6px;padding:8px;color:var(--vp-t1);font-size:13px;border-bottom:none}@media(max-width:768px){.lang-dropdown{min-width:280px;inset-inline-end:8px}.lang-menu-grid{grid-template-columns:repeat(2,1fr)}}
.lang-dropdown.open{display:block}
.lang-dropdown a{display:block;padding:6px 12px;color:var(--vp-t1);font-size:13px;border-radius:4px}
.lang-dropdown a:hover{background:var(--vp-bs)}
.theme-switch{position:relative;width:40px;height:22px;background:var(--vp-bs);border:1px solid var(--vp-bd);border-radius:11px;cursor:pointer;padding:0;flex-shrink:0}
.theme-switch::before{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--vp-t2);transition:transform .25s}
[data-theme="dark"] .theme-switch::before,.theme-switch.dark::before{transform:translateX(18px)}
.theme-switch .sun-svg,.theme-switch .moon-svg{position:absolute;top:3px;width:14px;height:14px;stroke:var(--vp-t3);stroke-width:2;fill:none}
.theme-switch .sun-svg{left:3px}
.theme-switch .moon-svg{right:3px}
.menu-toggle{display:none;background:none;border:1px solid var(--vp-bd);border-radius:6px;padding:4px 6px;cursor:pointer;color:var(--vp-t1)}.lang-btn,.menu-toggle{min-width:44px;min-height:44px}.theme-switch{position:relative}.theme-switch::after{content:'';position:absolute;inset:-11px;}
.menu-toggle svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}
.hero{padding:calc(var(--vp-nh) + 60px) 24px 80px;text-align:center;max-width:960px;margin:0 auto}
.hero-name{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.1;background:linear-gradient(120deg,var(--vp-br) 30%,#4ade80);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}
.hero-tagline{font-size:clamp(1rem,2vw,1.25rem);color:var(--vp-t2);line-height:1.6;max-width:560px;margin:0 auto 2rem}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-brand,.btn-alt,.btn-submit{display:inline-flex;align-items:center;padding:10px 24px;border-radius:20px;font-size:15px;cursor:pointer;border:none}
.btn-brand,.btn-submit{background:var(--vp-br);color:#fff;font-weight:600}
.btn-brand:hover,.btn-submit:hover{background:var(--vp-bl)}
.btn-alt{background:transparent;color:var(--vp-t1);border:1px solid var(--vp-bd);font-weight:500}
.btn-alt:hover{border-color:var(--vp-br)}
.hero-banner{margin:2rem auto 0;max-width:720px;border-radius:12px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.12)}
.hero-banner img{width:100%;display:block}
.content-wrap{max-width:740px;margin:0 auto;padding:48px 24px;margin-top:var(--vp-nh)}
.content{font-size:16px;line-height:1.7;color:var(--vp-t1)}
.content ul,.content ol{padding-left:1.25rem;margin:.75rem 0}
.content li{margin:.25rem 0}
.breadcrumb{font-size:14px;color:var(--vp-t3);margin-bottom:24px}
.breadcrumb a{color:var(--vp-br)}
.breadcrumb span{margin:0 6px}
.article-meta{font-size:14px;color:var(--vp-t2);margin-bottom:2rem;display:flex;gap:12px;align-items:center}
.footer{background:var(--vp-ba);padding:48px 24px 24px}
.footer-inner{max-width:1152px;margin:0 auto}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:32px}
.footer-heading{font-size:14px;font-weight:700;color:var(--vp-t1);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
.footer-col a{display:block;color:var(--vp-t2);font-size:14px;padding:3px 0}
.footer-col a:hover{color:var(--vp-br)}
.footer-bottom{border-top:1px solid var(--vp-bd);padding-top:20px;text-align:center;color:var(--vp-t3);font-size:13px}
.form-card{background:var(--vp-bs);border:1px solid var(--vp-bd);border-radius:12px;padding:2rem;max-width:520px;margin:2rem auto 0}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:1.25rem}
.form-group label{font-weight:600;font-size:14px;color:var(--vp-t1)}
.form-group input,.form-group select,.form-group textarea{background:var(--vp-bg);color:var(--vp-t1);border:1px solid var(--vp-bd);border-radius:8px;padding:8px 12px;font-family:inherit;font-size:15px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--vp-br);outline:2px solid var(--vp-br);outline-offset:1px}
.form-group textarea{resize:vertical;min-height:120px}
:focus-visible{outline:2px solid var(--vp-br);outline-offset:2px}
.navbar-nav{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.nav-item{display:inline-flex}
.nav-item a{display:block;padding:4px 12px;color:var(--vp-t1);font-size:14px;font-weight:500;text-decoration:none;text-transform:none}
.nav-item a:hover{color:var(--vp-br)}
.nav-item a.text-uppercase{text-transform:none}
.nav-item a.p-2{padding:4px 12px}
.ms-auto{margin-left:auto}.mb-2{margin-bottom:0}.mb-lg-0{margin-bottom:0}
#ssg-search-btn{display:none!important}
.content{overflow:hidden}
.content img{max-width:100%;height:auto;border-radius:8px;margin:1.5rem 0;display:block}
.content .img-fluid{max-width:100%;height:auto;border-radius:8px}
.content .w-50{max-width:50%}
.content .float-start{float:left;margin:0 1.5rem 1rem 0}
.content .float-end{float:right;margin:0 0 1rem 1.5rem}
.content .p-5{padding:0}
.content .mb-3{margin-bottom:1rem}
.content .fw-bold{font-weight:600}
.content .text-danger{color:var(--vp-br)}
.content .display-1{font-size:2rem;font-weight:600}
.content::after{content:"";display:table;clear:both}
@media(max-width:768px){.content .w-50{max-width:100%}.content .float-start,.content .float-end{float:none;margin:1rem 0}.nav-links,.nav-search,.navbar-nav{display:none}.menu-toggle{display:flex}.nav-controls{margin-left:auto}.nav-controls .lang-btn{display:none}.mobile-menu{display:none;position:fixed;top:var(--vp-nh);left:0;right:0;bottom:0;background:var(--vp-bg);padding:24px;z-index:99;overflow-y:auto}.mobile-menu.open{display:block}.mobile-menu a,.mobile-menu .nav-item a{display:block;padding:10px 0;font-size:15px;color:var(--vp-t1);border-bottom:1px solid var(--vp-bd)}.mobile-menu .navbar-nav{display:block}.mobile-menu .nav-item{display:block}.hero{padding:calc(var(--vp-nh) + 32px) 16px 48px}.hero-name{font-size:clamp(1.75rem,6vw,2.5rem)}.content-wrap{padding:32px 16px}.footer-cols{grid-template-columns:1fr;gap:24px}}
</style>
<meta property="og:title" content="記事">
<meta property="og:description" content="ホーム &gt; ブログ &gt; 記事 記事 投稿者: jane.doe@kaishi.jp (Jane Doe) &middot; Wed, 01 Jan 2025 01:01:01 GMT ![輝く自然][00]">
<meta property="og:type" content="article">
<meta property="og:url" content="https://kaishi.jp">
<meta property="og:locale" content="ja">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="記事">
<meta name="twitter:description" content="ホーム &gt; ブログ &gt; 記事 記事 投稿者: jane.doe@kaishi.jp (Jane Doe) &middot; Wed, 01 Jan 2025 01:01:01 GMT ![輝く自然][00]">
<link rel="alternate" hreflang="ar" href="https://example.com/ar/posts/index.html" />
<link rel="alternate" hreflang="bn" href="https://example.com/bn/posts/index.html" />
<link rel="alternate" hreflang="cs" href="https://example.com/cs/posts/index.html" />
<link rel="alternate" hreflang="de" href="https://example.com/de/posts/index.html" />
<link rel="alternate" hreflang="en" href="https://example.com/en/posts/index.html" />
<link rel="alternate" hreflang="es" href="https://example.com/es/posts/index.html" />
<link rel="alternate" hreflang="ha" href="https://example.com/ha/posts/index.html" />
<link rel="alternate" hreflang="he" href="https://example.com/he/posts/index.html" />
<link rel="alternate" hreflang="hi" href="https://example.com/hi/posts/index.html" />
<link rel="alternate" hreflang="id" href="https://example.com/id/posts/index.html" />
<link rel="alternate" hreflang="it" href="https://example.com/it/posts/index.html" />
<link rel="alternate" hreflang="ja" href="https://example.com/ja/posts/index.html" />
<link rel="alternate" hreflang="ko" href="https://example.com/ko/posts/index.html" />
<link rel="alternate" hreflang="nl" href="https://example.com/nl/posts/index.html" />
<link rel="alternate" hreflang="pl" href="https://example.com/pl/posts/index.html" />
<link rel="alternate" hreflang="pt" href="https://example.com/pt/posts/index.html" />
<link rel="alternate" hreflang="ro" href="https://example.com/ro/posts/index.html" />
<link rel="alternate" hreflang="ru" href="https://example.com/ru/posts/index.html" />
<link rel="alternate" hreflang="sv" href="https://example.com/sv/posts/index.html" />
<link rel="alternate" hreflang="th" href="https://example.com/th/posts/index.html" />
<link rel="alternate" hreflang="tl" href="https://example.com/tl/posts/index.html" />
<link rel="alternate" hreflang="tr" href="https://example.com/tr/posts/index.html" />
<link rel="alternate" hreflang="uk" href="https://example.com/uk/posts/index.html" />
<link rel="alternate" hreflang="vi" href="https://example.com/vi/posts/index.html" />
<link rel="alternate" hreflang="yo" href="https://example.com/yo/posts/index.html" />
<link rel="alternate" hreflang="zh" href="https://example.com/zh/posts/index.html" />
<link rel="alternate" hreflang="zh-tw" href="https://example.com/zh-tw/posts/index.html" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/posts/index.html" />
</head>
<body id="page-top" itemscope itemtype="http://schema.org/WebPage">
<a class="skip-link" href="#main">コンテンツへスキップ</a>
<nav class="nav" id="mainNav" itemscope itemtype="http://schema.org/SiteNavigationElement" aria-label="メインナビゲーション">
<div class="nav-inner">
<a class="nav-brand" href="/ja/" aria-label="静的サイト用スターターテンプレート Kaishi のロゴ - ホーム">
<img width="100" height="33" src="https://cloudcdn.pro/kaishi/v1/logos/kaishi.svg" alt="静的サイト用スターターテンプレート Kaishi のロゴ" loading="lazy" decoding="async" />
<span itemprop="name">Kaishi</span>
</a>
<button class="nav-search" type="button" aria-label="検索">
<svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<span>検索</span>
<kbd>⌘K</kbd>
</button>
<div class="nav-links" id="navLinks">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0"><li class="nav-item"><a class="text-uppercase p-2" title="機能" aria-label="機能" href="/features/index.html">機能</a></li><li class="nav-item"><a class="text-uppercase p-2" title="記事" aria-label="記事" href="/posts/index.html">記事</a></li><li class="nav-item"><a class="text-uppercase p-2" title="タグで探す" aria-label="タグで探す" href="/tags/index.html">タグで探す</a></li><li class="nav-item"><a class="text-uppercase p-2" title="お問い合わせ" aria-label="お問い合わせ" href="/contact/index.html">お問い合わせ</a></li></ul>
</div>
<div class="nav-controls">
<div style="position:relative">
<button class="lang-btn" type="button" aria-label="Select language" id="langToggle"><span aria-hidden="true">🌐</span> <span class="lang-code">JA</span></button>
<div class="lang-dropdown" id="langDropdown">
<div class="lang-menu-grid">
<a href="/" hreflang="en" lang="en"><span class="flag">🇬🇧</span> English</a>
<a href="/fr/" hreflang="fr" lang="fr"><span class="flag">🇫🇷</span> Français</a>
<a href="/ar/" hreflang="ar" lang="ar"><span class="flag">🇸🇦</span> العربية</a>
<a href="/bn/" hreflang="bn" lang="bn"><span class="flag">🇧🇩</span> বাংলা</a>
<a href="/cs/" hreflang="cs" lang="cs"><span class="flag">🇨🇿</span> Čeština</a>
<a href="/de/" hreflang="de" lang="de"><span class="flag">🇩🇪</span> Deutsch</a>
<a href="/es/" hreflang="es" lang="es"><span class="flag">🇪🇸</span> Español</a>
<a href="/ha/" hreflang="ha" lang="ha"><span class="flag">🇳🇬</span> Hausa</a>
<a href="/he/" hreflang="he" lang="he"><span class="flag">🇮🇱</span> עברית</a>
<a href="/hi/" hreflang="hi" lang="hi"><span class="flag">🇮🇳</span> हिन्दी</a>
<a href="/id/" hreflang="id" lang="id"><span class="flag">🇮🇩</span> Indonesia</a>
<a href="/it/" hreflang="it" lang="it"><span class="flag">🇮🇹</span> Italiano</a>
<a href="/ja/" hreflang="ja" lang="ja"><span class="flag">🇯🇵</span> 日本語</a>
<a href="/ko/" hreflang="ko" lang="ko"><span class="flag">🇰🇷</span> 한국어</a>
<a href="/nl/" hreflang="nl" lang="nl"><span class="flag">🇳🇱</span> Nederlands</a>
<a href="/pl/" hreflang="pl" lang="pl"><span class="flag">🇵🇱</span> Polski</a>
<a href="/pt/" hreflang="pt" lang="pt"><span class="flag">🇵🇹</span> Português</a>
<a href="/ro/" hreflang="ro" lang="ro"><span class="flag">🇷🇴</span> Română</a>
<a href="/ru/" hreflang="ru" lang="ru"><span class="flag">🇷🇺</span> Русский</a>
<a href="/sv/" hreflang="sv" lang="sv"><span class="flag">🇸🇪</span> Svenska</a>
<a href="/th/" hreflang="th" lang="th"><span class="flag">🇹🇭</span> ไทย</a>
<a href="/tl/" hreflang="tl" lang="tl"><span class="flag">🇵🇭</span> Filipino</a>
<a href="/tr/" hreflang="tr" lang="tr"><span class="flag">🇹🇷</span> Türkçe</a>
<a href="/uk/" hreflang="uk" lang="uk"><span class="flag">🇺🇦</span> Українська</a>
<a href="/vi/" hreflang="vi" lang="vi"><span class="flag">🇻🇳</span> Tiếng Việt</a>
<a href="/yo/" hreflang="yo" lang="yo"><span class="flag">🇳🇬</span> Yorùbá</a>
<a href="/zh/" hreflang="zh" lang="zh"><span class="flag">🇨🇳</span> 简体中文</a>
<a href="/zh-tw/" hreflang="zh-tw" lang="zh-tw"><span class="flag">🇹🇼</span> 繁體中文</a>
</div>
</div>
</div>
<button class="theme-switch" type="button" aria-label="ダークモードを切り替え" id="themeToggle">
<svg aria-hidden="true" class="sun-svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
<svg aria-hidden="true" class="moon-svg" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
</button>
</div>
<button class="menu-toggle" type="button" aria-controls="mobileMenu" aria-expanded="false" aria-label="ナビゲーションを切り替え">
<svg aria-hidden="true" viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
</div>
</nav>
<div class="mobile-menu" id="mobileMenu" role="navigation" aria-label="モバイルナビゲーション">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0"><li class="nav-item"><a class="text-uppercase p-2" title="機能" aria-label="機能" href="/features/index.html">機能</a></li><li class="nav-item"><a class="text-uppercase p-2" title="記事" aria-label="記事" href="/posts/index.html">記事</a></li><li class="nav-item"><a class="text-uppercase p-2" title="タグで探す" aria-label="タグで探す" href="/tags/index.html">タグで探す</a></li><li class="nav-item"><a class="text-uppercase p-2" title="お問い合わせ" aria-label="お問い合わせ" href="/contact/index.html">お問い合わせ</a></li></ul>
<div class="mobile-lang">
<a href="/" hreflang="en" lang="en"><span class="flag">🇬🇧</span> English</a>
<a href="/fr/" hreflang="fr" lang="fr"><span class="flag">🇫🇷</span> Français</a>
<a href="/ar/" hreflang="ar" lang="ar"><span class="flag">🇸🇦</span> العربية</a>
<a href="/bn/" hreflang="bn" lang="bn"><span class="flag">🇧🇩</span> বাংলা</a>
<a href="/cs/" hreflang="cs" lang="cs"><span class="flag">🇨🇿</span> Čeština</a>
<a href="/de/" hreflang="de" lang="de"><span class="flag">🇩🇪</span> Deutsch</a>
<a href="/es/" hreflang="es" lang="es"><span class="flag">🇪🇸</span> Español</a>
<a href="/ha/" hreflang="ha" lang="ha"><span class="flag">🇳🇬</span> Hausa</a>
<a href="/he/" hreflang="he" lang="he"><span class="flag">🇮🇱</span> עברית</a>
<a href="/hi/" hreflang="hi" lang="hi"><span class="flag">🇮🇳</span> हिन्दी</a>
<a href="/id/" hreflang="id" lang="id"><span class="flag">🇮🇩</span> Indonesia</a>
<a href="/it/" hreflang="it" lang="it"><span class="flag">🇮🇹</span> Italiano</a>
<a href="/ja/" hreflang="ja" lang="ja"><span class="flag">🇯🇵</span> 日本語</a>
<a href="/ko/" hreflang="ko" lang="ko"><span class="flag">🇰🇷</span> 한국어</a>
<a href="/nl/" hreflang="nl" lang="nl"><span class="flag">🇳🇱</span> Nederlands</a>
<a href="/pl/" hreflang="pl" lang="pl"><span class="flag">🇵🇱</span> Polski</a>
<a href="/pt/" hreflang="pt" lang="pt"><span class="flag">🇵🇹</span> Português</a>
<a href="/ro/" hreflang="ro" lang="ro"><span class="flag">🇷🇴</span> Română</a>
<a href="/ru/" hreflang="ru" lang="ru"><span class="flag">🇷🇺</span> Русский</a>
<a href="/sv/" hreflang="sv" lang="sv"><span class="flag">🇸🇪</span> Svenska</a>
<a href="/th/" hreflang="th" lang="th"><span class="flag">🇹🇭</span> ไทย</a>
<a href="/tl/" hreflang="tl" lang="tl"><span class="flag">🇵🇭</span> Filipino</a>
<a href="/tr/" hreflang="tr" lang="tr"><span class="flag">🇹🇷</span> Türkçe</a>
<a href="/uk/" hreflang="uk" lang="uk"><span class="flag">🇺🇦</span> Українська</a>
<a href="/vi/" hreflang="vi" lang="vi"><span class="flag">🇻🇳</span> Tiếng Việt</a>
<a href="/yo/" hreflang="yo" lang="yo"><span class="flag">🇳🇬</span> Yorùbá</a>
<a href="/zh/" hreflang="zh" lang="zh"><span class="flag">🇨🇳</span> 简体中文</a>
<a href="/zh-tw/" hreflang="zh-tw" lang="zh-tw"><span class="flag">🇹🇼</span> 繁體中文</a>
</div>
</div>
<main id="main" class="content-wrap" aria-label="メインコンテンツ">
<div class="breadcrumb">
<a href="/ja/">ホーム</a><span>></span><a href="/ja/posts/index.html">ブログ</a><span>></span><span>記事</span>
</div>
<h1 class="page-title">記事</h1>
<article class="content">
<div class="article-meta">
<span>投稿者: jane.doe@kaishi.jp (Jane Doe)</span> ·
<time datetime="Wed, 01 Jan 2025 01:01:01 GMT">Wed, 01 Jan 2025 01:01:01 GMT</time>
</div>
<p>![輝く自然][00]</p>
<h2>スターターテンプレート</h2>
<p>ページでもウェブサイトでも、すべてのスターターテンプレートは同じ原則と機能を用いてゼロから構築されています。そのため、簡単に組み合わせて、独自のカスタムレイアウトやコンテンツを作成できます。</p>
<h3>ページ</h3>
<p>ウェブサイトやウェブアプリケーションの構築には、当社のスターターテンプレートのいずれかを使って SSG を始めましょう。テンプレートは柔軟性があり、変更しやすいように設計されています。</p>
<h4>テンプレートの特徴</h4>
<ul>
<li><strong>レスポンシブデザイン</strong>: すべてのテンプレートは完全にレスポンシブで、どんなデバイスでも美しく表示されます。</li>
<li><strong>モジュラーコンポーネント</strong>: テンプレートはモジュラーコンポーネントで構築されており、カスタマイズが容易です。</li>
<li><strong>モダンな美学</strong>: 各テンプレートは、モダンなデザイントレンドを念頭に置いて作られています。</li>
</ul>
<h4>はじめに</h4>
<p>まず、プロジェクトのニーズに合ったテンプレートを選択します。コンテンツ、スタイル、機能でカスタマイズしましょう。</p>
<ol>
<li><strong>テンプレートを選ぶ</strong>: コレクションを閲覧し、出発点を選びます。</li>
<li><strong>カスタマイズ</strong>: レイアウトを変更し、コンテンツを追加し、スタイルを調整します。</li>
<li><strong>公開</strong>: 新しいウェブサイトやウェブアプリを世界に向けてデプロイします。</li>
</ol>
<h3>ウェブサイト</h3>
<p>ウェブサイトをゼロから構築するのは大変な作業ですが、当社のスターターテンプレートを使えばシンプルで簡単になります。</p>
<p>![輝く自然][00]</p>
<h3>なぜ当社のテンプレートを使うのか</h3>
<ul>
<li><strong>スピード</strong>: 既成のデザインで開発を素早く始められます。</li>
<li><strong>品質</strong>: 高品質で十分にテストされたテンプレートが信頼性を保証します。</li>
<li><strong>サポート</strong>: ご質問や問題があれば、当社のチームがお手伝いします。</li>
</ul>
<h3>カスタマイズ</h3>
<p>特定のニーズに合わせてテンプレートをカスタマイズできます。可能性は無限大です！</p>
<h4>カスタマイズのヒント</h4>
<ul>
<li><strong>構造を理解する</strong>: テンプレートの構造とコンポーネントに慣れ親しみましょう。</li>
<li><strong>試行錯誤する</strong>: さまざまなレイアウトやスタイルを試すことを恐れないでください。</li>
<li><strong>フィードバック</strong>: デザインについてフィードバックを求め、それに基づいて改善していきましょう。</li>
</ul>
<h2>まとめ</h2>
<p>当社のスターターテンプレートのラインナップがあれば、特定の要件に合わせたユニークなものを構築する確かな基盤が得られます。さあ、飛び込んで制作を始めましょう！</p>
<p>[00]: data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 398' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23166534'/><stop offset='1' stop-color='%2386efac'/></linearGradient></defs><rect width='1440' height='398' fill='url(%23g)'/></svg></p>
</article>
</main>
<footer class="footer" id="footer" aria-label="フッター">
<div class="footer-inner">
<div class="footer-cols">
<div class="footer-col">
<p class="footer-heading">概要</p>
<a href="/ja/">ホーム</a>
<a href="/ja/contact/index.html">お問い合わせ</a>
</div>
<div class="footer-col">
<p class="footer-heading">リソース</p>
<a href="/ja/posts/index.html">ブログ</a>
<a href="/ja/rss.xml">RSSフィード</a>
</div>
<div class="footer-col">
<p class="footer-heading">法的情報</p>
<a href="/ja/privacy/index.html">プライバシー</a>
</div>
</div>
<div class="footer-bottom">Copyright © 2023-2026 Kaishi. 全著作権所有。</div>
</div>
</footer>
<script type="application/ld+json">
{"@context":"http://schema.org/","@type":"BlogPosting","headline":"記事","datePublished":"Wed, 01 Jan 2025 01:01:01 GMT","dateModified":"Wed, 01 Jan 2025 01:01:01 GMT","description":"素晴らしいウェブサイトの構築に必要なすべてがここにあります。","image":{"@type":"ImageObject","height":"2048","width":"2048","url":"https://cloudcdn.pro/kaishi/v1/logos/kaishi.svg"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://kaishi.jp","name":"Kaishi スターターテンプレートで最小限の労力で素晴らしいウェブサイトを構築"},"author":"jane.doe@kaishi.jp (Jane Doe)","copyrightHolder":{"@type":"Person","@id":"jane.doe@kaishi.jp (Jane Doe)"},"copyrightYear":"Copyright © 2023-2026 Kaishi. 全著作権所有。","creator":{"@type":"Person","@id":"jane.doe@kaishi.jp (Jane Doe)"},"inLanguage":"ja-JP","name":"Kaishi","publisher":{"@type":"Person","@id":"jane.doe@kaishi.jp (Jane Doe)"}}
</script>
<script>
(function(){var r=document.documentElement,sw=document.getElementById('themeToggle'),lt=document.getElementById('langToggle'),ld=document.getElementById('langDropdown'),mt=document.querySelector('.menu-toggle'),mm=document.getElementById('mobileMenu');function setTheme(v){r.setAttribute('data-theme',v);localStorage.setItem('vitepress-theme-appearance',v);if(v==='dark')sw.classList.add('dark');else sw.classList.remove('dark')}var saved=localStorage.getItem('vitepress-theme-appearance');if(saved)setTheme(saved);else if(matchMedia('(prefers-color-scheme:dark)').matches)setTheme('dark');var ns=document.querySelector('.nav-search');if(ns)ns.addEventListener('click',function(){var b=document.getElementById('ssg-search-btn');if(b){b.click()}else{var o=document.getElementById('ssg-search-overlay');if(o){o.classList.add('active');var inp=document.getElementById('ssg-search-input');if(inp){inp.value='';inp.focus()}}}});sw.addEventListener('click',function(){setTheme(r.getAttribute('data-theme')==='dark'?'light':'dark')});if(lt)lt.addEventListener('click',function(e){e.stopPropagation();ld.classList.toggle('open')});document.addEventListener('click',function(){if(ld)ld.classList.remove('open')});if(mt)mt.addEventListener('click',function(){var ex=this.getAttribute('aria-expanded')==='true';this.setAttribute('aria-expanded',!ex);mm.classList.toggle('open')});var lp=location.pathname.match(/^\/(en|fr|ar|bn|cs|de|es|ha|he|hi|id|it|ja|ko|nl|pl|pt|ro|ru|sv|th|tl|tr|uk|vi|yo|zh-tw|zh)\//);if(lp){var pfx='/'+lp[1];document.querySelectorAll('a[href^="/"]').forEach(function(a){var h=a.getAttribute('href');if(h&&h.charAt(0)==='/'&&h!=='/'&&!/^\/(en|fr|ar|bn|cs|de|es|ha|he|hi|id|it|ja|ko|nl|pl|pt|ro|ru|sv|th|tl|tr|uk|vi|yo|zh-tw|zh)\//.test(h)){a.setAttribute('href',pfx+h)}})}var _p=location.pathname,_m=_p.match(/^\/(en|fr|ar|bn|cs|de|es|ha|he|hi|id|it|ja|ko|nl|pl|pt|ro|ru|sv|th|tl|tr|uk|vi|yo|zh-tw|zh)\//),_src=_m?_m[1]:'en',_rest=_m?_p.slice(_m[0].length):_p.replace(/^\//,'');if(_src==='fr')_rest=_rest.replace(/^articles\//,'posts/').replace(/^fonctionnalites\//,'features/');document.querySelectorAll('a[hreflang]').forEach(function(a){var _t=a.getAttribute('hreflang'),_r=_rest;if(_t==='fr')_r=_r.replace(/^posts\//,'articles/').replace(/^features\//,'fonctionnalites/');a.setAttribute('href',_t==='en'?'/'+_r:'/'+_t+'/'+_r)});})();
</script>
<!-- SSG Search Widget -->
<div id="ssg-search-widget">
<style>
/* ── Trigger button (always visible) ── */
#ssg-search-btn{position:fixed;top:16px;right:16px;z-index:9998;display:flex;align-items:center;gap:8px;padding:8px 16px;background:#fff;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;font-family:-apple-system,system-ui,sans-serif;font-size:14px;color:#595960;box-shadow:0 1px 3px rgba(0,0,0,.08);transition:border-color .15s,box-shadow .15s}
#ssg-search-btn:hover{border-color:#595960;box-shadow:0 2px 6px rgba(0,0,0,.12)}
#ssg-search-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#ssg-search-btn kbd{font-family:inherit;font-size:11px;padding:2px 6px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;color:#595960;margin-left:4px}
/* ── Modal overlay ── */
#ssg-search-overlay{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);align-items:flex-start;justify-content:center;padding-top:12vh}
#ssg-search-overlay.active{display:flex}
#ssg-search-box{background:#fff;border-radius:12px;width:92%;max-width:640px;box-shadow:0 25px 60px rgba(0,0,0,.3);overflow:hidden;font-family:-apple-system,system-ui,sans-serif}
#ssg-search-header{display:flex;align-items:center;padding:0 16px;border-bottom:1px solid #e5e7eb}
#ssg-search-header svg{width:20px;height:20px;stroke:#9ca3af;fill:none;stroke-width:2;flex-shrink:0}
#ssg-search-input{flex:1;padding:16px 12px;font-size:16px;border:none;outline:none;background:transparent}
#ssg-search-results{max-height:50vh;overflow-y:auto}
#ssg-sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.ssg-result{display:block;padding:12px 20px;text-decoration:none;color:#111;border-bottom:1px solid #f3f4f6;transition:background .1s}
.ssg-result:hover,.ssg-result.active{background:#ecfdf5}
.ssg-result-title{font-weight:600;font-size:15px;margin-bottom:3px}
.ssg-result-snippet{font-size:13px;color:#595960;line-height:1.5}
.ssg-result-snippet mark{background:#fef08a;color:inherit;border-radius:2px;padding:0 2px}
.ssg-no-results{padding:32px 20px;text-align:center;color:#595960;font-size:14px}
.ssg-no-results[role="status"]{}
/* Forced-colours / Windows High Contrast Mode */
@media(forced-colors:active){
#ssg-search-btn{border:1px solid ButtonText}
#ssg-search-btn:focus{outline:2px solid Highlight}
#ssg-search-input{border:1px solid CanvasText}
#ssg-search-input:focus{outline:2px solid Highlight}
.ssg-result:focus,.ssg-result.active{outline:2px solid Highlight}
.ssg-result-snippet mark{background:Highlight;color:HighlightText}
}
.ssg-search-footer{display:flex;gap:16px;padding:10px 20px;font-size:12px;color:#595960;border-top:1px solid #e5e7eb;justify-content:flex-end}
.ssg-search-footer kbd{font-family:inherit;font-size:11px;padding:1px 5px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:3px}
/* ── Dark mode (media query + data-theme attribute) ── */
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]) #ssg-search-btn{background:#1f2937;border-color:#374151;color:#cccccf}
:root:not([data-theme="light"]) #ssg-search-btn:hover{border-color:#4b5563}
:root:not([data-theme="light"]) #ssg-search-btn kbd{background:#374151;border-color:#4b5563;color:#cccccf}
:root:not([data-theme="light"]) #ssg-search-box{background:#1f2937;color:#f9fafb}
:root:not([data-theme="light"]) #ssg-search-header{border-color:#374151}
:root:not([data-theme="light"]) #ssg-search-input{color:#f9fafb}
:root:not([data-theme="light"]) .ssg-result{color:#f9fafb;border-color:#374151}
:root:not([data-theme="light"]) .ssg-result:hover,:root:not([data-theme="light"]) .ssg-result.active{background:#374151}
:root:not([data-theme="light"]) .ssg-result-snippet{color:#cccccf}
:root:not([data-theme="light"]) .ssg-result-snippet mark{background:#854d0e;color:#fef08a}
:root:not([data-theme="light"]) .ssg-no-results{color:#cccccf}
:root:not([data-theme="light"]) .ssg-search-footer{border-color:#374151;color:#cccccf}
:root:not([data-theme="light"]) .ssg-search-footer kbd{background:#374151;border-color:#4b5563}
}
[data-theme="dark"] #ssg-search-btn{background:#1f2937;border-color:#374151;color:#cccccf}
[data-theme="dark"] #ssg-search-btn:hover{border-color:#4b5563}
[data-theme="dark"] #ssg-search-btn kbd{background:#374151;border-color:#4b5563;color:#cccccf}
[data-theme="dark"] #ssg-search-box{background:#1f2937;color:#f9fafb}
[data-theme="dark"] #ssg-search-header{border-color:#374151}
[data-theme="dark"] #ssg-search-input{color:#f9fafb}
[data-theme="dark"] .ssg-result{color:#f9fafb;border-color:#374151}
[data-theme="dark"] .ssg-result:hover,[data-theme="dark"] .ssg-result.active{background:#374151}
[data-theme="dark"] .ssg-result-snippet{color:#cccccf}
[data-theme="dark"] .ssg-result-snippet mark{background:#854d0e;color:#fef08a}
[data-theme="dark"] .ssg-no-results{color:#cccccf}
[data-theme="dark"] .ssg-search-footer{border-color:#374151;color:#cccccf}
[data-theme="dark"] .ssg-search-footer kbd{background:#374151;border-color:#4b5563}
</style>
<!-- Search trigger button -->
<button id="ssg-search-btn" type="button" aria-label="検索">
<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<span>検索</span>
<kbd>K</kbd>
</button>
<!-- Search modal -->
<div id="ssg-search-overlay" role="dialog" aria-label="検索">
<div id="ssg-search-box">
<div id="ssg-search-header">
<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input id="ssg-search-input" type="search" placeholder="ドキュメントを検索..." autocomplete="off" aria-label="検索"/>
</div>
<div id="ssg-search-results" aria-live="polite"></div>
<div id="ssg-sr-status" role="status" aria-live="polite" aria-atomic="true"></div>
<div class="ssg-search-footer"><span><kbd>Esc</kbd> 閉じる</span><span><kbd>↑</kbd><kbd>↓</kbd> 移動</span><span><kbd>Enter</kbd> 開く</span></div>
</div>
</div>
<script>
(function(){
var idx=null,overlay=document.getElementById('ssg-search-overlay'),
input=document.getElementById('ssg-search-input'),
results=document.getElementById('ssg-search-results'),
btn=document.getElementById('ssg-search-btn'),active=-1,
lm=location.pathname.match(/^\/(en|fr|ar|bn|cs|de|es|ha|he|hi|id|it|ja|ko|nl|pl|pt|ro|ru|sv|th|tl|tr|uk|vi|yo|zh-tw|zh)\//),
lp=lm?'/'+lm[1]:'';
function load(){if(idx)return Promise.resolve();var sp=lm?'/'+lm[1]+'/search-index.json':'/search-index.json';return fetch(sp).then(function(r){return r.json()}).then(function(d){idx=d.entries||[]}).catch(function(){idx=[]})}
function open(){load().then(function(){overlay.classList.add('active');input.value='';results.innerHTML='';input.focus();active=-1})}
function close(){overlay.classList.remove('active');active=-1}
function highlight(text,q){if(!q)return esc(text);var re=new RegExp('('+q.replace(/[.*+?^${}()|[\]\\]/g,'\\$&')+')','gi');return esc(text).replace(re,'<mark>$1</mark>')}
function esc(s){var d=document.createElement('div');d.textContent=s;return d.innerHTML}
function snippet(content,q,len){len=len||150;if(!q)return esc(content.substring(0,len));var i=content.toLowerCase().indexOf(q.toLowerCase());if(i<0)return esc(content.substring(0,len));var s=Math.max(0,i-50),e=Math.min(content.length,i+len);var t=(s>0?'...':'')+content.substring(s,e)+(e<content.length?'...':'');return highlight(t,q)}
function search(q){if(!idx||!q){results.innerHTML='';return}q=q.trim();if(!q){results.innerHTML='';return}var ql=q.toLowerCase(),hits=[];
for(var i=0;i<idx.length&&hits.length<20;i++){var e=idx[i],s=0;if(e.title.toLowerCase().indexOf(ql)>=0)s+=10;if(e.content.toLowerCase().indexOf(ql)>=0)s+=5;for(var h=0;h<e.headings.length;h++){if(e.headings[h].toLowerCase().indexOf(ql)>=0){s+=3;break}}if(s>0)hits.push({entry:e,score:s})}
hits.sort(function(a,b){return b.score-a.score});
var sr=document.getElementById('ssg-sr-status');
if(!hits.length){results.innerHTML='<div class="ssg-no-results" role="status">「“\'+esc(q)+\'”」の結果はありません</div>';if(sr)sr.textContent='No results found';return}
var html='';for(var j=0;j<hits.length;j++){var e=hits[j].entry;html+='<a class="ssg-result" href="'+esc(lp+e.url)+'">'+'<div class="ssg-result-title">'+highlight(e.title,q)+'</div>'+'<div class="ssg-result-snippet">'+snippet(e.content,q)+'</div></a>'}
results.innerHTML=html;active=-1;if(sr)sr.textContent=hits.length+' result'+(hits.length===1?'':'s')+' found'}
function nav(dir){var items=results.querySelectorAll('.ssg-result');if(!items.length)return;if(active>=0&&items[active])items[active].classList.remove('active');active+=dir;if(active<0)active=items.length-1;if(active>=items.length)active=0;items[active].classList.add('active');items[active].scrollIntoView({block:'nearest'})}
btn.addEventListener('click',function(){open()});
input.addEventListener('input',function(){search(this.value)});
overlay.addEventListener('click',function(e){if(e.target===overlay)close()});
document.addEventListener('keydown',function(e){if((e.ctrlKey||e.metaKey)&&e.key==='k'){e.preventDefault();if(overlay.classList.contains('active'))close();else open()}
if(!overlay.classList.contains('active'))return;if(e.key==='Escape')close();if(e.key==='ArrowDown'){e.preventDefault();nav(1)}if(e.key==='ArrowUp'){e.preventDefault();nav(-1)}
if(e.key==='Enter'){e.preventDefault();var items=results.querySelectorAll('.ssg-result');if(active>=0&&items[active])window.location=items[active].href;else if(items[0])window.location=items[0].href}})
})();
</script>
</div>
</body>
</html>