はじめに
Webサイトを一から手動で作るのは手間がかかりますよね。この記事では、Bashスクリプトを使って「ホンダ社労士事務所」の静的サイト構成を自動生成する方法を解説します。
初心者の方にもわかりやすく説明していきます。
スクリプトの概要
このスクリプトでは、以下の内容を全自動で構築してくれます：
- サイト用のディレクトリを作成
- CSSファイル（スタイル）を作成
- 各種HTMLページをテンプレートから自動生成
- info/ フォルダ内に「お知らせ詳細ページ」も作成
すべてターミナル上で完結するので、ちょっとした静的サイトであればこのスクリプトだけで十分対応できます！
作成されるディレクトリ構成
実行後は、以下のようなフォルダ構成が生成されます：
honda-sr-office/
├── css/
│ └── style.css
├── images/
├── info/
│ └── 20241226093859.html
├── index.html
├── greeting.html
├── office.html
├── services.html
├── pricing.html
├── contact.html
└── support-a.html
この構成だけで、事務所紹介やサービス案内、料金案内、就労支援A型など、一通りのページが揃っています。
CSSデザインも自動作成
CSSファイルは cat << EOF を使ってスクリプト内で自動生成されます。
オレンジ系のやわらかい色調で、解説性の高いスタイルを備えています：
h2 {
color: #ff8f00;
border-left: 6px solid #ffb74d;
padding-left: 12px;
}
見出しの左側にラインがあり、ボックスシャドウやボタン風リンクなども発生します。
シンプルながら、読みやすいデザインです。
HTMLページもテンプレート化
HTMLファイルは HEADER と FOOTER の変数を使い、共通レイアウトを一貫しています。
create_html 関数を使うことで、一文の呼出しで下記のようなページが生成されます：
create_html "greeting.html" "<section><h2>代表挨拶</h2><p>代表の挨拶文をここに記載します。</p></section>"
あとは、内容を変えるだけで別のページも簡単に作成できます。
「お知らせ詳細」ページもカバー
info/フォルダには、個別のお知らせ記事を表示するページも自動作成されます。
cat << EOF > "$INFO_DIR/20241226093859.html"
$HEADER
<section>
<h2>2024年12月26日 ホームページ開設のお知らせ</h2>
<p>このたび、ホンダ社労士事務所のホームページを開設いたしました。</p>
<p>今後ともどうぞよろしくお願いいたします。</p>
</section>
$FOOTER
EOF
CMSを使わずに、簡単に記事を追加できるのは大きな利点です。
実際のコード
#!/bin/bash
# === ディレクトリ作成 ===
ROOT_DIR="honda-sr-office"
CSS_DIR="$ROOT_DIR/css"
IMAGES_DIR="$ROOT_DIR/images"
INFO_DIR="$ROOT_DIR/info"
mkdir -p "$CSS_DIR" "$IMAGES_DIR" "$INFO_DIR"
# === CSSファイル作成 ===
cat << 'EOF' > "$CSS_DIR/style.css"
/* ベース設定 */
body {
margin: 0;
padding: 0;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
background-color: #ffffff;
color: #333;
line-height: 1.8;
}
/* ヘッダー・フッター */
header, footer {
background-color: #ffcc80;
color: #fff;
text-align: center;
padding: 20px;
}
/* コンテンツエリア */
main {
padding: 40px 20px;
}
/* セクション */
section {
margin-bottom: 40px;
background-color: #fffdf9;
padding: 30px 20px;
border-radius: 8px;
border: 1px solid #ffe0b2;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* セクション見出し */
h2 {
color: #ff8f00;
border-left: 6px solid #ffb74d;
padding-left: 12px;
margin-top: 0;
font-size: 20px;
}
/* トップ見出し */
h1 {
margin: 0;
font-size: 24px;
}
/* ボタン風リンク */
a.button {
display: inline-block;
background-color: #ffb74d;
color: white;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s;
}
a.button:hover {
background-color: #ffa726;
}
/* レイアウト用 */
.container {
max-width: 960px;
margin: 0 auto;
}
/* ページトップボタン */
#ptop {
position: fixed;
bottom: 30px;
right: 20px;
}
#ptop img {
width: 40px;
height: auto;
}
/* フッター文字サイズ */
footer {
font-size: 14px;
}
EOF
echo "🎨 style.css を作成しました"
# === HTML共通パーツ ===
HEADER='<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ホンダ社労士事務所</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header><h1>ホンダ社労士事務所</h1></header>
<main class="container">'
FOOTER=' </main>
<footer><p>© ホンダ社労士事務所</p></footer>
</body>
</html>'
# === HTML作成関数 ===
create_html() {
local filename=$1
local body=$2
echo "$HEADER" > "$ROOT_DIR/$filename"
echo "$body" >> "$ROOT_DIR/$filename"
echo "$FOOTER" >> "$ROOT_DIR/$filename"
echo "✅ $filename を作成しました"
}
# === 各HTMLページ作成 ===
# トップページ（index.html）
create_html "index.html" "<section><h2>新着情報</h2><p>ここに新着情報を表示します。</p></section>
<section><h2>お知らせ</h2><p><a href='info/20241226093859.html'>2024.12.26 ホームページを開設いたしました</a></p></section>"
# 代表挨拶
create_html "greeting.html" "<section><h2>代表挨拶</h2><p>代表の挨拶文をここに記載します。</p></section>"
# 事務所案内
create_html "office.html" "<section id='greeting'><h2>ご挨拶</h2><p>内容</p></section>
<section id='profile'><h2>プロフィール</h2><p>内容</p></section>
<section id='overview'><h2>事務所概要</h2><p>内容</p></section>
<section id='philosophy'><h2>理念・行動指針</h2><p>内容</p></section>
<section id='access'><h2>アクセス</h2><p>地図など</p></section>"
# サービス案内
create_html "services.html" "<section id='insurance'><h2>労働保険・社会保険の手続き</h2><p>内容</p></section>
<section id='payroll'><h2>給与計算・勤怠管理</h2><p>内容</p></section>
<section id='consulting'><h2>人事労務コンサルティング</h2><p>内容</p></section>
<section id='pension'><h2>年金の請求代行・ご相談</h2><p>内容</p></section>
<section id='subsidy'><h2>各種助成金の申請手続き</h2><p>内容</p></section>"
# 料金案内
create_html "pricing.html" "<section id='fees'><h2>報酬料金</h2><p>内容</p></section>
<section id='contract'><h2>顧問契約</h2><p>内容</p></section>
<section id='rules'><h2>就業規則、各種規定の作成・変更</h2><p>内容</p></section>
<section id='application'><h2>労働保険・社会保険の新規適用・適用廃止</h2><p>内容</p></section>
<section id='spot'><h2>その他スポット業務</h2><p>内容</p></section>
<section id='subsidy'><h2>助成金申請</h2><p>内容</p></section>"
# お問い合わせ
create_html "contact.html" "<section><h2>お問い合わせフォーム</h2><p>フォーム設置予定</p></section>"
# 就労支援A型
create_html "support-a.html" "<section id='what'><h2>就労支援A型とは？</h2><p>内容</p></section>
<section id='support'><h2>支援内容</h2><p>内容</p></section>
<section id='target'><h2>利用対象者</h2><p>内容</p></section>
<section id='day'><h2>1日の流れ</h2><p>内容</p></section>
<section id='features'><h2>事業所の特徴</h2><p>内容</p></section>
<section id='fees'><h2>利用料金</h2><p>内容</p></section>
<section id='apply'><h2>申し込み方法</h2><p>内容</p></section>"
# お知らせ詳細（info）
cat << EOF > "$INFO_DIR/20241226093859.html"
$HEADER
<section>
<h2>2024年12月26日 ホームページ開設のお知らせ</h2>
<p>このたび、ホンダ社労士事務所のホームページを開設いたしました。</p>
<p>今後ともどうぞよろしくお願いいたします。</p>
</section>
$FOOTER
EOF
echo "📝 info/20241226093859.html を作成しました"
echo "🎉 サイト構成一式が $ROOT_DIR/ に作成されました！"
実際にやってみた
実際にスクリプトを実行してみました。以下のコマンドを入力することで、すぐに構築が始まります：
chmod +x setup_honda_site.sh
./setup_honda_site.sh
これで、honda-sr-office/フォルダにHTMLやCSSが一括で生成され、簡易でシンプルなWebサイトが完成します！
まとめ
最後までお読みいただき、ありがとうございました。
この記事では、Bashスクリプトを活用して「ホンダ社労士事務所」の静的Webサイトを自動生成する方法をご紹介しました。
スクリプトを実行するだけで、HTMLやCSS、フォルダ構成などが自動で整う仕組みになっています。