これだけは必要HTML講座・・・属性や属性値を理解しよう！
「これだけは必要HTML講座」も今回で10回目を迎えました。
これまでの内容を理解していれば ネットショップやアフィリエイトサイトのコンテンツを ある程度ですが自在に編集できると思います。（サイトデザインについては 別途CSSの知識が必要になりますが、こちらは別途説明します）
さて、今回ですがHTMLタグの「属性」や「属性値」について説明します。
これまで「タグ」について説明をしてきましたが 「タグ」には 「属性」といって、詳細にその内容を指示することが出来ます。
前回説明したテーブルタグを例に取って説明しましょう。
まず、普通に表（テーブル）を作ります。基本的なHTML文章は以下になります。
| <table border="1"> <tr> <td>ネットショップ</td> <td>アフィリエイト</td> <td>ドロップシッピング</td> </tr> <tr> <td>粗利大</td> <td>粗利小</td> <td>粗利中</td> </tr> </table> |
上のHTML文章は以下のように表示されます。
| ネットショップ | アフィリエイト | ドロップシッピング |
| 粗利大 | 粗利小 | 粗利中 |
なんか、表の枠と文字が近すぎて格好悪いですよね？そこで、以下のように赤字の部分をHTML文章に追加します。
| <table border="1"> <tr> <td width="150" align="center" height="30">ネットショップ</td> <td width="150" align="center" height="30">アフィリエイト</td> <td width="150" align="center" height="30">ドロップシッピング</td> </tr> <tr> <td width="150" align="center" height="30">粗利大</td> <td width="150" align="center" height="30">粗利小</td> <td width="150" align="center" height="30">粗利中</td> </tr> </table> |
すると以下のように表示され 見栄えが良くなっています。
| ネットショップ | アフィリエイト | ドロップシッピング |
| 粗利大 | 粗利小 | 粗利中 |
width="150" align="center" height="30"という部分を追加しましたが、
「width」 「align 」 「height」 を 属性と呼び、「150」 「center」 「30」 を属性値と呼びます。
テーブルタグの説明でも触れましたがこれらは セル（升目）の詳細定義で、巾が「150px」、文字の左右の位置ぞろえは「センター（中央）」、高さは「30px」という設定をしています。
「center」は 「left」、「right」に置き換えることも出来て、それぞれ、左揃え、右揃えになります。
上記は、一例ですが、各タグには「属性」、「属性値」を指定することで、思いのままに表示できることを理解しておいて下さい。
ここで重要なことは、全ての「タグ」や「属性」、「属性値」を覚えようと思わないことです。
細かいことは必要な時に「HTMLポケットリファレンス」を参照すれば良いですし、ネットで見かけた、真似をしたいようなクールなページはブラウザ上で「右クリック」→「ソースの表示」でソースコード（HTML文章）がどう書かれているかがわかりますので、その都度参照してみると良いでしょう。基本さえわかっていれば 直ぐに覚えてしまいます。
スポンサードリンク
情報商材のアフィリエイト
