PHP初心者がいきなり掲示板を作ってみた。その1（HTML編）

こんにちは!!ライターのTomomiです。

今日は現在勉強中のHTMLやCSS、PHPを使って掲示板を作ることが出来るというのを知ったので、少し勉強してみました。

「php初心者の私がいきなりphpで掲示板を作るにはどうしたらいいか??」

普通に考えればそれは無謀なのかもしれません。

しかし、私の性格的にphpを勉強するにもその楽しさを実感しなければ続かないと思ったので、教科書でお勉強するスタイルは一旦休憩して、まずは実践してphpの楽しさを見つけることをしてみようと思いました。

私の今持っている知識は、HTMLとCSSをほんの少しかじった程度。

PHPに関しては、初心者本を何冊か読んで使い方は全くわからないけど変数や配列、代表的な構文がな～んとなく分かる程度です。

分かると言っても深く理解しているわけではなく、構文を見ても「あ～、なんか見たことある気がするけどどうやって使うんだっけ??」くらいのレベルです(´・ω・｀)

ではいきなりですが、本題に入りたいと思います。

今回は掲示板を作りたいのですが、いきなり全部はできないのでまずはHTMLで掲示板の見た目を先に作っていきたいと思います。

もくじ

イメージしてる掲示板
ベースとなるHTMLコード
入力フォームを複数行入力可能にする要素「textarea」
- 今回使用した<textarea>要素の属性
- <textarea>属性のそれぞれの役割
CSSをHTMLに読み込ませるための準備
HTMLファイルとCSSファイルの保存先について
あとがき

イメージしてる掲示板

見た目はこんな感じの掲示板をイメージしています。

HTMLについてもそこまで詳しい訳ではないので、少しずつやっていきたいと思います。

ベースとなるHTMLコード

初心者の私には何もない状態からHTMLで骨組みを作るなんて無理！！

ということで、最初のベース部分は誰かが作られたものを参考にさせていただこうと思います。

今回参考にさせていただいたのはこちらのページです。

特にphpについてとても詳しい説明が記載されているので、素人の私なんかがついていけるレベルではないのですが、知識のある方はこちらのサイトを見た方が手っ取り早いと思います^^;

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>掲示板</title>
</head>
<body>
<h1>掲示板</h1>
<section>
    <h2>新規投稿</h2>
    <form action="" method="post">
        名前: <input type="text" name="name" value=""><br>
        本文: <input type="text" name="text" value=""><br>
        <input type="submit" value="投稿">
    </form>
</section>
<section>
    <h2>投稿一覧</h2>
    <p>投稿はまだありません</p>
</section>
</body>
</html>

参考にさせて頂いたページのhtmlコードをブラウザで表示してみると以下の画像のようになりました。

ちなみに、先ほどのページのhtmlコードには記載されていなかった<html lang="ja">、<head>タグ、<body>タグはあった方が素人の私にはわかりやすいかなということで、上記のhtmlコードには追加させていただいてますので、参考にさせていただいたページのコードとは少し違います。

これをベースとして、少しずつイメージしているデザインに変えていきたいと思います。

入力フォームを複数行入力可能にする要素「textarea」

まずは、本文を入力するフォーム部分を少し変えて複数行入力できるようにしてみたいと思います。

このように、複数行入力を可能にしてくれるのは<textarea>という要素です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>掲示板</title>
</head>
<body>
<h1>掲示板</h1>
<section>
    <h2>新規投稿</h2>
    <form action="" method="post">
        名前:<input type="text" name="name" value=""><br>
        本文:<textarea name="comment" cols="30" rows="3" maxlength="80" wrap="hard" placeholder="80字以内で入力してください。"></textarea>
        <input type="submit" value="投稿">
    </form>
</section>
<section>
    <h2>投稿一覧</h2>
    <p>投稿はまだありません</p>
</section>
</body>
</html>

ベースのHTMLに<textarea>要素を追加してみました。（上記の13行目の黄色くハイライトされた部分です。）

たったこれだけの要素を加えるだけで、本文入力部分のフォームがそれっぽくなってきました。

ただ、この<textarea>要素のリサイズ機能（右下の入力フォームを引き伸ばしできる部分）が使えるのは

Firefox 4以上
Safari 7以上
Google Chrome 4以上
Opera 30以上

この4つのどれかの条件じゃないと使えないようです(´；ω；｀)
詳しくはこちらのページに詳しく書かれています。

今回使用した<textarea>要素の属性

このような入力フォームにするために使用した<textarea>要素の中に追加した属性は

name
cols
rows
maxlength
wrap
placeholder

の6つの属性です。

初めて使った要素なので、こんな便利なものがあるんだ!!と感動しました(´ω｀)

<textarea>属性のそれぞれの役割

属性	説明
name	`<textarea>`要素に名前をつける（名前は何でもいいらしいのですが、ユーザーが入力した文章と一緒に送信されるため必ず名前を指定しなければならないらしいです。）
cols	一行の文字数を指定できます。例えば「`cols="30"`」なら、横一行に書き込める文字は30文字です。この属性には初心者の私にとっては落とし穴がありました。これはあくまで大体の目安らしく、入力内容によって、また、ブラウザによっては幅が違うためピッタリ30文字というわけではないようです。また、この文字数の設定はテキストフィールドがデフォルト状態（入力部分を引き伸ばしたりせず、何もさわっていない初期状態）の時の文字数を指定しているので、フィールドを引き伸ばした状態では30文字以上書き込めます。
rows	行数を指定できます。例えば「`rows="3"`」なら、テキストフィールド（入力部分）の行数は3文字です。こちらも、あくまでデフォルト状態での話で、テキストフィールドを引き延ばしている状態では3行以上書き込めます。
maxlength	入力部分に書き込める最大文字数を指定できます。例えば「`maxlength="80"`」なら、ユーザーが書き込める最大文字数は80文字です。
wrap	ユーザーが改行を入れずに入力した場合に、入力フォームに指定している横幅（文字数）を超えてしまう場合に自動で折り返しを行ってくれる属性。私は今回、「`wrap="hard"`」と指定しました。これは、cols属性で指定した文字数を超えてしまう場合に折り返しされます。なので、“hard”を指定する場合はcols属性の指定は必須なようです。 ※補足です。この属性の説明で、「改行」ではなく「折り返し」と書かせていただきました。実は、「改行」と「折り返し」は別物なんだとか・・・知らなかった(´；ω；｀) 「改行」は、実際の画面上にも反映され、実際に改行を行ったところで段落が変わるかと思います。「折り返し」とは、ソースコード内での改行のことで実際の画面上で改行され段落が変わることはないとのこと。この話はこちらのページを参考にさせていただきましたので、興味のある方は合わせてどうぞ。
placeholder	入力部分に見本となるテキストを入れてくれます。この属性で入れた見本のテキストは、ユーザーが記入しようとすると自動で消えてくれるので、ユーザーがわざわざ見本テキストを消さなければならないということにはならないので便利ですね。

たったこれだけの属性で入力部分がだいぶ変わりました!!

HTMLを大きく変えるのはこの本文を入力するフィールドくらいです。

あとは文字を中心に揃えたり、フォントの種類を変えたりなどのデザイン部分になってくると思うのでCSSの方で変更していくことになりそうです。

CSSをHTMLに読み込ませるための準備

CSSでさらに掲示板のデザインを変更していく記事は次回書いてみようと思うのですが、そのための下準備だけ先にしておきたいと思います。

CSSはHTML内にも書くことは出来るようなのですが、それをしてしまうとコードがごちゃごちゃして見にくくなるのと、あとから更に編集したいと思った時にとても面倒くさいことになるので、このHTMLファイルとは別にCSSファイルを作り、そのCSSファイルをHTMLファイルに読み込ませるようにしていきたいと思います。

CSSファイルを作る

まずは、HTMLファイルとは別でCSSファイルを作っておきます。

普段使っているテキストエディタやメモ帳に、新規作成でファイルを作りわかるように名前を付けておきます。

拡張子が「.css」であれば名前は何でも良いと思います。

私は「keijiban.css」という名前にしておきました。ちなみにHTMLファイルの方は「keijiban.html」という名前にしています。

CSSファイルを読みこませるための<link>要素をHTMLファイルに追加する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="keijiban.css" rel="stylesheet" type="text/css" media="all">
<title>掲示板</title>
</head>
<body>
<h1>掲示板</h1>
<section>
    <h2>新規投稿</h2>
    <form action="" method="post">
        名前:<input type="text" name="name" value=""><br>
        本文:<textarea name="comment" cols="30" rows="3" maxlength="80" wrap="hard"
 placeholder="80字以内で入力してください。"></textarea>
        <input type="submit" value="投稿">
    </form>
</section>
<section>
    <h2>投稿一覧</h2>
    <p>投稿はまだありません</p>
</section>
</body>
</html>

HTMLファイルの<head>内に<link>要素を追加しました。（上記の5行目の黄色くハイライトされている部分です。）

<link>要素で使用した属性は

href
rel
type
media

の4つの属性です。

<link>属性のそれぞれの役割

属性	説明
href	外部ファイル（ここではCSSファイルのこと）のURLを記述する。 href属性の記入は必須です。
rel	外部ファイル（ここではCSSファイルのこと）の、HTMLにとってどんな関係かを示す。「`rel="stylesheet"`」で、このCSSはHTMLのスタイルシートであるということを示している。 rel属性の記入は必須です。
type	外部ファイルのMIMEタイプを記述します。今回はCSSファイルを外部ファイルとしているので記述は「`type="text/css"`」です。 MIMEタイプについてはこちらのページでとても詳しく書かれているので興味のある方は合わせてどうぞ。
media	外部ファイル（ここではCSSファイルのこと）が対象とするメディアを示しており、メディアとは出力機のこと。「`media="all"`」で、全ての機器という意味になります。例えば、もし対象とする出力機がプリンタであれば記述は「`media="print"`」となります。

ここまで準備をしておけば、次回CSSでのデザイン変更にスムーズにとりかかることが出来るかと思います。たぶん・・・(・_・;)

HTMLファイルとCSSファイルの保存先について

今回作成したHTMLファイルとCSSファイルの保存先ですが、掲示板を作るということで最終的にはPHPを導入していくことになります。

PHPを使うためにはサーバーが必要になってくるため、今回私はXAMPP（仮想サーバー）を使用しています。（PHPについてまだまだわからないことだらけなので、とりあえず練習するために今は無料の仮想サーバーで十分かと・・・汗）

ですので、保存先はデスクトップではなく、「xampp→htdocs→（htdocsの中にファイルを作る、ファイル名は自分がわかれば何でもいいです）→作ったファイル（今回私はwebnoteというファイルを作成しました）の中」にHTMLファイルとCSSファイルを保存しました。

最初からここに保存しておけば、後々PHPを導入した時に楽かなと思ったので(´・ω・｀)

あとがき

次回は、CSSを使ってテキストを画面の中央に揃えたりフォントの種類を少し変えてみたりしていきたいと思います。そして最後にPHPを導入していく予定です。

長々と記事を読んでいただきありがとうございました!!

間違いもあるかもしれませんが、これからも少しずつ頑張っていきますのでよろしくお願いします(´；ω；｀)

この記事を書いた人
最新の記事

Tomomi

今までWebの世界には全く無縁だった超アナログ人間。無謀にもWebの世界で生きていくことを決意。ハムスターと柴犬好きの文系女子です。最終的にはプログラミングが一人で出来るレベルになることが目標です。がんばりま～す!!

最新記事 by Tomomi (全て見る)