隠し文字を使おう/HTMLタグ素材集

隠し文字を使おう

管理人お勧めのポイントを本当に現金に出来たサイト＆アプリ
モッピー	トリマ

隠し文字とはホームページ上では表示されない文字です。
隠し文字は以下のように表記します

<!--隠す文字//-->

ではこの「隠し文字」はどのような場合に使うのでしょうか？

このホームページのメニューボタンの一部を使って解説します。

その他メニュ～

これだけ見るとメニューボタンが並んでいるだけのように
見えますがこのソースは以下のようになっています。↓

<!--メニュータイトル(その他)-->
<Table border="0" bgcolor="#ffff80" cellspacing="0" cellpadding="2" width="140" height="30">
<Tr><Td align="center">

<font size="4" face="富士ポップ" color="#ff00ff">
その他メニュ～
</font>

</Td></Tr></Table>
<!--メニュータイトルここまで(その他)-->

<!--カラーパレットボタン-->
<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ccccff" align=center onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#ccccff'">
<a href="color.html" target="_blank" style="color:#004a95;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
カラーパレット</a>
</td></tr></table>
<!--カラーパレットボタンここまで-->

<!--簡易文字タグ表ボタン-->
<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ccccff" align=center onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#ccccff'">
<a href="explanation.html" target="_blank" style="color:#004a95;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
簡易文字タグ表</a>
</td></tr></table>
<!--簡易文字タグ表ボタンここまで-->

<!--ライン一覧ボタン-->
<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ccccff" align=center onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#ccccff'">
<a href="line.html" target="_blank" style="color:#004a95;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
ライン一覧</a>
</td></tr></table>
<!--ライン一覧ボタンここまで-->


<!--フォント一覧ボタン-->
<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ccccff" align=center onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#ccccff'">
<a href="fonts.html" target="_blank" style="color:#004a95;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
フォント一覧</a>
</td></tr></table>
<!--フォント一覧ボタンここまで-->



<!--タグお試しボタン-->
<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ccccff" align=center onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#ccccff'">
<a href="trial.html" target="_blank" style="color:#004a95;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
タグお試し</a>
</td></tr></table>
<!--タグお試しボタンここまで-->

<!--Ｑ＆Ａボタン-->
<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ccccff" align=center onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#ccccff'">
<a href="troubleshooting.html" target="_blank" style="color:#004a95;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
Ｑ＆Ａ</a>
</td></tr></table>
<!--Ｑ＆Ａボタンここまで-->

<!--おまけボタン-->
<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ccccff" align=center onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#ccccff'">
<a href="extra.html" style="color:#004a95;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
おまけ</a>
</td></tr></table>
<!--おまけボタンここまで-->

ソースを見るとテーブルボタンのタグがひとつひとつ
[～項目名][～項目名ここまで]で囲まれているのが
お分かりになると思います。

これはつまりホームページを作る側、タグを記述する側が
タグを整理して「このタグはどこからどこまでだったっけ？」
というような混乱を防ぐ役割を果たしています。
隠し文字がないとどうなるか↓


<Table border="0" bgcolor="#ffff80" cellspacing="0" cellpadding="2" width="140" height="30">
<Tr><Td align="center">

<font size="4" face="富士ポップ" color="#ff00ff">
その他メニュ～
</font>

</Td></Tr>
</Table>


<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ccccff" align=center onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#ccccff'">
<a href="color.html" target="_blank" style="color:#004a95;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
カラーパレット</a>
</td></tr></table>


<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ccccff" align=center onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#ccccff'">
<a href="explanation.html" target="_blank" style="color:#004a95;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
簡易文字タグ表</a>
</td></tr></table>


<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ccccff" align=center onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#ccccff'">
<a href="line.html" target="_blank" style="color:#004a95;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
ライン一覧</a>
</td></tr></table>


<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ccccff" align=center onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#ccccff'">
<a href="fonts.html" target="_blank" style="color:#004a95;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
フォント一覧</a>
</td></tr></table>


<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ccccff" align=center onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#ccccff'">
<a href="trial.html" target="_blank" style="color:#004a95;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
タグお試し</a>
</td></tr></table>


<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ccccff" align=center onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#ccccff'">
<a href="troubleshooting.html" target="_blank" style="color:#004a95;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
Ｑ＆Ａ</a>
</td></tr></table>


<table border="1" cellspacing="0" cellpadding="2" width="140" height="20">
<tr><td bordercolor="#45607a" bgcolor="#ccccff" align=center onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#ccccff'">
<a href="extra.html" style="color:#004a95;text-decoration:none;font-size:15px;font-family:富士ポップ;width:100%;">
おまけ</a>
</td></tr></table>

各メニューボタンの間に2行づつ間隔を空けてはいますが
隠し文字があるタグに比べてわかりにくいと思いませんか？

隠し文字を使ってタグを整理する習慣をつけておくと
ホームページに新しい項目を加えたり
ホームページをリニューアルしたりする場合に
メニュー部分のタグを別の場所に移動するなどの
編集作業がとても楽になります。

【i2i】アクセスカウンター無料レンタル