携帯サイトの作成支援サイト。携帯サイトの作り方が分からなくても、手順に沿っていくことで自然に覚える。覚えたら携帯サイト作りが楽しくなる。
» トップ > 基本タグ

基本タグ

携帯サイトを作るうえで、頻繁に使われるタグを説明します。ここで紹介するタグは必要最低限の基本タグということにもなりますので、しっかりと覚えておきましょう。

○基本タグ一覧
改行:<br>
中央揃え・右揃え:<center>・<div align="right">
水平線:<hr>
リンク:<a>
メールリンク:<a>


改行:<br>

テキストを改行させるためのタグです。

ここで改行します。<br>改行しました。<br>分かりましたか?

このようなソースを記述すると、

ここで改行します。
改行しました。
分かりましたか?

ブラウザ上では、このように<br>タグを記述した部分が改行されて表示されます。


中央揃え・右揃え:<center>・<div align="right">

文字や画像を中央に表示したい場合、右側に表示したい場合のタグです。左側は基本的に何もタグを記述しなければ、デフォルトで表示されるようになっています。

左側に表示
<div align="left">左側に表示</div>
<center>中央に表示</center>
<div align="right">右側に表示</div>

▼上記のソースをブラウザで表示すると下記のようになります。

左側に表示
左側に表示
中央に表示
右側に表示


水平線:<hr>

画面全体に水平方向の線を引きます。また、線の太さや色も指定できます。

<hr>
<hr size="5">
<hr color="#FF0000">
<hr size="1" color="#FF0000">

▼上記のソースをブラウザで表示すると下記のようになります。






リンク:<a>

<a href="[指定したページ]">リンク文字</a>という記述をすることで、[指定したページ]にリンク(ジャンプ)することができます。また、指定したメールアドレスに対してメールソフトを起動したりすることもできます。

[1] <a href="http://www.*****.com">指定のURLにリンク</a>
[2] <a href="page.html">同フォルダの「page.html」にリンク</a>
[3] <a href="abc/page.html">「abc」というフォルダの中の「page.html」にリンク</a>
[4] <a href="../page.html">ひとつ上のフォルダの中の「page.html」にリンク</a>
[5] <a href="../abc/xyz/page.html">ひとつ上のフォルダの中の「abc」フォルダの中の「xyz」フォルダの中の「page.html」にリンク</a>
[6] <a href="mailto:***@*****.com">メールアドレスにメール送信</a>

[1]は絶対パスといいます。絶対パスとはhttp://ではじまるURLのことです。

[2]~[5]は相対パスといいます。これは自分のサイト内でのみ使えるもので指定先を省略して書きます。また、リンク先のファイルの場所によって、パスの記述が少し変わってきます。サンプル記述と下記の図を参考にしてください。「../」はひとつ上の階層のフォルダを指します。

[6]はメールリンクになります。「mailto:」と付けてメールアドレスを指定します。

相対パスは上記の図のような感じで、リンクするファイルの場所によってパスをあわせる必要があります。


メールリンク:<a>

また、メールリンクの場合、さらに細かな設定を付け加えることが可能です。

[1] <a href="mailto:***@*****.com">通常のメールリンク</a>
[2] <a href="mailto:***@*****.com?subject=件名">件名をつける</a>
[3] <a href="mailto:***@*****.com?body=本文">本文をつける</a>
[4] <a href="mailto:***@*****.com?subject=件名&body=本文">件名と本文をつける</a>
[5] <a href="mailto:?subject=件名&body=本文">件名と本文をつける</a>

上記のような感じで、メールアドレスの後に「?」を記述し、「subject=」「body=」と書きます。2つ以上設定する場合は「&」で繋げていきます。

また、[5]のようにメールアドレスは未記入のままでも動作します。

よく利用されるものとしては、

<a href="mailto:***@*****.com?subject=あなたのサイト名&body=あなたのサイトURL">友達に教える</a>

このように、ユーザーがユーザーの友達にあなたのサイトのことを教えるためのリンクを用意します。あなたのサイトを気に入ってくれた人がいれば、さらに他の人へサイトの紹介をしてくれる可能性があります。


このサイトをお気に入りに登録する