※ご注意
本ブログに記載されている内容は、それぞれの記事投稿時点の情報です。
2008年2月27日のSo-net blogサービスリニューアルにより、一部内容に変更がある場合がございます。 恐れ入りますが、ご了承いただけますようお願い申し上げます。
なお、So-net blogの使い方につきましては、下記ページをご参照ください。
⇒So-net blog使い方
本ブログに記載されている内容は、それぞれの記事投稿時点の情報です。
2008年2月27日のSo-net blogサービスリニューアルにより、一部内容に変更がある場合がございます。 恐れ入りますが、ご了承いただけますようお願い申し上げます。
なお、So-net blogの使い方につきましては、下記ページをご参照ください。
⇒So-net blog使い方
簡単HTML：リスト表示をする、区切り線をつける、表をつくる [ブログのための簡単HTML]
ブログを書くとき、ちょっとしたHTMLタグを知っているととっても便利。
そんな皆さまからの声にお答えして、3回に分けて「ブログのための簡単HTML講座」
を連載しております。
HTMLタグは実はとっても簡単。ちょっとだけ知っていれば簡単なレイアウトは
すぐにできます。他にもHTMLタグを使えば、文字の色を変えたり、リンクを張ったり
することもできます。
3回目の今回は、リスト表示をしたり、区切り線をつけたり、表をつくる方法を
お教えします。
|
リスト表示をする |
文字にリストをつけて表示するには、<ul><li>というタグを使います。 また、番号付きのリストにしたい場合には<ol><li>というタグを使います。
【記述例1：リスト表示】
<ul><li>いち
<li>に
<li>さん</ul>
【表示例】
<ul><li>いち
<li>に
<li>さん</ul>
【表示例】
- いち
- に
- さん
【記述例2：番号付きリスト表示】
<ol><li>いち
<li>に
<li>さん</ol>
【表示例】
<ol><li>いち
<li>に
<li>さん</ol>
【表示例】
- いち
- に
- さん
【記述例3：リストの形状を変える】
<ul><li type="disc">いち
<li type="circle">に
<li type="square">さん</ul>
【表示例】
<ul><li type="disc">いち
<li type="circle">に
<li type="square">さん</ul>
【表示例】
- いち
- に
- さん
|
区切り線をつける |
区切り線（横の線）をつけるには、<hr>というタグを使います。この タグは閉じる必要はなく単体で使います。色や長さを指定することもできます。
【記述例1：区切り線】
<hr>
【表示例】
<hr>
【表示例】
【記述例2：記事の幅より80%の長さで影のない区切り線】
<hr width="80%" noshade>
【表示例】
<hr width="80%" noshade>
【表示例】
|
表をつくる |
表（テーブル組み）をつくるには、<table>というタグを使います。<table> から</table>の間に、 行を示す<tr>とセルを示す<td>とを組み合わせて使うと 表になります。<tr>から</tr>の間が1つの行となり、
【記述例1：表】
<table>
<tr>
<td>1行目1列</td>
<td>1行目2列</td>
<td>1行目3列</td>
</tr>
<tr>
<td>2行目1列</td>
<td>2行目2列</td>
<td>2行目3列</td>
</tr>
<tr>
<td>3行目1列</td>
<td>3行目2列</td>
<td>3行目3列</td>
</tr>
</table>
【表示例】
<table>
<tr>
<td>1行目1列</td>
<td>1行目2列</td>
<td>1行目3列</td>
</tr>
<tr>
<td>2行目1列</td>
<td>2行目2列</td>
<td>2行目3列</td>
</tr>
<tr>
<td>3行目1列</td>
<td>3行目2列</td>
<td>3行目3列</td>
</tr>
</table>
【表示例】
| 1行目1列 | 1行目2列 | 1行目3列 |
| 2行目1列 | 2行目2列 | 2行目3列 |
| 3行目1列 | 3行目2列 | 3行目3列 |
【記述例2：1行目がグレーな表】
<table>
<tr bgcolor="#cccccc">
<td>1行目1列</td>
<td>1行目2列</td>
<td>1行目3列</td>
</tr>
<tr bgcolor="#ffffff">
<td>2行目1列</td>
<td>2行目2列</td>
<td>2行目3列</td>
</tr>
</table>
【表示例】
<table>
<tr bgcolor="#cccccc">
<td>1行目1列</td>
<td>1行目2列</td>
<td>1行目3列</td>
</tr>
<tr bgcolor="#ffffff">
<td>2行目1列</td>
<td>2行目2列</td>
<td>2行目3列</td>
</tr>
</table>
【表示例】
| 1行目1列 | 1行目2列 | 1行目3列 |
| 2行目1列 | 2行目2列 | 2行目3列 |
2007-02-08 19:31
nice!(31)
コメント(8)
トラックバック(0)
濃い色のスキンを使っていると字が読みにくくなってしまいます。
いろんなスキンを取っ換え引っ換えもしたいので、
そういう場合の色指定に何か良い方法はないでしょうか?
by ぷりん (2007-02-09 13:16)
by honyapin-turedure (2007-02-11 12:31)
早速、今日、タグを使ってみようと思います。
by siawasejikan (2007-02-13 21:49)
見ても、読んでも、分ってんだか分ってないんだか分らない・・・ずぶの素人です。何度か通ってみようと思います。ヨロシクお願いします☆
by teru- (2007-02-14 22:09)
今度使おうかな。
by skullmania (2007-02-16 09:26)
色々と「？」なことがあるのですが、早速区切り線
を使ってみました。できて「やったー」と喜んだまま、
お礼を言うのを忘れていました。すみません・・
どうもありがとうございました＊
by ヴィオリーノ (2007-02-23 21:27)
ブログを始めて数ヶ月たつのですが、全くの初心者のままでした。
少しでもレベルアップできるようにこちらに通わせていただきたいと思いました。
よろしくお願い致します。
by みちゅけ (2007-05-24 15:04)
ただ、画像の事が解らないで居ます。クリックすれば画像を等倍で表示、それまではサムネイル、小さい画像で表示と言うこの方法なのですが、どうすれば出来るのでしょうか??
出来ましたらそれも少し詳しく書いて頂きたく思います。改行や色を変えると言う方法はなんとなく解るのですが。
by toraneko (2007-12-14 17:02)