こんにちは!!ライターのTomomiです。
今日は現在勉強中のHTMLやCSS、PHPを使って掲示板を作ることが出来るというのを知ったので、少し勉強してみました。
「php初心者の私がいきなりphpで掲示板を作るにはどうしたらいいか??」
普通に考えればそれは無謀なのかもしれません。
しかし、私の性格的にphpを勉強するにもその楽しさを実感しなければ続かないと思ったので、教科書でお勉強するスタイルは一旦休憩して、まずは実践してphpの楽しさを見つけることをしてみようと思いました。
私の今持っている知識は、HTMLとCSSをほんの少しかじった程度。
PHPに関しては、初心者本を何冊か読んで使い方は全くわからないけど変数や配列、代表的な構文がな~んとなく分かる程度です。
分かると言っても深く理解しているわけではなく、構文を見ても「あ~、なんか見たことある気がするけどどうやって使うんだっけ??」くらいのレベルです(´・ω・`)
ではいきなりですが、本題に入りたいと思います。
今回は掲示板を作りたいのですが、いきなり全部はできないのでまずはHTMLで掲示板の見た目を先に作っていきたいと思います。
もくじ
イメージしてる掲示板
見た目はこんな感じの掲示板をイメージしています。
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 | 行数を指定できます。
例えば「 こちらも、あくまでデフォルト状態での話で、テキストフィールドを引き延ばしている状態では3行以上書き込めます。 |
maxlength | 入力部分に書き込める最大文字数を指定できます。
例えば「 |
wrap | ユーザーが改行を入れずに入力した場合に、入力フォームに指定している横幅(文字数)を超えてしまう場合に自動で折り返しを行ってくれる属性。
私は今回、「 なので、“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属性の記入は必須です。 |
type | 外部ファイルのMIMEタイプを記述します。
今回はCSSファイルを外部ファイルとしているので記述は「 MIMEタイプについてはこちらのページでとても詳しく書かれているので興味のある方は合わせてどうぞ。 |
media | 外部ファイル(ここではCSSファイルのこと)が対象とするメディアを示しており、メディアとは出力機のこと。
「 例えば、もし対象とする出力機がプリンタであれば記述は「 |
ここまで準備をしておけば、次回CSSでのデザイン変更にスムーズにとりかかることが出来るかと思います。たぶん・・・(・_・;)
HTMLファイルとCSSファイルの保存先について
今回作成したHTMLファイルとCSSファイルの保存先ですが、掲示板を作るということで最終的にはPHPを導入していくことになります。
PHPを使うためにはサーバーが必要になってくるため、今回私はXAMPP(仮想サーバー)を使用しています。(PHPについてまだまだわからないことだらけなので、とりあえず練習するために今は無料の仮想サーバーで十分かと・・・汗)
ですので、保存先はデスクトップではなく、「xampp→htdocs→(htdocsの中にファイルを作る、ファイル名は自分がわかれば何でもいいです)→作ったファイル(今回私はwebnoteというファイルを作成しました)の中」にHTMLファイルとCSSファイルを保存しました。
最初からここに保存しておけば、後々PHPを導入した時に楽かなと思ったので(´・ω・`)
あとがき
次回は、CSSを使ってテキストを画面の中央に揃えたりフォントの種類を少し変えてみたりしていきたいと思います。そして最後にPHPを導入していく予定です。
長々と記事を読んでいただきありがとうございました!!
間違いもあるかもしれませんが、これからも少しずつ頑張っていきますのでよろしくお願いします(´;ω;`)
- 週間Tweaks:ステータスバーの時刻をダブルタップで日付に切り替え「DateTap」など - 2018/02/12
- 週間Tweaks:iPhoneXでスワイプアップでロック「SwipeUpLockX」やドックをカスタマイズ「Marina」など - 2018/02/05
- 週間Tweaks:iPhoneXのアプリスイッチャーでスワイプでアプリ終了「EasySwitcherX」など - 2018/01/29