初めに
前回にの
PHPと Vue.jsで簡易掲示板を作ろう〜その１(PHP編)〜
の続きです。
３つのパートに分けて
1.PHPでとりあえず動く掲示板を作る
２.SCSSで簡単なデザインを作る←今回はここ
３.Vue.jsで少しリッチな動きをつける
目次
・このパートでの完成イメージ
・HTML部分の変更の記述
・SCSSの記述
・まとめ
このパートでの完成イメージ
・ボタンホバー時
・テキスト入力欄フォーカス時
・投稿されたメッセージのホバー時
今回はSCSSでこれらのスタイルをつけていきます。
HTML部分の変更の記述
前回のHTML部分にclassと一つだけdivをつけていきます
<divclass="container"><h1class="title">簡易掲示板へようこそ(XSS対策済み)</h1><!-- 投稿ボタン --><formmethod="post"class="text-form"><!-- 中の投稿ボタンが押されたらPOSTのリクエストを送る --><!-- NEW class追加 --><inputclass="text"type="text"name="text"><!-- NEW class追加 --><inputclass="submit"type="submit"value="投稿する"><!-- NEW class追加 --></form><divclass="frame"><!-- NEW 追加 --><tableclass="contents"><!-- NEW class追加 --><?phpforeach((array)$all_dataas$post_data):?><tr><formmethod="post"><tdclass="text"><!-- $post_data[2]は$post_text(テキストデータ) --><!-- NEW class追加 --><?phpechoh($post_data[2]);?></td><tdclass="date"><!-- $post_data[1]は$date(日付) --><!-- NEW class追加 --><?phpecho$post_data[1];?></td></form></tr><?phpendforeach;?></table></div></div>SCSSの記述
style.scss
.container{border:1pxsolidblack;text-align:center;// 入力欄と投稿ボタン&.text-form{// text入力欄&.text{width:70%;padding:11px15px;font-size:16px;border-radius:3px;border:2pxsolid#ddd;box-sizing:border-box;// フォーカス時&:focus{border:2pxsolid#ff9900;z-index:10;//前面に表示outline:0;// 元からある線を消す}}// 投稿ボタン&.submit{border-radius:5%;font-size:16px;text-align:center;cursor:pointer;padding:9px15px;background:#000066;color:#ffffff;transition:.3s;box-sizing:border-box;// ホバー時&:hover{border:2pxsolid#000066;color:#000066;background:#ffffff;}}}// 枠線&.frame{margin-top:15px;border:13pxsolid#993300;// メッセージと日付&.contents{width:100%;background:#009900;// メッセージ&.text{font-size:normal;border:1pxsolidwhite;border-radius:5px;// ホバー時&:hover{background:white;}}// 日付&.date{font-size:normal;float:right;}}}}まとめ
今回のパートではSCSSで少しだけ見た目をつけました！なんの計画もなしにスタイルを作成するとデザインが壊滅することが分かりました😭
次回はVue.jsでリッチな動きをつけます。
この記事を見てくださったあなたの成長を応援します！！
ーーーー
次のパート：coming soon
この記事もいかがですか？
・初心者に捧げる〜PHPを使って九九の表を作ろう〜
・Vue.jsで作る！自動保存するToDoリスト~その１~
・初心者に捧げるハンバーガーメニューの作り方