SSブログ
※ご注意
本ブログに記載されている内容は、それぞれの記事投稿時点の情報です。
2008年2月27日のSo-net blogサービスリニューアルにより、一部内容に変更がある場合がございます。 恐れ入りますが、ご了承いただけますようお願い申し上げます。
なお、So-net blogの使い方につきましては、下記ページをご参照ください。
⇒So-net blog使い方
簡単HTML：レイアウトを変える・リンク..｜カンタン画像加工ツール「マジカルメーカー.. ブログトップ

簡単HTML：リスト表示をする、区切り線をつける、表をつくる　[ブログのための簡単HTML]

ブログを書くとき、ちょっとしたHTMLタグを知っているととっても便利。
そんな皆さまからの声にお答えして、3回に分けて「ブログのための簡単HTML講座」 を連載しております。

HTMLタグは実はとっても簡単。ちょっとだけ知っていれば簡単なレイアウトは すぐにできます。他にもHTMLタグを使えば、文字の色を変えたり、リンクを張ったり することもできます。

3回目の今回は、リスト表示をしたり、区切り線をつけたり、表をつくる方法を お教えします。

   リスト表示をする

文字にリストをつけて表示するには、<ul><li>というタグを使います。 また、番号付きのリストにしたい場合には<ol><li>というタグを使います。

【記述例1：リスト表示】
　<ul><li>いち
　　　<li>に
　　　<li>さん</ul>

【表示例】
  • いち
  • に
  • さん
【記述例2：番号付きリスト表示】
　<ol><li>いち
　　　 <li>に
　　　<li>さん</ol>

【表示例】
  1. いち
  2. に
  3. さん
【記述例3：リストの形状を変える】
　<ul><li type="disc">いち
　　　<li type="circle">に
　　　 <li type="square">さん</ul>

【表示例】
  • いち
  • に
  • さん
   区切り線をつける

区切り線（横の線）をつけるには、<hr>というタグを使います。この タグは閉じる必要はなく単体で使います。色や長さを指定することもできます。

【記述例1：区切り線】
　<hr>

【表示例】
【記述例2：記事の幅より80%の長さで影のない区切り線】
　<hr width="80%" noshade>

【表示例】
【記述例3：赤で太くて200ピクセルの区切り線】
　<hr width="200" size="5" color="red">

【表示例】
   表をつくる

表（テーブル組み）をつくるには、<table>というタグを使います。<table> から</table>の間に、 行を示す<tr>とセルを示す<td>とを組み合わせて使うと 表になります。<tr>から</tr>の間が1つの行となり、 からの間が 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>


【表示例】
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>


【表示例】
1行目1列 1行目2列 1行目3列
2行目1列 2行目2列 2行目3列


2007-02-08 19:31　 nice!(31)  コメント(8)  トラックバック(0) 

nice! 31

コメント 8

ぷりん

リストタグを使ったとき、p要素ではなくなってしまうので、
濃い色のスキンを使っていると字が読みにくくなってしまいます。
いろんなスキンを取っ換え引っ換えもしたいので、
そういう場合の色指定に何か良い方法はないでしょうか?
by ぷりん (2007-02-09 13:16) 

honyapin-turedure

知らない知識なので、教えてもらえてウレシイです！o（＾－＾）o
by honyapin-turedure (2007-02-11 12:31) 

siawasejikan

ブログ初心者です。
早速、今日、タグを使ってみようと思います。
by siawasejikan (2007-02-13 21:49) 

teru-

はじめまして。
見ても、読んでも、分ってんだか分ってないんだか分らない・・・ずぶの素人です。何度か通ってみようと思います。ヨロシクお願いします☆
by teru- (2007-02-14 22:09) 

skullmania

線や表のタグもブログで使えたんですね。
今度使おうかな。
by skullmania (2007-02-16 09:26) 

ヴィオリーノ

こんにちは。今月ブログを始めたばかりなので、
色々と「？」なことがあるのですが、早速区切り線
を使ってみました。できて「やったー」と喜んだまま、
お礼を言うのを忘れていました。すみません・・
どうもありがとうございました＊
by ヴィオリーノ (2007-02-23 21:27) 

はじめてお邪魔させていただきました。
ブログを始めて数ヶ月たつのですが、全くの初心者のままでした。
少しでもレベルアップできるようにこちらに通わせていただきたいと思いました。
よろしくお願い致します。
by (2007-05-24 15:04) 

toraneko

解りやすく書いてあるので、なんとなく解るところは解ります。
ただ、画像の事が解らないで居ます。クリックすれば画像を等倍で表示、それまではサムネイル、小さい画像で表示と言うこの方法なのですが、どうすれば出来るのでしょうか??
出来ましたらそれも少し詳しく書いて頂きたく思います。改行や色を変えると言う方法はなんとなく解るのですが。
by toraneko (2007-12-14 17:02) 

コメントを書く

お名前：
URL：
コメント：
画像認証： 下の画像に表示されている文字を入力してください。

 
簡単HTML：レイアウトを変える・リンク..｜カンタン画像加工ツール「マジカルメーカー.. ブログトップ
ブログを作って読者登録

このブログの更新情報が届きます

すでにブログをお持ちの方は[こちら]

最新記事一覧

カテゴリー

最近のコメント

最近トラックバックされた記事

名刺


ブログクルーザー








記事検索

ブログ教室 さんの記事から


この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。