こんにちは、穏やか暮らし計画ライターのあらです。
本記事では、プログラミング初心者である私が0から掲示板サイトを作ることを目標に、勉強している様子を皆さんに発信していますので、プログラミングを1から始めてみたい！掲示板サイトを作ってみたい！という方はぜひ参考にしてみてください。
今回はついにHTML,CSS,PHPの基本も理解できてきたので、早速掲示板制作に取り掛かろうと思います。
本記事の内容
- 掲示板の必要なものを考える
- コーディングする際前にイメージしやすいやり方
- HTMLで掲示板サイトの枠組みを作成する
作る掲示板のイメージについて
掲示板を作ると言っても、そこらへんの掲示板サイトを作るのは無理があるので、簡易的でとてもシンプルな掲示板を作ろうと思います
- サイトの題名
- 投稿する場所作り
- 投稿者ネーム
- 投稿フォーム
- 投稿ボタン
- 投稿された場所作り
掲示板サイトなら最低限、これらの要素がないと成り立ちませんので、この6つをHTMLでコーディングしていきたいと思います。
こんな感じでコーディングしていきたいと思います。紙でも何かのアプリでも良いので、このように最初からコードを書かずに、どのようにコーディングするか別のところで考えてからVscodeに移ると、こんがらがることなく進められます。
実際のHTMLコード
実際に書いたコードがこんな感じになりました。やり方としては、
- 必要なものを考える
- それに対してどんなタグが必要か調べる
- 分からない・曖昧なタグは使い方を調べる
- コードを書く
これは掲示板を作るときだけではなく、どんなものを作る上でもこの行程であれば、難しいコードでなければ大概のことはできるのかなと思っています。
先ほど書いたコードをChromeで実行してみましょう。
実際の実行結果がこちらになります。興味がある方はご覧ください。
araphp.html.xdomain.jp/keijiban.html
まだHTMLでしか構築していないので、配置はぐちゃぐちゃですし、色も白黒なのでとても見栄えが悪くなっていますが、それは仕方ないですね。
もちろんPHPのコードも入っていませんので、投稿ボタンを押しても投稿されません。
HTMLはサイトの枠組みなので装飾（配置や色・大きさ)の指定はできないので、次回はサイトの見栄えをよくするために、CSSスタイルシートをこのHTMLコードに組み込んで、サイト全体を見やすくするのが今後の第一目標になると思います。
最後に
今回はHTMLを使って、掲示板の枠組み作りをしました。
おそらくですが掲示板サイトを作る上での作成難易度はHTML＜CSS＜PHPの順に難しいと思われます。PHPは1番最初に本で学びましたし、HTML/ CSSを学び始めてから一切触れていないので忘れている可能性が高いので、つまずきそうではありますが、調べて頑張っていきたいと思います。
どんどん自分が作った掲示板の機能が発展していくと思うと、今後が楽しみでいっぱいです。今回のことがさっぱり分からないという方がいましたら、私のプログラミング学習記事Part1からご覧ください。
