おきがるみがる

お気軽&身軽に生活・仕事・趣味を楽しむ雑記ブログです。一応スナップ写真がメインです。

テーブルと送信フォームを作成する -『HTML5&CSS3レッスンブック』第6章

前回でインデックスページを作りました。『HTML5&CSS3レッスンブック』もいよいよ大詰めのチャプター6でございます。

今回はテーブルと送信フォームを作っていきます。テーブルは比較的知っているのですが、送信フォームの作り方については馴染みがありませんね。外部サービスで受送信とページも用意してくれるのがありますし。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

テーブルと送信フォーム

今回は会社概要のページに使うテーブルと、お問い合わせ用の送信フォームを作成します。

テーブルタグは結構簡単にできましたが、送信フォームはなかなかコーディングも難しい上に環境も整えなければ機能しません。

今回はテキスト通りコーディングだけして、実際に使えるようにはしていませんのであしからず。

HTML(about.html)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>工房について - FOREST STUDIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="about">

<header>
<h1><a href="index.html"><img src="logo.png" alt="">FOREST STUDIO</a></h1>

<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="news.html">お知らせ</a></li>
<li><a href="about.html">工房について</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>

<article>
<h1>工房について</h1>

<p>FOREST STUDIOでは、自然の中にある「森の工房」を運営しています。森の工房は木々のあふれる森の中にあり、四季を通してイベントを開催したり、さまざまなグッズの開発などを行っています。</p>

<table>
<caption>工房の概要・沿革</caption>

<tr>
<th>工房名</th>
<td>FOREST STUDIO</td>
</tr>

<tr>
<th>所在地</th>
<td>〒000-0000 東京都山間部山の町1−3−5</td>
</tr>

<tr>
<th>設立</th>
<td><time datetime="1990-08">1990年8月</time></td>
</tr>

<tr>
<th>主な活動内容</th>
<td>
    <ul>
    <li>工房の運営</li>
    <li>ひまわり畑の管理</li>
    <li>散策コースの整備</li>
    </ul>
</td>
</tr>
</table>
</article>

<footer>
<small>Copylight &copy; FOREST STUDIO, all rights reserved.</small>
</footer>

</body>
</html>

thタグは見出しセル

テーブルタグの使い方はある程度心得ていたつもりでしたが、見出しセルはthタグを使うんですね。これまで全部tdタグでやってました。

テーブルにキャプションを付ける

テーブルにキャプションを付ける場合は、tableタグの中にcaptionタグを挿入します。

記述は1番最初に行うという決まりなので注意が必要です。

キャプションはテーブルの上に表示されますが、CSSで表示位置を変更することが可能です。

HTML(contact.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ - FOREST STUDIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="contact">

<header>
<h1><a href="index.html"><img src="logo.png" alt="">FOREST STUDIO</a></h1>

<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="news.html">お知らせ</a></li>
<li><a href="about.html">工房について</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>

<article>
<h1>お問い合わせ</h1>

<p>ご意見、ご感想などがありましたら、以下の欄にご記入の上、送信してください。また、森の工房やイベントに関するご質問などもお気軽にお寄せください。</p>

<form action="https://www.rescue.ne.jp/form/mail.cgi" method="post">
<input type="hidden" name="_uid" value="XXXXXXXXXXXXXXX">
<input type="hidden" name="_done" value="http://www.www.www/">
<input type="hidden" name="_submit" value="お問い合わせ">
<p>
<label>
名前:<input type="text" name="username">
</label>
</p>

<p>
<label>
メールアドレス:<input type="text" name="usermail">
</label>
</p>

<p>
<label>コメント:
<textarea name="usercomment"></textarea>
</label>
</p>

<p><input type="submit" value="送信"></p>
</form>

<small>Powerd by <a href="http://www.rescue.ne.jp/" target="_blank">CGI RESCUE</a><sup>&reg;</sup></small>
</article>

<footer>
<small>Copylight &copy; FOREST STUDIO, all rights reserved.</small>
</footer>

</body>
</html>

入力欄を作る

お問い合わせフォームの入力欄を作っていきます。inputタグを主に使いますが、複数行に渡る文章を入力する場合はtextareaタグを使います。

送信ボタンはinputタグでtype属性をsubmitと指定するとOKです。ボタンに「送信」と表示するにはvalue属性に「送信」と記述します。

そして投稿フォームであることを示すためにformタグで囲みます。

受送信の設定を行う

ただフォームを作っただけではデータの受送信はできません。

www.rescue.ne.jp

データの受送信を行うために外部サービスを使います。テキストではCGI RESCUEの「フォームデコードサービス」を使っていますね。

利用申込をすれば使えるようになりますが、今回はせずにコーディングだけ行っております。

formタグのaction属性にサービスで指定された値を入力し、inputタグでサービスのユーザーID、送信後に表示するページ野URL、メールのタイトルを入れていきます。

name属性もサービスで決められた値を入力しています。

そして最下部にsmallタグでCGI RESCUEへのリンクを設置して完了です。

CSS

/* アバウトページ */
table, th, td {
    border: solid 1px #aaaaaa;
}

table {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

th, td {
    padding: 10px 20px 10px 20px;
}

th {
    width: 150px;
    background-color: #ffcb63;
    text-align: left;
}

td {
    width: 450px;
    background-color: #ffedce;
}

caption {
    font-weight: bold;
    background-color: #d9d8a7;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 10px;
}

/* お問い合わせページ */
input, textarea {
    display: block;
}

input {
    width: 400px;
}

input[type="submit"] {
    width: 200px;
    background-color: #ffaa00;
    background-image: -webkit-gradient(
        linear,
        left top, left bottom,
        from(#ffe7b8),
        to(#ffaa00));
    background-image: -webkit-linear-gradient(
        top,
        #ffe7b8 0%,
        #ffaa00 100%);
    background-image: linear-gradient(
        to bottom,
        #ffe7b8 0%,
        #ffaa00 100%)
    border: solid 1px #aaaaaa;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

textarea {
    width: 600px;
    height: 120px;
}

テーブルの罫線を重ねる

デフォルトのテーブルでは罫線が2本で、いかにも「テーブルです!」って感じで使いにくかったんですよね。

そこでtableセレクタのborder-collapseプロパティの値をcollapseにすると重ねて、すなわち1本の罫線で表示できます。

この方が締まって見えて良いですね。

テーブルのキャプションの表示位置を変える

テーブルのキャプションの位置を下に変える場合はcaptionセレクタのcaption-sideプロパティの値をbottomで指定します。

フォームのデザインを編集する

まずはラベルを入力欄の上に表示します。これはinput、textareaセレクタのdisplayプロパティの値をblockにします。

このようにinput、textareaセレクタでCSSの編集が可能です。横幅なども変えています。

送信ボタンはinputタグですが、[type=“submit”]と指定することで独自に編集可能です。

次回に仕上げてラストです

次が最終章となります。仕上げとアレンジを施してテキスト読了でございます。