ブログ · ブログデザイン

キリ番と工事中の90年代ホームページ風ブログ

1990年代後半の個人ホームページをブログのトップに再現したデザイン。星柄の壁紙、立体の枠、虹色の見出し、流れる電光掲示板、アクセスカウンタとキリ番、工事中の看板、ウェブリングまでを、見た目だけ借りて中身は現代の組み方で作る。

保存した一覧を見る 0 →

このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。

印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。

Vibehaus · デザイン資料
https://vibe.itlibra.com/design/homepage-90s-blog/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由

PUBLISHED — 2026年9月25日 UPDATED — 2026年10月18日 CATEGORY — ブログ LICENSE — CC0 1.0

プレビュー

AIへの指示文

1990年代後半の個人ホームページのような、ブログのトップページを作ってください。猫と暮らす管理人の日記サイトという設定です。

要件:
- 背景は紺 #000033 に、黄色と水色の小さな点を別々の間隔で重ねた星柄の壁紙。画像は使わず radial-gradient で描く。
- 中央に幅720pxの銀色 #c0c0c0 の枠。左上を白、右下を灰色にした立体の枠線にする。中の箱は逆向きの凹んだ枠。
- 見出しは虹色の文字。背景を文字の形に切り抜く方法で、文字の幅だけに塗る。対応していない環境では単色の文字に戻す。
- 見出しの下に、黒地に黄緑の文字が右から左へ流れる電光掲示板。<marquee> は使わず CSS のアニメーションで流し、role="marquee" を付ける。
- 左に「MENU」の箱（見出しは紺から青のグラデーションの帯）とリンク一覧、その下に7桁のアクセスカウンタ（黒地に黄緑の数字）。カウンタには読み上げ用に aria-label で人数を付ける。
- 右に「更新履歴」（最新の1件に赤地に白の NEW! を点滅させる）と「きょうの日記」。
- 日記の中に、黄色と黒の斜めの縞で囲んだ工事中の看板と、ピンクの「キリ番 12345 を踏んだ方は…」の一文、立体のボタン。
- 下部にウェブリングの「前へ・ランダム・次へ」の立体ボタンと、「800×600 以上でご覧ください」の一文。
- 書体は MS Pゴシック / Osaka を先に指定し、無い環境では日本語の system 書体に落ちるようにする。
- 見た目は当時のまま、構造は現代の書き方にする。レイアウトに table は使わず、見出し・nav・main・section を正しく使う。
- prefers-reduced-motion では電光掲示板と点滅を止める。点滅は見えている時間を7割にして、読めないほど速くしない。
- 幅600px未満では1列にする。

バリエーション

ゲーム攻略サイト版

壁紙を黒と緑の格子に、見出しを「攻略の館」に。更新履歴を攻略記事の一覧にし、
カウンタの下に「相互リンク募集中」のバナー風の枠を置く。

ファンサイト版

壁紙をピンクのハート柄に、枠を白に。見出しの虹色をピンクから紫の2色に絞り、
掲示板への書き込みボタンを大きくする。

このプレビューのコード

HTML・CSS・JavaScriptの1ファイルです。外部依存・広告・解析コードはありません。架空の記事・著者・更新履歴を使うレイアウト見本です。実際の取材・引用・ニュース・アクセス数ではありません。リンクは説明へ移動し、購読・掲示板への投稿・外部送信は行いません。演出の停止とOSの動き低減に対応します。

CC0 · 改変・商用利用自由 · revision 49c6b8518ec5

コードを表示

<!doctype html>
<!-- Vibehaus · CC0 · 架空の表示・操作見本。外部素材・送信・永続保存なし。 -->
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex" />
    <title>キリ番と工事中の90年代個人ホームページ風ブログ — Vibehaus プレビュー</title>
    <style>
      :root {
        --navy: #000060;
        --silver: #c0c0c0;
        --hi: #ffffff;
        --lo: #808080;
        --link: #0000ee;
        --visited: #551a8b;
        --pink: #ff3399;
        --lime: #33ff33;
        --yellow: #ffff00;
        /* 当時の既定の書体に寄せる。無い環境では system の日本語書体に落ちる */
        --font: "MS PGothic", "ＭＳ Ｐゴシック", "Osaka", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        padding: 16px 8px 40px;
        font-family: var(--font);
        font-size: 14px;
        line-height: 1.75;
        letter-spacing: 0;
        color: #000;
        /* 星柄の壁紙。画像を使わず、2種類の点を別の間隔で重ねてタイルに見せる */
        background:
          radial-gradient(circle at 25% 30%, #ffffaa 0 1.2px, transparent 1.6px) 0 0 / 38px 38px,
          radial-gradient(circle at 70% 70%, #aaccff 0 1px, transparent 1.4px) 0 0 / 23px 23px,
          #000033;
      }
      a { color: var(--link); }
      a:visited { color: var(--visited); }

      .page { max-width: 720px; margin: 0 auto; background: var(--silver); }
      /* 立体の枠。左上を明るく右下を暗くする、当時の OS と同じ光の向き */
      .bevel { border: 3px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); }
      .inset { border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); background: #fff; }

      .title {
        margin: 0;
        padding: 18px 10px 10px;
        font-size: 30px;
        font-weight: bold;
        line-height: 1.4;
        text-align: center;
        color: #cc0066;
      }
      /* 虹色の文字。当時は GIF 画像で作っていたものを、文字のまま塗る。
         切り抜きに対応している環境でだけ透明にする（非対応だと文字が消える） */
      /* 塗るのは文字の幅だけ。行全体に掛けると、中央寄せの短い見出しでは
         両端の色が文字の外に出て、虹の半分しか見えない */
      @supports (background-clip: text) or (-webkit-background-clip: text) {
        .title span {
          background: linear-gradient(90deg, #ff0000, #ff9900, #ffee00, #00cc00, #0066ff, #9900cc);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
      }
      .sub { margin: 0; padding: 0 10px 12px; text-align: center; font-size: 13px; }

      /* 電光掲示板。<marquee> は廃止済みなので CSS で流す */
      .ticker { overflow: hidden; margin: 0 10px; background: #000; color: var(--lime); font-family: "MS Gothic", "Osaka-Mono", monospace; }
      .ticker p { margin: 0; padding: 3px 0; white-space: nowrap; display: inline-block; padding-left: 100%; animation: tick 16s linear infinite; }
      @keyframes tick { to { transform: translateX(-100%); } }

      .cols { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px; padding: 10px; }
      .menu { padding: 8px; }
      .menu h2, .box h2 {
        margin: 0 0 6px;
        padding: 2px 6px;
        font-size: 13px;
        line-height: 1.6;
        color: #fff;
        background: linear-gradient(90deg, var(--navy), #1084d0);
      }
      .menu ul { margin: 0; padding-left: 1.2em; }
      .menu li { margin: 2px 0; }

      .counter { margin: 10px 0 0; text-align: center; font-size: 12px; }
      .digits { display: inline-flex; gap: 1px; margin: 3px 0; padding: 2px; background: #000; }
      .digits span { display: inline-block; width: 13px; font-family: "MS Gothic", monospace; font-size: 15px; font-weight: bold; line-height: 1.3; color: var(--lime); background: #003300; text-align: center; }

      .box { margin-bottom: 8px; padding: 8px 10px; }
      .box p { margin: 0 0 6px; }
      .new {
        display: inline-block;
        margin-right: 4px;
        padding: 0 3px;
        font-size: 11px;
        font-weight: bold;
        line-height: 1.5;
        color: #fff;
        background: #ff0000;
        animation: blink 1s steps(1) infinite;
      }
      /* 見えている時間を長めにして、読めないほど点滅させない */
      @keyframes blink { 0%, 69% { visibility: visible; } 70%, 100% { visibility: hidden; } }
      .log { margin: 0; padding-left: 1.2em; }
      .log li { margin-bottom: 4px; }
      .log time { font-family: "MS Gothic", monospace; font-size: 12px; color: #444; }

      /* 工事中の看板 */
      .kouji {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 8px 0;
        padding: 8px;
        background: repeating-linear-gradient(-45deg, var(--yellow) 0 10px, #000 0 20px);
      }
      .kouji span {
        padding: 4px 8px;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.6;
        background: var(--yellow);
        border: 2px solid #000;
      }
      .kiriban { margin: 8px 0 0; font-size: 13px; font-weight: bold; color: var(--pink); }

      .btn90 {
        display: inline-block;
        padding: 2px 10px;
        font: inherit;
        font-size: 13px;
        color: #000;
        text-decoration: none;
        background: var(--silver);
        border: 2px solid;
        border-color: var(--hi) var(--lo) var(--lo) var(--hi);
        cursor: pointer;
      }
      .btn90:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
      .ring { padding: 8px 10px 12px; text-align: center; font-size: 12px; }
      .ring p { margin: 0 0 4px; }
      .foot { margin: 0; padding: 6px 10px 10px; font-size: 11px; text-align: center; color: #333; }
      hr { border: 0; border-top: 2px groove var(--hi); margin: 0 10px; }
      :focus-visible { outline: 2px dotted #000; outline-offset: 2px; }

      @media (max-width: 600px) {
        .cols { grid-template-columns: minmax(0, 1fr); }
        .title { font-size: 24px; }
      }
      @media (prefers-reduced-motion: reduce) {
        .ticker p { animation: none; padding-left: 8px; white-space: normal; }
        .new { animation: none; }
      }
    [hidden]{display:none!important}
a,button,input,summary{min-width:44px;min-height:44px}
a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:default}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid currentColor;outline-offset:4px}
nav a{display:inline-flex;align-items:center;justify-content:center}
nav{flex-wrap:wrap}
header.bar{flex-wrap:wrap;gap:1rem}
input{max-width:100%}
.demo-notes{position:relative;z-index:10;box-sizing:border-box;max-width:1080px;width:calc(100% - 2rem);margin:2rem auto;padding:clamp(1rem,3vw,2rem);background:#f6f1e8;color:#211c17;border:1px solid currentColor;text-align:left;font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:13px;line-height:1.8;letter-spacing:0;overflow-wrap:anywhere}
.demo-notes h2{font-size:18px;line-height:1.5;margin:0 0 .75rem}
.demo-notes h3{font-size:15px;line-height:1.5;margin:0 0 .4rem}
.demo-notes p{font:inherit;color:inherit;opacity:1;margin:0 0 1rem;max-width:none;letter-spacing:0}
.demo-notes section{margin-top:1.25rem;scroll-margin-top:1rem}
.demo-notes button{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;padding:.4rem .75rem}
.demo-notes a{color:inherit}
.demo-notes .demo-motion{margin-bottom:1rem}
.demo-notes section:focus{outline:3px solid currentColor;outline-offset:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
}
.menu a,.btn90{display:inline-flex;align-items:center}
.menu ul{padding-left:1rem}
.menu{min-width:0}
.cols{grid-template-columns:minmax(170px,1fr) minmax(0,3fr)}
@media(max-width:600px){.cols{grid-template-columns:minmax(0,1fr)}
}
html[data-demo-paused] *,html[data-demo-paused] *::before,html[data-demo-paused] *::after{animation-play-state:paused!important}
html[data-demo-paused] .ticker p{animation:none!important;padding-left:8px;white-space:normal}
.new{background:#c90000}
.kiriban{color:#b81b68}
</style>
  <noscript><style>*,*::before,*::after{animation:none!important}.ticker p{padding-left:8px;white-space:normal}</style></noscript>
</head>
  <body>
    <div class="page bevel">
      <h1 class="title"><span>★☆ ねこと暮らす部屋 ☆★</span></h1>
      <p class="sub">〜 三毛猫みけと、ときどき管理人の日記 〜</p>

      <div class="ticker inset" role="marquee" aria-label="お知らせ"><p>★ 9月24日 日記を更新しました ★ 相互リンク募集中です！ ★ 掲示板への書き込みは、お気軽にどうぞ ★ キリ番 12345 を踏んだ方はご報告ください ★</p></div>

      <div class="cols">
        <nav class="menu inset" aria-label="メニュー">
          <h2>▼ MENU</h2>
          <ul>
            <li><a href="#demo-link-0">日記</a></li>
            <li><a href="#demo-link-1">みけのアルバム</a></li>
            <li><a href="#demo-link-2">掲示板</a></li>
            <li><a href="#demo-link-3">リンク集</a></li>
            <li><a href="#demo-link-4">管理人について</a></li>
          </ul>
          <div class="counter">
            あなたは
            <div class="digits" aria-label="12,344人目"><span>0</span><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>4</span></div>
            人目のお客様です
          </div>
        </nav>

        <main>
          <section class="box inset" aria-labelledby="h-news">
            <h2 id="h-news">■ 更新履歴</h2>
            <ul class="log">
              <li><span class="new">NEW!</span><time datetime="2026-09-24">2026/09/24</time> 日記「みけ、はじめての爪とぎ」</li>
              <li><time datetime="2026-09-18">2026/09/18</time> アルバムに写真を5枚追加</li>
              <li><time datetime="2026-09-10">2026/09/10</time> リンク集に3サイト追加</li>
            </ul>
          </section>

          <section class="box inset" aria-labelledby="h-diary">
            <h2 id="h-diary">■ きょうの日記</h2>
            <p>みけが新しい爪とぎを気に入ってくれました。段ボールの箱よりこっちのほうが好きみたいです。夜はずっと上で寝ています。</p>
            <div class="kouji"><span>🚧 アルバムのページは工事中です 🚧</span></div>
            <p class="kiriban">キリ番 12345 を踏んだ方は、掲示板に書き込んでね！</p>
            <p><a class="btn90" href="#demo-link-5">掲示板に書き込む</a></p>
          </section>
        </main>
      </div>

      <hr />
      <nav class="ring" aria-label="ウェブリング">
        <p>このサイトは「ねこ好きリング」に参加しています</p>
        <a class="btn90" href="#demo-link-6">&lt;&lt; 前へ</a>
        <a class="btn90" href="#demo-link-7">ランダム</a>
        <a class="btn90" href="#demo-link-8">次へ &gt;&gt;</a>
      </nav>
      <p class="foot">このページは 800×600 以上の画面でご覧ください（なんてことはありません）<br />© 2026 ねこと暮らす部屋 ・ 無断転載は禁止…ではなく CC0 です</p>
    </div>
  <aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空の記事・著者・更新履歴を使うレイアウト見本です。実際の取材・引用・ニュース・アクセス数ではありません。リンクは説明へ移動し、購読・掲示板への投稿・外部送信は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<div class="demo-motion">
<button type="button" data-demo-motion data-js-control disabled aria-pressed="false">演出を止める</button>
</div>
<section id="demo-link-0" tabindex="-1">
<h3>日記の見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-1" tabindex="-1">
<h3>みけのアルバムの見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-2" tabindex="-1">
<h3>掲示板の見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-3" tabindex="-1">
<h3>リンク集の見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-4" tabindex="-1">
<h3>管理人についての見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-5" tabindex="-1">
<h3>掲示板に書き込むの見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-6" tabindex="-1">
<h3>〈〈 前への見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-7" tabindex="-1">
<h3>ランダムの見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<section id="demo-link-8" tabindex="-1">
<h3>次へ 〉〉の見本</h3>
<p>記事や案内へ進む入口の例です。見出し・著者・取材対象は架空で、記事の全文・購読・投稿・外部サイトへの接続は含みません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside><script>
const motion=matchMedia('(prefers-reduced-motion: reduce)'),toggle=document.querySelector('[data-demo-motion]');let paused=false;function syncMotion(){const stop=paused||motion.matches;document.documentElement.toggleAttribute('data-demo-paused',stop);toggle.setAttribute('aria-pressed',String(stop));toggle.disabled=motion.matches;toggle.textContent=motion.matches?'動きを減らす設定で停止中':stop?'演出を再開':'演出を止める'}toggle.addEventListener('click',()=>{paused=!paused;syncMotion()});motion.addEventListener('change',syncMotion);
document.querySelectorAll('[data-js-control]').forEach(el=>el.disabled=false);syncMotion();
</script>
</body>
</html>

2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。

概要

1990年代の後半、個人がホームページを持つことが一気に広まりました。無料のホームページサービスに、手書きの HTML で日記やアルバムを載せる。星柄の壁紙、虹色の見出し、アクセスカウンタ、工事中の看板。いまから見ると少し怪しく、それでいて手作りの温度がある見た目は、この時代の Web にしか無いものです。

懐かしさは記号の組み合わせで決まる

この様式が一目で伝わるのは、見る人の記憶にある部品がそろっているからです。1つだけでは古いサイトにしか見えませんが、決まった記号が組み合わさると、時代そのものが立ち上がります。

7桁アクセスカウンタ。キリ番の文化とセットで効く

立体の枠左上を白、右下を灰色。当時のOSと同じ光の向き

1か所点滅させる場所。NEW! だけに絞る

見た目だけ借りて、中身は現代にする

当時の作り方をそのまま再現する必要はありません。むしろ再現してはいけない部分があります。

崩れる形当時の書き方まで再現する

table で組んだレイアウトや marquee は、読み上げで表として扱われたり止められなかったりします。懐かしさの代わりに、使いにくさまで持ち込むことになります。

効く形見た目は当時、構造は現代

grid で同じ見た目を作り、見出しや nav を正しく使います。電光掲示板は CSS で流し、動きを減らす設定では止める。訪れる人の環境は2020年代のままです。

仕上げの判断軸

点滅は 1秒に1回以下、1か所だけ。1秒に3回を超える点滅は発作を引き起こすおそれがあり、当時の見た目でも越えてはいけない線です。

書体は MS Pゴシックや Osaka を先に指定しておくと、当時の環境に近い見え方になります。入っていない環境では日本語の system 書体に落ちるので、読めなくなることはありません。

平成レトロは、いまの10〜20代には初めて見る様式として、30〜40代には懐かしさとして届きます。どちらに向けるかで、怪しさの濃さを調整してください。若い層には記号を増やして遊びを強く、懐かしさに訴えるなら記号を絞って日記の文章を主役にします。

見本で試せる範囲

架空の記事・著者・更新履歴を使うレイアウト見本です。実際の取材・引用・ニュース・アクセス数ではありません。リンクは説明へ移動し、購読・掲示板への投稿・外部送信は行いません。演出の停止とOSの動き低減に対応します。作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。