【連載第7回】脱・黒い画面！ユーザーが使う「表側の画面」を作り込む
未経験からWebアプリ開発を目指す「AlmaLinux 9とLAMP環境で作る！Webアプリ開発完全ロードマップ（全12回）」の第7回です。
これまでの6回の連載で、私たちは地道な「インフラ構築」を行ってきました。
サーバーを契約し、OSをアップデートし、Apacheの設定を変え、データベースを作り、権限と戦い、PHPで接続テストを行い…。
正直、「地味で辛い作業」だったと思います。
しかし、今日からは違います！
今回からは、いよいよユーザーの目に触れる「Webアプリケーション本体」の開発に入ります。
真っ白だった画面に、タイトルロゴ、投稿フォーム、色鮮やかなボタン、そして写真が並ぶタイムラインを作り上げていきます。
今回のゴールは、機能（PHP）を埋め込む前の「最強のハリボテ（見た目）」を完成させること。
HTML5とCSS3を駆使して、スマホでもPCでも美しく見える「レスポンシブデザイン」の掲示板を作りましょう。
待ってました！やっと「アプリ作り」って感じですね！
でも先生、僕デザインセンスとか全くないんですけど…大丈夫でしょうか？
なんかダサいサイトしか作れる気がしません。
安心して。Webデザインは「センス（才能）」ではなく「ロジック（論理）」よ。
余白の取り方、色の数、配置のルールさえ守れば、誰でもプロっぽい画面は作れるの。
今回は、最近の流行りである「シンプルで見やすいカード型デザイン」のコードを全部用意したから、それを書き写しながら構造を理解していきましょう。
本講座のカリキュラム（全12回）
現在地は第7回です。ここから「アプリ開発編」のスタートです！
- サーバー準備編：なぜVPSが必要？AlmaLinux 9の初期設定とSSH接続
- Webサーバー編：Apache（httpd）のインストールとファイアウォール設定
- データベース編：MariaDB（MySQL）のインストールとセキュリティ設定
- プログラミング言語編：PHP 8.xの導入と設定ファイルのチューニング
- 権限・パーミッション編：LinuxでWebサイトを公開するための「所有者」の概念
- 接続テスト編：PHPからデータベース（DB）に接続してみよう
- 【今回】アプリ開発①：HTML/CSSで掲示板の「見た目」を作る
- アプリ開発②：投稿機能（Create）の実装とデータの保存
- アプリ開発③：一覧表示機能（Read）と画像表示の仕組み
- アプリ開発④：編集・削除機能（Update/Delete）の実装
- セキュリティ編：XSSやSQLインジェクション対策の基礎
- 公開編：独自ドメイン設定と無料SSL（Let’s Encrypt）でHTTPS化
Webデザインの基礎知識：HTMLとCSSの役割分担
コードを書く前に、これから扱う2つの言語の役割を明確にしておきましょう。
HTML（HyperText Markup Language）
これはWebページの「骨格」を作る言語です。
「ここにタイトルを置く」「ここに入力欄を作る」「ここに画像を置く」といった、ページの構造を定義します。
HTMLがないと、ブラウザは何を表示していいか分かりません。
CSS（Cascading Style Sheets）
これはWebページの「化粧（装飾）」を担当する言語です。
「タイトルの文字を赤くする」「ボタンを丸くする」「画像を横並びにする」「スマホの時は文字を大きくする」といった見た目の指定を行います。
CSSがないと、Webページはただの文字の羅列になってしまいます。
今回は、この2つのファイルを組み合わせて、ひとつのWebページを作り上げます。
手順1：プロジェクト用ディレクトリの作成
まずは、今回作る掲示板アプリ専用のフォルダ（ディレクトリ）を作成しましょう。/var/www/html/ の直下にファイルを散らかすのは、管理上あまり良くありません。
SSHでサーバーに接続し、以下のコマンドを実行してください。
mkdir /var/www/html/bbs chown apache:apache /var/www/html/bbs chmod 755 /var/www/html/bbs
これで、http://[IPアドレス]/bbs/ というURLでアクセスできる専用の場所ができました。
手順2：HTMLで骨組みを作る（index.php）
それでは、メインファイルを作成します。
拡張子は .html ではなく、将来的にPHPプログラムを埋め込むために最初から .php にしておきます。
vi /var/www/html/bbs/index.php
以下のコードをコピー＆ペーストしてください。
（※まだPHPのロジックは入っていません。純粋なHTMLだけの状態です）
<!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="style.css">
</head>
<body>
<header>
<h1>ひとこと掲示板</h1>
</header>
<main>
<!-- 投稿フォームエリア -->
<div class="form-container">
<form action="index.php" method="post" enctype="multipart/form-data">
<div class="input-group">
<label>ニックネーム</label>
<input type="text" name="name" required placeholder="例：名無しさん">
</div>
<div class="input-group">
<label>コメント</label>
<textarea name="comment" required placeholder="今の気持ちをつぶやこう"></textarea>
</div>
<div class="input-group">
<label>画像（任意）</label>
<input type="file" name="image" accept="image/*">
</div>
<button type="submit" name="submit" class="submit-btn">投稿する</button>
</form>
</div>
<hr>
<!-- 投稿一覧エリア（今はダミーデータ） -->
<div class="timeline">
<!-- 記事1 -->
<article class="post">
<div class="post-header">
<span class="post-name">リナックス先生</span>
<span class="post-date">2026/01/05 12:00</span>
</div>
<div class="post-content">
<p>これはHTMLとCSSで作ったテスト投稿です。まだデータベースとは繋がっていません。</p>
<img src="https://placehold.jp/300x200.png" alt="ダミー画像" class="post-image">
</div>
</article>
<!-- 記事2 -->
<article class="post">
<div class="post-header">
<span class="post-name">コウ君</span>
<span class="post-date">2026/01/05 12:05</span>
</div>
<div class="post-content">
<p>早くPHPを書いて動くようにしたいです！</p>
</div>
</article>
</div>
</main>
<footer>
<p>© 2026 Linux Koubou BBS Project</p>
</footer>
</body>
</html>HTMLコードの重要ポイント解説
- <meta name=”viewport” …>
これが「スマホ対応（レスポンシブ）」にするための魔法の呪文です。これがないと、スマホで見た時にPCサイトがギュッと縮小されて表示され、文字が豆粒のようになってしまいます。 - enctype=”multipart/form-data”
<form>タグにあるこの属性は、「ファイルをアップロードする時」に絶対に必要な設定です。これを書き忘れると、テキストは送れても画像データだけがサーバーに届かないという現象が起きます。 - accept=”image/*”
ファイル選択画面を開いた時に、自動的に「画像ファイルだけ」を表示するようにする親切設計です。
手順3：CSSでデザインを整える（style.css）
今のままブラウザで見ると、ただの文字と入力欄が縦に並んでいるだけの、非常に質素な画面です。
ここにCSSを適用して、モダンなアプリ風に変身させましょう。
vi /var/www/html/bbs/style.css
/* 全体のリセットと基本設定 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
background-color: #f0f2f5; /* 背景は薄いグレーで見やすく */
color: #333;
line-height: 1.6;
}
/* ヘッダー */
header {
background-color: #4CAF50; /* テーマカラーは緑 */
color: white;
padding: 1rem;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* メインコンテンツの幅制限 */
main {
max-width: 600px; /* スマホなら全幅、PCなら600pxまで */
margin: 20px auto;
padding: 0 10px;
}
/* 投稿フォームのデザイン */
.form-container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.input-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
font-size: 0.9rem;
}
input[type="text"], textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
textarea {
height: 100px;
resize: vertical;
}
.submit-btn {
width: 100%;
background-color: #4CAF50;
color: white;
border: none;
padding: 12px;
font-size: 1.1rem;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.submit-btn:hover {
background-color: #45a049;
}
/* 区切り線 */
hr {
margin: 30px 0;
border: 0;
height: 1px;
background: #ccc;
}
/* タイムライン（記事一覧） */
.post {
background: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.post-header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
.post-name {
font-weight: bold;
color: #4CAF50;
}
.post-date {
font-size: 0.8rem;
color: #888;
}
.post-image {
max-width: 100%;
border-radius: 4px;
margin-top: 10px;
border: 1px solid #eee;
}
/* フッター */
footer {
text-align: center;
padding: 20px;
color: #888;
font-size: 0.8rem;
}CSSデザインのこだわりポイント
- max-width: 600px; margin: 0 auto;
これが「スマホ対応」の肝です。PCの大画面で見た時に、横にびよーんと伸びすぎないよう幅を制限しつつ、margin: autoで常に画面の中央に配置されるようにしています。 - box-shadow（影）とborder-radius（角丸）
最近のアプリっぽい「カード型デザイン」にするためのテクニックです。背景を少し浮き上がらせることで、クリックできそうな質感や、情報のまとまりを表現しています。 - input, textareaの幅100%
スマホの狭い画面でも、PCの広い画面でも、入力欄が親要素いっぱいまで広がるようにしています。これでデバイスを問わず入力しやすくなります。
手順4：権限の最終確認
ファイルを作成した際、SSHで root として作業していると、ファイルの所有者が root になってしまっていることがあります。
このままでは、次回以降PHPでファイル操作をする時にエラーになる可能性があるため、念のため所有者をWebサーバー（apache）に統一しておきましょう。
chown -R apache:apache /var/www/html/bbs
完成画面を確認しよう！
お疲れ様でした。それではブラウザを開いて、作成したページにアクセスしてみましょう。
http://[あなたのVPSのIPアドレス]/bbs/
（※ファイル名を index.php にしたので、URLの最後にファイル名を書かなくても自動で表示されます）
おおーっ！すごい！
なんか一気に「Webサービス」っぽくなりました！
スマホで見ても崩れてないし、入力欄も使いやすそうです！
いい反応ね。
でも、今はまだ「投稿ボタン」を押しても何も起きない（ページが再読み込みされるだけ）わよね？
それは、見た目（HTML）しかなくて、中身（PHP）が入っていないからよ。
次回予告：PHPで「投稿機能」を実装する
今回で、Webアプリの「ガワ（見た目）」は完璧に仕上がりました。
次回は、いよいよこのフォームに入力されたデータをPHPで受け取り、データベースに保存する「Create（新規作成）」機能を実装します。
ここから先は、HTMLのようなマークアップではなく、本格的な「プログラミングロジック」の世界に入ります。if文 や $_POST といった呪文が出てきますが、一つひとつ丁寧に解説するので安心してくださいね。
自分の手で作った画面が動く感動まで、あと一歩です！
▼まだサーバーを用意していない方はこちら
コメント