見出し画像

【HTML】HTMLの様々なテクニック

Naoki Saito

今日は初めての平日の投稿になります。Udemyのコースの方ではCSSのセクションに入り、もうすぐ終わりそうです。ここ一週間は集中して頑張れています！
さて、今回は「HTMLの様々なテクニック」というお題で学んだことを記事にまとめていきます。

メールソフトを起動

<a>タグを使用して、ユーザーが使用しているメールソフトからお問い合わせなどのメールを作成する方法をまとめていきます。

<a href="mailto:○○＠gmail.com">お問い合わせはこちら</a>

href属性を上記のようにすることで、ユーザーが使用しているメールソフトが自動的に起動し、設定した「mailto:」を除くメールアドレスに、ユーザーからメールを受信することができます。少し設定を加えることで、あらかじめ件名と本文が入力されている状態にすることもできます。

  • ?subject=件名の文章

  • &amp;body=本文の文章

href属性内のメールアドレスのすぐ後ろに上記を加えることで、あらかじめ件名と本文が入力された状態にすることができます。

<a href="mailto:○○＠gmail.com ?subject=〇〇について &amp;body=本文を入力しないでください">お問い合わせはこちら</a>

件名に「〇〇について」、本文に「本文を入力しないでください」という文があらかじめ入力された状態でメールソフトが起動します。

上の写真のように宛先・差出人・件名・本文が入力された状態でメールソフトが起動します。

※注意点
mailto:の後のメールアドレスをそのまま打ち込んでしまうとスパムメール届くことがあるので、対策としてエンティティ化というものをする必要があります。実際にメールアドレスをエンティティ化してみると以下のような文字列に変換されます。
&#115;&#97;&#105;&#116;&#111;&#51;&#49;&#49;&#48;&#64;&#103;&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;
この文字列をmailto:の後に打ち込むことで、スパムメールを対策しながら通常通り使用することができます。


ファビコン

ファビコンとは、ブックマークやタブのタイトルの左にある画像(アイコン)のことを指します。小さな画像ではありますが、ひと目でどのWebページであるかがわかるので重要な設定であると言えます。

設定方法

①HTMLファイルの<head>タグに<link>タグを記述します。

②<link>タグにhref属性、rel属性、type属性を記述します。

  • href属性
    設定したい画像のパスを入力します。

  • rel属性
    "shortcut icon"と入力します。

  • type属性
    "favicon.ico"と入力します。

<head>
  <link href="images/favicon.ico" rel="shortcut icon" type="favicon.ico">
</head>

このように記述することでファビコンを設定することができます。


サイトでPDFファイルを表示・ダウンロード

PDFファイルを表示させたりダウンロードさせるには<a>タグを使用します。

PDFファイルをブラウザ上で表示

①<a>タグのhref属性にPDFファイルのパスを入力します。

<a href="test.pdf">PDFファイルを表示する</a>

②<a>タグに囲まれた文をクリックすると、指定されたPDFファイルが表示されます。

PDFファイルをダウンロード

①ダウンロードさせたいPDFファイルを圧縮します。

②圧縮してできたzipファイルを<a>タグのhref属性にそのまま入力します。

<a href="test.pdf.zip">PDFファイルをダウンロードする</a>

③<a>タグに囲まれた文をクリックすると、指定されたPDFファイルがダウンロードされます。


自動的に特定のページへジャンプ

Webでよく見かける、何秒後かに特定のページへジャンプさせる方法についてまとめていきます。

①HTMLファイルの<head>タグに<meta>タグを記述します。

②<meta>タグにhttp-equiv属性、content属性を記述します。

  • http-equiv属性
    "refresh"と入力します。

  • content属性
    "○; url=ジャンプさせたいページのURL"
    ○秒後にURLへジャンプするという意味です。

<head>
  <meta http-equiv="refresh" content="5; url=https://www.google.com/?hl=ja">
</head>

このように記述することで、ページを更新してから５秒後にGoogleのホームページにジャンプさせることができます。


画像をクリックしてダウンロード

<a>タグを使用することで、ブラウザ上に表示されている画像をクリックし、ダウンロードさせることができます。

<a href="images/book.jpg" download="images/book.jpg">
  <img src="images/book.jpg>"
<a/>

<a>タグにhref属性にだけでなく、download属性も加えます。これで表示されている画像をクリックするだけでダウンロードさせることができます。


感想

今回のお題は１つ前の記事にもあったような、Webでよく見かけるものを勉強することができました。タブの横に出てくる小さな画像（ファビコン）はあまり気にして見たことはなかったですが、この画像があるだけでどのサイトを開いているかすぐわかるので、サイト制作の際には必ず組み込もうと思います。
今週末は３連休なので、記事と勉強両方頑張っていきます！

この記事が気に入ったらサポートをしてみませんか？