実践コーディングスキル - 第11章 Lesson5

第17回:フッターをマークアップしよう(3)

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

ウェブマガジンのフッターをマークアップする方法を解説しています。
ここでは、お問い合わせフォームをformタグを使って作成していきます。



この動画で学べること

・<textarea>タグでフォームの入力部分を作成する方法
・フォームの送信ボタンを作成する方法



<textarea>タグとボタンでフォームを作ろう

今回は、フッターの右下にあるお問い合せ部分にフォームを追加して、入力できるボックスと送信ボタンを作っていきましょう。
<h4>の下に<form>タグを追加し、入力するボックスを<textarea>タグ、送信ボタンを<input>タグで記述していきます。



 <form> <textarea></textarea><br> <input type="submit" value="送信する" class="submit"> </form>



<textarea>タグと<input>タグに対して横幅と縦幅を指定し、文字のスタイルをかけていきます。



div#contact form textarea { width: 372px; height: 35px; margin: 10px 0; border: 1px solid #dcdddf; } <span></span> div#contact form .submit { width: 127px; height: 30px; background-color: #7e7e7e; border: none; color: #fff; font-weight: bold; float: right; } 



保存してブラウザで見てみましょう。
テキスト入力のボックスと送信ボタンができあがりました。
しかし、今の状態ではボタンが押せるのかわからないデザインになっているので、マウスがボタンに乗った時にカーソルがポインターに変わり、色が薄くなるように設定しましょう。
擬似クラス:hoverを使って書いていきます。



div#contact form .submit:hover { opacity: 0.8; cursor: pointer; }



保存してブラウザで見てみましょう。
マウスをボタンの上にもって来た時に、ポインターになってボタンの色が変わったので、ボタンを押せると認識できるデザインになりました。