【HTML】Webサイトを作ってみる！その3(タグに関して)

前回の記事ではHTMLでよく使用されているタグを紹介しました。

➡【HTML】Webサイトを作ってみる！その2

今回もHTMLでよく使用するタグ等を紹介します！

長くなりそうなので複数記事に分けて紹介します！

タグに関して

htmlを作成するに当たって基本的なタグは以下のようなものになります！

・<a></a>

アンカー要素。別のウェブページ、ファイル、同一ページ内の場所、

電子メールアドレスなどへのハイパーリンクを作成する。

アメブロの記事でもよく出てきますね！

リンクを貼ると、このタグが作成されます。

また例えばアメブロから自分のメールアドレスにメールを投げて欲しいときなどは、

電子メールアドレスのハイパーリンクを作成すると簡単に出来ます。

また別の記事にてアメブロ内にリンクを貼る方法を紹介しますね！

一応こんな感じで作ることが出来ます！

<a href="mailto:m.bluth@example.com">Email</a>

活用例がこんな感じ！(クリックするとメール画面が開きます)

※なんか感想あれば送ってみてね！(こちらは僕のメールアドレスになります。)

➡📧メールはこちら！

・<li></li>
リストの項目を作成する際に使用する。
これを使用すると箇条書きのリストを作成することが出来ます。

<li></li>タグは、下記いずれかのタグの子要素として作成する必要があります。

①<ul></ul>…順序なしリスト

　(例)

　・あいうえお

　・かきくけこ

　・さしすせそ

②<ol></ol>…順序ありリスト

　1．あいうえお

　２．かきくけこ

　３．さしすせそ

※menuタグもありますが、対応しているブラウザが少ないことと、
ulと同等の機能であるため省略

上で説明させて頂いた<a></a>タグと組み合わせると、

・メール

・LINE@

・FaceBook

みたいに、自分が使っている各種SNSへと連携を取ることが出来ます！

HTMLにするとこんな感じになります！

<ul>

<li><a href="https://example.com">ウェブサイト</a></li>
<li><a href="mailto:m.bluth@example.com">メールアドレス</a></li>
<li><a href="tel:+110">電話番号</a></li>
</ul>

各タグを見やすくするとこんな感じの作りになっています！

<ul>…①

<li>…②

<a href="https://example.com">ウェブサイト…③

</a>…③'

</li>…②'
</ul>…①'

順番に説明させて頂くと、

①順序なしのリストがあります

↓

②リストがあります(今回は3つ)

↓

③アンカータグがあって、そこのハイパーリンクから色んな場所に飛ぶよ！

という感じの作りになっています！

今回は以上になります！

今回も最後まで読んで頂きありがとうございました！

今は基本的なタグの紹介になっていますが、なるべく使う機会が多いだろうな！

というものを紹介させて頂きました。

今後は自分で作成したWebサイトを

紹介して行けたらな！と考えています！

もしかするとWordPressで作成したものになるかも知れませんが…。

今後も便利なツールの紹介、一人でも多くの人に「プログラミングって面白そう！」って思ってもらえるような記事を書いていきますね！

それでは！

せっかくなので、リンクを貼っておきますね！何か感想あったら送ってね！

➡📧メールはこちら！