基本的なタグについての解説です。

■文字関連
・太字(「文字」が太字になる)
<strong>文字</strong>
・見出し(数字は1から6までの6段階あって1が一番大きいです)
<h4>文字</h4>

■線
・横いっぱいに線が引かれます。(本当はもっといろいろできるけど、このサイトは制限がきつい模様)
<hr>

■改行
・改行されます。
<br />

■リンク
・リンク(「文字」をクリックすると「リンク」(URL)に飛べる)
<a href="リンク">文字</a>

・新しいタブでリンクを開く場合は「 target="_blank"」を入れます。外部サイトに飛ぶときは基本これにした方がいいと思います。
<a href="リンク" target="_blank">文字</a>

・ページ内リンク(普通は「リンク」にはhttp~から入力しないといけないけど、同一ページ内なら#idで省略できる)
<a href="#">文字</a>

 この説明だとわかりにくいと思いますが、たとえば、

-----------------------------------------------

 キョンは東中出身の<a href="#haruhi">涼宮ハルヒ</a>と出会う。<br />
<br />
<br />
<br />
<storong id=haruhi>涼宮ハルヒとは</strong><br />

-----------------------------------------------

みたいに書くと、「涼宮ハルヒ」の文字をクリックしたら「涼宮ハルヒとは」の行まで飛べます。
 idは飛ばして着地させたい行のタグ内につければいいのですが、「<br />」に付ける場合は着地したい行の1行上の「<br />」タグに付けないといけません。

■リスト
 このページのCSSがあんまりリストのタグにバリエーションないみたいなので多用しにくいです。
・項目に順番をつけないリスト
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
・項目に順番をつけるリスト
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>

■画像を左寄せ
 主に商品情報を使うときに用いると思われるタグ。
---------------------------------------------------
<span style="float:left;margin-right:12px;">
画像
</span>

文章1

<br clear="all" />

文章2

---------------------------------------------------
 これで画像を左に、文章1を右に配置できます。12pxというのは画像と文章1との距離で、変えることが出来ます。
 そして、文章2は画像の下に表示されます。「<br clear="all" />」を入れないと文章1からそのまま右のスペース使い切ってから下に表示になります。

■表のセルを結合
>表のセルを水平(横)方向に結合したい場合
「colspan="数字"」タグを使い、結合したいセルの数だけ「数字」を入力します。
結合先のセルのタグは削除しておきます。
---------------------------------------------------
<table>

<tr>
<td colspan="2">水平方向に結合したいセル</td>

</tr>

<tr>
<td>結合されていないセル1</td>
<td>結合されていないセル2</td>
</tr>

</table>

---------------------------------------------------

>表のセルを垂直(縦)方向に結合したい場合
「rowspan="数字"」タグを使い、結合したいセルの数だけ「数字」を入力します。
結合先のセルのタグは削除しておきます。
---------------------------------------------------
<table>

<tr>
<td rowspan="2">垂直方向に結合したいセル</td>
<td>結合されていないセル1</td>
</tr>

<tr>

<td>結合されていないセル2</td>
</tr>

</table>

---------------------------------------------------

タグ:

+ タグ編集
  • タグ:

このサイトはreCAPTCHAによって保護されており、Googleの プライバシーポリシー利用規約 が適用されます。

最終更新:2015年05月10日 14:56