ＨＴＭＬタグのまとめ
ａ．インターネットのページは下記の３つのパートから成っています。
１．文書型宣言
２．ヘッド要素
３．ボディ要素
細かく説明しますと。
１．文書型宣言→ほとんど気にしなくていいです。
楽天ではほとんど関係なく、ホームページを作るにあたってもソフトが自動的にやってくれます。
２．ヘッド要素→文書型宣言と同じようにほとんど気にしなくていいです。
インターネットエクスプローラーの青色部分に出てくるページ名がここです。
３．ボディ要素→とっても大事
ここがホームページの内容となりとっても重要なパートです。
ｂ．使用されるタグは。
１．文書型宣言→混乱を避けるため遭えてはしょります。
２．＜ｈｅａｄ＞→ヘッド要素
３．＜ｂｏｄｙ＞→ボディ要素
ｃ．開始と終了
上記の＜○○＞が開始で、この○○の前に／をいれた＜／○○＞でそれぞれの終了ですよ、という合図になります。
ｄ．タグでページをあらわしてみると大体こんなイメージになります。
＜ｈｔｍｌ＞
＜ｈｅａｄ＞ ヘッド要素 ＜／ｈｅａｄ＞
＜ｂｏｄｙ＞ ボディ要素 ＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞
ｅ．で、どこをどうするのか？
一般にコンテンツと呼ばれる、ホームページの文章や商品リンクなどはこのボディ要素のところに書かれます。
Ｂ．コンテンツ作成に必要なタグ
コンテンツ作成に必要なタグは非常に大雑把に言いますと、「文章用」と「テーブル用」に分かれます。
無料公開されているものも多いテンプレートも実はこの２つから構成されています。
以下に、タグとそれぞれの使い方を紹介していきます。
ａ．文章用タグ
１．見出しを作る
＜ｈ１＞ 見出し文 ＜／ｈ１＞
＊この＜＞内の数字で字の大きさを調整します。
２．段落を作る
＜ｐ＞ 段落の文章 ＜／ｐ＞
３．段落中のテキストを改行する
＜ｐ＞ １行目の文章 ＜ｂｒ＞
２行目の文章 ＜／ｐ＞
＊＜／ｂｒ＞というのは不要です。
４．ページに水平線を引く
＜ｈｒ＞
＊これだけです。
５．太字
＜ｂ＞ 太字にしたい文章 ＜／ｂ＞
ｂ．テーブル用タグ
１．テーブル全体の構造をまず解説します。
ア．テーブル全体の開始と終了 ＜ｔａｂｌｅ＞ ～ ＜／ｔａｂｌｅ＞
イ．行の開始と終了 ＜ｔｒ＞ ～ ＜／ｔｒ＞
ウ．列の開始と終了 ＜ｔｄ＞ ～ ＜／ｔｄ＞
２．実際にテーブルを作るときのタグの並びなどは下記のようになります。
ここでは田んぼの「田」の字型のテーブルを作る場合のものを書いてみます。
＜ｔａｂｌｅ＞
＜ｔｒ＞
＜ｔｄ＞１行目左＜／ｔｄ＞
＜ｔｄ＞１行目右＜／ｔｄ＞
＜／ｔｒ＞
＜ｔｒ＞
＜ｔｄ＞２行目左＜／ｔｄ＞
＜ｔｄ＞２行目右＜／ｔｄ＞
＜／ｔｒ＞
＜／ｔａｂｌｅ＞
こんな感じになります。
| １行目左 | １行目右 |
|---|---|
| ２行目左 | ２行目右 |
３．テーブルの編集に使うタグは下記のものがあります。
＊複数のタグを使用するときは＜＞の中でタグとタグの間に１文字分のスペースを入れる必要があります。
ア．テーブルの横幅を指定する ： ｗｉｄｔｈ＝”○○％”
＊○○のところに数字を入れます。
イ．外枠線の太さを指定する ： ｂｏｒｄｅｒ＝”○”
ウ．セルとセルの間隔を指定する ： ｃｅｌｌｓｐａｃｉｎｇ＝”○”
エ．文字とセルの間の余白の幅を指定する ： ｃｅｌｌｐａｄｄｉｎｇ＝”○”
オ．背景色の指定 ： ｂｇｃｏｌｏｒ＝”○○○”
＊ここは○に数字ではなく色コードを入力します。
４．テーブル内のセルの編集に使用するタグ
ア．セル内の文字位置を指定する ： ａｌｉｇｎ＝”○○”
＊「ｌｅｆｔ」「ｌｉｇｈｔ」「ｃｅｎｔｅｒ」「ｊｕｓｔｉｆｙ」←均等割付などで指定します。
Ｃ．リンクの貼り方
１．上記以外でさしあたって必要になるものというとリンクの貼り方になるかと思います。
下記のタグでリンクが貼れるようになります。
＜ａ ｈｒｅｆ＝”リンク先のＵＲＬ”＞自分のページに表示する文章＜／ａ＞
別ウィンドウを立ち上げてリンク先を表示したい場合には下記のようになります。
＜ａ ｈｒｅｆ＝”リンク先のＵＲＬ” ｔａｒｇｅｔ＝”＿ｂｌａｎｋ”＞自分のページに表示する文章＜／ａ＞
Ｄ．最後に
私が知っているのはこのくらいですが、本館・別館ともになんとかやっています。
ほかに参考になりそうなところを下記に紹介させて頂きますのでご活用ください。
Ｅ．参考ページ
タグ関係
・楽天広場 ＨＴＭＬタグについて のページ
・ 松井選手・イチロー選手情報 かずさか２９２０さんのサイトです。タグ解説が充実しています。
テンプレート関係
・ テンプレートをもっと便利に♪アフィリエイトを便利にするフリーソフトを開発・配布中♪
恥じらい家族さん主催のホームページで、いろいろなテンプレートが無料でダウンロードさせて頂けます。
© Rakuten Group, Inc.
