CSSfacebookTweethatenaline2019.06.10レシピマークアップメールアドレスや電話番号のマークアップメールアドレスや電話番号などの連絡先を、a要素を使ってマークアップする方法について解説します。「mailto」について、複数の宛先やCc、メールのタイトル&本文を指定する方法もご紹介します。連絡先のマークアップについて電話番号のリンクメールのリンク連絡先のマークアップについてWebページに連絡先の情報を記載するとき、電話番号やメールアドレスをそのまま通話やメールソフトの起動に結びつけたいことがあります。これらは、a要素のhref属性を使って簡単に設定ができます。電話番号のリンク電話番号のリンクは、href属性に「tel:電話番号」の形で記述します。href="mailto:info@gray-code.com">メール</a></p></div>このリンクをタップ(もしくはクリック)すると、電話が使える端末では次のような「発信」のポップアップが表示されます。スマホで電話番号のリンクをタップしたときの例パソコンなど電話以外の端末では、代替え方法が提示されます。Macのブラウザで電話番号のリンクをクリックすると次のようなFaceTimeによる発信をするかが表示されます。Macのブラウザで電話番号リンクをクリックしたときの例メールのリンクメールのリンクは、href属性に「mailto:メールアドレス」の形で記述します。href="mailto:info@gray-code.com">メール</a></p></div>このリンクをタップ(もしくはクリック)すると、スマホやタブレットでは使用するメールアプリの選択ウインドウが表示されます。スマホでメールのリンクをタップしたときの例パソコンでは、デフォルト設定されたメーラーが起動します。宛先のメールアドレスを複数指定するメールアドレスは複数指定することができます。次のように「,」で区切って指定します。href="mailto:info@gray-code.com,info2@gray-code.com">メール</a></p></div>この例では「info@gray-code.com」と「info2@gray-code.com」の2つを指定しました。同じ形式で3つ、4つと指定することもできます。複数の宛先が設定されている例CcやBccを設定する通常の宛先のみではなく、CcやBccも設定することができます。その場合は、URLのGETパラメータと同じ形式で「?」や「&」を使って指定します。href="mailto:info@gray-code.com,info2@gray-code.com?cc=test@test.com&bcc=test2@test2.com">メール</a></p></div>通常の宛先の後ろに、「?cc=test@test.com&bcc=test2@test2.com」と追記しているのがCcとBccです。通常の宛先と同様に、CcとBccも「,」で区切って複数指定することが可能です。href="mailto:info@gray-code.com,info2@gray-code.com?cc=test@test.com,test3@test3.com&bcc=test2@test2.com,test4@test4.com">メール</a></p></div>CcやBccを複数指定した例メールのタイトルや本文を指定する宛先の他に、タイトル(表題)や本文のメッセージも指定することができます。href="mailto:info@gray-code.com?subject=タイトル&body=本文に最初から入力する%0d%0aメールテキスト">メール</a></p></div>タイトルと本文を設定した例このように、あらかじめテンプレートのように本文を入力しておくことも可能です。テキストの中にある「%0d%0a」は改行コード(CRLF)です。このコードを入れることで、複数行の本文も指定できます。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。)PHP2019-11-16フォームの基本構造を作成するPHP2019-11-16はしご高など旧字体漢字の文字化けを防ぐRECOMMEND人類を前に進めたいチームラボ代表・猪子寿之さんと評論家・宇野常寛さんによる、チームラボの目指す「境界のない世界」についての対談がまとまった一冊。内容はもちろん、フルカラーで写真も綺麗でした。