HTMLスキル - 第8章 Lesson3

ユーザーに親切なお問い合わせメールを作成してみよう

   

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

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

mailto:を使用して、ユーザーが入力しやすいメールが立ち上がるように工夫してみましょう。



この動画で学べること

・mailtoを使って、メールソフトを開くようにする方法



お問い合せボタンのクリックで、メールソフトを開くようにする方法

リストの一番下にある「お問い合わせ」の部分をまず<a>タグで囲み、mailtoを設定していきましょう。
まずはメールアドレスを書いていきます。あとでエンティティ化するのですが、今すると件名などを入れた時にわかりづらくなってしまうので、今はメールアドレスをそのまま書いておきます。
次にメールの件名を作っていきましょう。
メールアドレスの次に「?subject=」と入力し、件名を書いていきます。
本文は件名の後ろに「&amp;body=」と入力し、本文を書いていください。



<ul>
<li>事業内容</li>
<li>会社概要</li>
<li>ニュース</li>
<li><a href="mailto:test@test.com?subject=NESTphoneへのお問い合せ&amp;body=(1)お名前:(2)お電話番号:(3)お問い合せ本文:">お問い合わせ</a></li>
</ul>



一度ブラウザで見てみましょう。
件名や本文の入った状態でメールソフトを起動させることができました。
しかし、今のままでは本文に改行がなく見づらいので、改行の特殊「%0D%0A」を入れて、文章を見やすくしましょう。
あとは、メールアドレス、件名、本文をエンティティ化して、作ったコードに置き換えましょう。



<ul>
<li>事業内容</li>
<li>会社概要</li>
<li>ニュース</li>
<li><a href="mailto:&#116;e&#115;&#116;&#64;t&#101;&#115;&#116;&#46;&#99;&#111;&#109;?subject=NESTphone%82%D6%82%CC%82%A8%96%E2%82%A2%8D%87%82%ED%82%B9&amp;body=%281%29%82%A8%96%BC%91O%81F%0D%0A%282%29%82%A8%93d%98b%94%D4%8D%86%81F%0D%0A%283%29%82%A8%96%E2%82%A2%8D%87%82%ED%82%B9%96%7B%95%B6%81F">お問い合わせ</a></li>
</ul>



では保存してブラウザで見てみましょう。
HTMLファイルでは記号ばかりが並んでいますが、メールソフトを立ち上げて見てみると、ちゃんと指定した文字が入っています。