2021/12/15 よりサイトリニューアルしました

PHP,MySQLで大喜利サイトを作ってみる②HTMLでモックの作成

大喜利サイト

 

前回、超アナログ的ですがノートに殴り書きで大喜利サイトの構想について図にしてみました。↓

 

今回はそれをもとに、HTMLでモックの作成に入りたいと思います。

いきなりPHPファイルの作成でもいいのでしょうけど、なんせそこまでPHPPHP出来ないので(なんやそれ)とりあえず面倒ですが下書き的要素としてモックを作成します。

とりあえず今作ろうとしているサイトは「トップページ」にお題と回答、及び表彰が集中しているので、これが命となります。他のページもありますが、とりあえず今回はトップページをピックアップしてここでまとめようかと思います。

 

 

先にモックの完成画面から

お題更新時

※テストの為お題カードはTwitter大喜利の大喜利スパーク様より拝借しておりますm(__)m運用時に使用する事はありません。

とりあえず感じだけですのでまだまだ修正が必要ですが、おおかたこんな感じで、お題、投稿欄、回答一覧、の並びで表示させます。Twitter大喜利に似たかんじですね。だったらサイト作る意味あんの?ってなるけどもあるんです!理由は自己満足じゃ!

スマホメインでスタイルしたので、PCがズタボロですがこちらも後で修正します。

続いて表彰画面いきます。

 

表彰発表

※テストの為、表彰のカードも大喜利スパーク様より拝借しております。m(__)m運用時は使用しません。

お題の下に3つ、順に優勝、準優勝、特別賞のカードを掲載して結果発表とするようにします。

投稿欄は〆の期間が過ぎた時点で記入出来ないようにする予定。

結果が出たトップページは次のお題が出た時点で過去お題としてアーカイブとして残していきます。

続いてコード。

 

 

プログラム

HTML/css

javascript

この辺は説明はいらないと思うので割愛します。

 

 

次回予定

とりあえずモックが出来ましたので、次回はPHPとデータベースを使ってログイン画面を作りたいと思います。

CMSを作って、お題の更新や結果発表を簡単に操作できるようにしたいので、管理者のログイン画面を作成します。

 

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です