初心者でも簡単！HTML掲示板の作成方法＆カスタマイズ10選

はじめに
●HTML掲示板の基本構造
- ○1. HTMLの基本構造
- ○2. 掲示板のコンテンツ
●サーバーサイド処理
- ○3. データ保存
- ○4. データ表示
●掲示板のカスタマイズ
- ○5. スタイルの変更
- ○6. 画像の投稿
●注意点
- ○7. 文字コード
- ○8. セキュリティ対策
●応用例
- ○9. ページネーション
- ○10. 投稿の削除機能
まとめ

はじめに

この記事を読めば、HTML掲示板の作成方法を習得し、自分だけの掲示板を作ることができるようになります。

ここでは、HTML掲示板の作り方、使い方、対処法、注意点、カスタマイズ方法とサンプルコード、応用例とサンプルコードを初心者目線でわかりやすく説明します。

●HTML掲示板の基本構造

まずは、HTML掲示板の基本構造を見ていきましょう。

○1. HTMLの基本構造

HTML掲示板を作るには、まずHTMLの基本構造を理解することが大切です。

HTMLは、次のようなタグで構成されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>掲示板</title>
</head>
<body>
  <!-- 掲示板のコンテンツ -->
</body>
</html>

○2. 掲示板のコンテンツ

掲示板のコンテンツは、投稿フォームと投稿内容の表示部分で構成されます。

<form action="投稿処理のURL" method="post">
  <label for="name">名前:</label>
  <input type="text" name="name" id="name">
  <br>
  <label for="comment">コメント:</label>
  <textarea name="comment" id="comment"></textarea>
  <br>
  <input type="submit" value="投稿">
</form>

<div id="posts">
  <!-- 投稿内容の表示部分 -->
</div>

●サーバーサイド処理

HTML掲示板では、投稿内容を保存・表示するためにサーバーサイドの処理が必要です。

PHPを使ったサンプルコードを紹介します。

○3. データ保存

投稿内容をテキストファイルに保存するコードです。

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $name = $_POST['name'];
  $comment = $_POST['comment'];
  $time = date('Y-m-d H:i:s');
  $post = $time . ' - ' . $name . ': ' . $comment . "\n";
  file_put_contents('posts.txt', $post, FILE_APPEND);
  header('Location: ' . $_SERVER['REQUEST_URI']);
  exit;
}
?>

○4. データ表示

テキストファイルから投稿内容を読み込み、表示するコードです。

<?php
$posts = file_get_contents('posts.txt');
$posts = nl2br(htmlspecialchars($posts, ENT_QUOTES, 'UTF-8'));
?>

<div id="posts">
  <?= $posts ?>
</div>

●掲示板のカスタマイズ

○5. スタイルの変更

CSSを使って掲示板のデザインをカスタマイズできます。

例えば、次のようにして投稿フォームのスタイルを変更できます。

<head>
  <style>
    form {
      background-color: #f9f9f9;
      padding: 20px;
      border-radius: 5px;
    }

    label {
      font-weight: bold;
    }
  </style>
</head>

○6. 画像の投稿

投稿フォームに画像アップロード機能を追加する方法です。

<form action="投稿処理のURL" method="post" enctype="multipart/form-data">
  <!-- 他のフォーム要素 -->
  <label for="image">画像:</label>
  <input type="file" name="image" id="image">
  <br>
  <input type="submit" value="投稿">
</form>

PHPコードで画像のアップロード処理を行います。

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // 他の処理

  if (is_uploaded_file($_FILES['image']['tmp_name'])) {
    $image_path = 'images/' . $_FILES['image']['name'];
    move_uploaded_file($_FILES['image']['tmp_name'], $image_path);
    $post .= ' <img src="' . $image_path . '">';
  }

  // データ保存処理
}
?>

●注意点

○7. 文字コード

文字化けを防ぐために、HTMLとPHPファイルの文字コードは「UTF-8」に統一してください。

○8. セキュリティ対策

掲示板には悪意ある投稿やスパムが寄せられることがあります。

次のような対策を行ってください。

入力値のチェック
htmlspecialchars関数でエスケープ処理
CSRF対策

●応用例

○9. ページネーション

投稿が多くなった場合、ページネーションを実装して、投稿を分割表示することができます。

ページネーションのサンプルコードを紹介します。

<?php
$posts_per_page = 5;
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$offset = ($page - 1) * $posts_per_page;

$posts_data = file('posts.txt');
$total_posts = count($posts_data);
$total_pages = ceil($total_posts / $posts_per_page);

$posts_data = array_slice($posts_data, $offset, $posts_per_page);
?>

<div id="posts">
  <?php foreach ($posts_data as $post): ?>
    <div class="post">
      <?= nl2br(htmlspecialchars($post, ENT_QUOTES, 'UTF-8')) ?>
    </div>
  <?php endforeach; ?>
</div>

<div id="pagination">
  <?php for ($i = 1; $i <= $total_pages; $i++): ?>
    <?php if ($i === $page): ?>
      <span><?= $i ?></span>
    <?php else: ?>
      <a href="?page=<?= $i ?>"><?= $i ?></a>
    <?php endif; ?>
  <?php endfor; ?>
</div>

○10. 投稿の削除機能

管理者が投稿を削除できる機能を実装することができます。

投稿の削除機能のサンプルコードを紹介します。

<?php
if (isset($_GET['delete'])) {
  $delete_index = (int)$_GET['delete'];
  array_splice($posts_data, $delete_index, 1);
  file_put_contents('posts.txt', implode('', $posts_data));
  header('Location: ' . $_SERVER['PHP_SELF']);
  exit;
}
?>

<div id="posts">
  <?php foreach ($posts_data as $index => $post): ?>
    <div class="post">
      <?= nl2br(htmlspecialchars($post, ENT_QUOTES, 'UTF-8')) ?>
      <a href="?delete=<?= $index ?>">削除</a>
    </div>
  <?php endforeach; ?>
</div>