Excelでカレンダーを作ろうとして、関数だらけで挫折したことはありませんか。土日に色をつけて、祝日を赤くして……調べるだけで日が暮れます。
この記事では、Excelも関数も一切使わず、コピペだけで「色つきの営業日カレンダー」を作ります。土曜は青、日曜と祝日は赤、今日の日付には黄色い枠。月を切り替えられて、印刷して壁に貼ることもできます。
パソコンが得意でなくても大丈夫。この記事のとおりに操作すれば、10分で自分のカレンダーが完成します。 難しい話は一切しません。
まず、これが完成します
作るとこんなカレンダーになります。
- ✓土曜日は青、日曜日と祝日は赤で、自動で色分け
- ✓主要な祝日（元日・GW・お盆など）は名前つきで最初から入っている
- ✓今日の日付に黄色い枠がつく
- ✓「前の月」「次の月」ボタンで月を切り替えられる
- ✓「印刷する」ボタンで紙に印刷できる
Excelのように関数を組む必要はありません。下のコードをコピーして貼るだけです。順番にやっていきましょう。
手順1：文字を書くアプリを開く
まず、コードを貼り付けるためのアプリを開きます。パソコンに最初から入っている無料のアプリです。
Windowsの人
1. キーボードの一番下、左から2番目あたりにあるWindowsマーク（旗のマーク）のキーを1回押します
2. そのまま「メモ帳」とキーボードで入力します（画面のどこかに検索欄が出て、文字が入ります）
3. 「メモ帳」というアプリが出てくるので、クリックして開きます
これで白い画面のアプリが開きました。これが「メモ帳」です。
Macの人
1. 画面の右上にある虫めがねマークをクリックして（またはキーボードで「⌘キーを押しながらスペースキー」）、「テキストエディット」と入力します。出てきた「テキストエディット」をクリックまたはEnterキーで開きます
2. ファイルを選ぶ画面が出たら、左下の「新規書類」ボタンをクリックします（この画面が出ずに、いきなり白い書類が開くこともあります。それでもOKです）
3. ここが大事です。メニューは画面の「いちばん上」にあります。アプリの画面の中ではなく、画面最上部のリンゴのマークと同じ列に「ファイル 編集 フォーマット…」と並んでいます。その「フォーマット」をクリックしてください
4. 開いたメニューの「標準テキストにする」をクリックします（これをやらないと、後で作ったファイルが動きません）
- もしメニューに「標準テキストにする」がなく、代わりに「リッチテキストにする」と書いてあったら——お使いのテキストエディットは最初から標準テキストの設定です。何もせずそのまま進んでOKです
これで準備完了です。
手順2：下のコードを全部コピーする
次のコードが、カレンダーの「設計図」です。右上の「コピー」ボタンを押すだけで全部コピーできます。手で選択する必要はありません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>営業日カレンダー</title>
<style>
body { font-family: sans-serif; max-width: 640px; margin: 30px auto; padding: 0 16px; color: #222; }
h1 { font-size: 1.4rem; }
.bar { display: flex; align-items: center; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
button { padding: 8px 18px; font-size: 1rem; cursor: pointer; border: 1px solid #999; background: #f4f4f4; border-radius: 6px; }
#label { font-size: 1.2rem; font-weight: bold; min-width: 140px; text-align: center; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { border: 1px solid #ccc; height: 64px; width: 14.2%; text-align: right; vertical-align: top; padding: 4px 6px; font-size: 1rem; }
th { height: auto; text-align: center; background: #16324f; color: #fff; padding: 8px 0; }
td.sat { color: #1565c0; background: #eef4fb; }
td.sun, td.holiday { color: #c62828; background: #fdeeee; }
td.today { outline: 3px solid #f5b301; outline-offset: -3px; }
td.blank { background: #fafafa; }
.hname { display: block; font-size: 0.7rem; text-align: left; margin-top: 2px; }
.note { font-size: 0.85rem; color: #666; margin-top: 14px; }
@media print { .bar { display: none; } body { margin: 0; } }
</style>
</head>
<body>
<h1>営業日カレンダー</h1>
<div class="bar">
<button onclick="move(-1)">← 前の月</button>
<span id="label"></span>
<button onclick="move(1)">次の月 →</button>
<button onclick="window.print()">印刷する</button>
</div>
<table>
<thead>
<tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr>
</thead>
<tbody id="body"></tbody>
</table>
<p class="note">土曜は青、日曜・祝日は赤、今日は黄色の枠。会社の休みを足したいときは、下のholidaysに1行追記してください。</p>
<script>
var holidays = {
"1/1":"元日","1/12":"成人の日","2/11":"建国記念の日","2/23":"天皇誕生日",
"3/20":"春分の日","4/29":"昭和の日","5/3":"憲法記念日","5/4":"みどりの日",
"5/5":"こどもの日","5/6":"振替休日","7/20":"海の日","8/11":"山の日",
"9/21":"敬老の日","9/22":"国民の休日","9/23":"秋分の日","10/12":"スポーツの日",
"11/3":"文化の日","11/23":"勤労感謝の日"
};
var cur = new Date();
cur.setDate(1);
function draw() {
var y = cur.getFullYear(), m = cur.getMonth();
document.getElementById("label").textContent = y + "年 " + (m+1) + "月";
var first = new Date(y, m, 1).getDay();
var last = new Date(y, m+1, 0).getDate();
var today = new Date();
var html = "", day = 1;
for (var row = 0; row < 6; row++) {
html += "<tr>";
for (var col = 0; col < 7; col++) {
if ((row === 0 && col < first) || day > last) {
html += '<td class="blank"></td>';
} else {
var cls = [];
if (col === 6) cls.push("sat");
if (col === 0) cls.push("sun");
var key = (m+1) + "/" + day;
var hname = holidays[key];
if (hname) cls.push("holiday");
if (y === today.getFullYear() && m === today.getMonth() && day === today.getDate()) cls.push("today");
html += '<td class="' + cls.join(" ") + '">' + day +
(hname ? '<span class="hname">' + hname + '</span>' : '') + '</td>';
day++;
}
}
html += "</tr>";
if (day > last) break;
}
document.getElementById("body").innerHTML = html;
}
function move(n) { cur.setMonth(cur.getMonth() + n); draw(); }
draw();
</script>
</body>
</html>手順3：貼り付けて保存する
1. 手順1で開いたアプリ（メモ帳／テキストエディット）の白い画面をクリックします
2. キーボードで貼り付けます。Windowsは「Ctrl（コントロール）キーを押しながらV」、Macは「⌘（コマンド）キーを押しながらV」。さっきコピーしたコードがずらっと貼り付けられます
3. 保存します。Windowsは「Ctrlキー＋S」、Macは「⌘キー＋S」を押します
4. ファイルの名前を聞かれるので、名前を `calendar.html` にします（最後の`.html`が最重要です。これを忘れると動きません）
- Windowsのメモ帳では、保存画面の下に「ファイルの種類」という欄があります。ここを「すべてのファイル」に変えてから、名前を`calendar.html`にしてください
5. 保存する場所は、分かりやすいデスクトップにしておきましょう
手順4：ダブルクリックで完成
デスクトップに`calendar.html`というファイルができています。それをダブルクリックしてください。
ブラウザ（インターネットを見るアプリ）が開いて、色つきのカレンダーが表示されます。 これで完成です。おつかれさまでした。
土曜が青、日曜・祝日が赤、今日に黄色い枠がついていれば成功です。「印刷する」ボタンを押せば、そのまま紙に印刷できます。
うまくいかないとき
| こうなった | こうする |
|---|
| ダブルクリックしても文字だらけの画面が出る | ファイル名の最後が`.html`になっていない。名前を変えて保存し直す |
| Macで真っ白／崩れて表示される | 手順1の「標準テキストにする」を忘れている。もう一度アプリを開いてやり直す |
| カレンダーは出るが色がつかない | コードの一部しかコピーできていない。「コピー」ボタンで全部コピーし直す |
| 会社の休みも赤くしたい | コードの中の holidays に、例のように `"6/15":"創立記念日",` と1行足す |
もっと自分好みにしたい人へ
このカレンダーは、そのままでも十分使えます。でも「予定を書き込めるようにしたい」「1年分まとめて印刷したい」と思ったら、コードをAIに渡して改造を頼めます。プログラミングの知識はいりません。次の文をコピーして、作ったコードと一緒にAIに貼るだけです。
このHTMLファイルのコードを渡します（この下に全文を貼ります）。
以下の改造をしてください。
・（例：各日付に、予定を書き込めるメモ欄をつけて）
・（例：3か月分をまとめて1枚に表示して）
条件：
・ファイル1個のまま。インストールや通信が必要な仕組みは使わない
・私はプログラミングができないので、完成したコードは全文で出してください
私が会社で使っている自作のツールも、最初はこのカレンダーくらい小さなものでした。「ここを直して」を繰り返すうちに、いつの間にか立派な業務ツールになっていました。
まとめ
- ✓Excelも関数も使わず、コピペだけで色つき営業日カレンダーが作れる
- ✓手順は「アプリを開く→貼る→保存→ダブルクリック」の4つだけ
- ✓祝日は最初から入っている。会社の休みは1行足すだけ
- ✓もっと便利にしたくなったら、AIに改造を頼めばいい
「カレンダーは買うもの・もらうもの」だったのが、「自分で作れるもの」に変わります。まずはこの1個で、その感覚を味わってみてください。
作ったカレンダーは、あとから自分専用に改造できます。メモ欄を足す、会社の休日を入れるといったやり方は作ったカレンダーを自分専用にカスタムする方法にまとめました。
このカレンダーのように「1ファイルHTML」が向く場面と、Excelやアプリが向く場面の違いはAIでツールを作る前にこれだけは決めようにまとめました。
