ayumaya's THREE ANGELS

●基本のタグ

基本のタグ紹介
ブログを見やすくする基本のタグを紹介します。

リンク
<a href="ここリンク先のアドレスhttp;//~">ココにリンク先の名前</a>
ココにリンク先の名前
テーブル
<table border=1><tr><td>画像1</td><td>画像2</td></tr></table>
画像1
画像2

テーブルのなかの枠を増やしたい場合は <td></td>  を付け加えると増えます
<table border=1><tr><td>画像1</td><td>画像2</td> <td>画像3</td> </tr></table>

画像1 画像2 画像3

2段3段にしたい場合は <tr><td></td></tr> このタグを増やします
<table border=1><tr><td>画像1</td><td>画像2</td></tr> <tr><td>文章1</td><td>文章2</td></tr> </table>

画像1 画像2
文章1 文章2

幅と高さ
表の幅や高さを変えるには width・height を使います

<table ○>○の部分にwidth=200や100%などと入れると幅が決められます<table ○>○の部分にheight=100や50%などと入れると高さが決められます

<table border=1><tr><td>幅100:高さ100</td></tr></table>

幅100:高さ100

表の枠の色と太さ
style="border:○px solid #色"

このソースを
<table style="border:1px solid #ff0033" ><tr><td>画像1</td><td>画像2</td></tr></table>
この位置におくと表の外枠の色と太さが変わります。

画像1
画像2

style="border:○px solid #色"
このソースを
<table><tr><td style="border:1px solid #ff0033" >画像1</td><td style="border:1px solid #ff0033" >画像2</td></tr></table>
ここにおくと表の中の枠が変わります

画像1
画像2

style="border:○px solid #色"
上の二つを合わせるとこんな感じ
<table style="border:2px solid #ff0033" ><tr><td style="border:1px solid #ff0033" >画像1</td><td style="border:1px solid #ff0033" >画像2</td></tr></table>
外枠と内枠両方が変わります。1pxなどの数字を大きくすると太さも変わります。逆に0にすると線が消えます。

画像1
画像2

枠線の種類
○直線:style="border:○px solid #色"

○点線:style="border:○px dashed 色"

○ドット:style="border:○px dotted 色"

どの種類も○pxのところを増やしていくと点線が太くなったりドットがおおきくなったりします

直線:5px

点線:3px

ドット:12px

背景色を変えたい
背景色を変えるには: bgcolor="#○○"  を使います
色見本は こちら
<table width=100 height=100 bgcolor=#ffcccc ><tr><tdf> 背景色を変える</td></tr></table>
背景色を変える
背景に画像を入れたい
背景に画像を使う場合は:  background="画像gif"  これを使います
<table width=100 height=100 background="http://image.space.rakuten.co.jp/lg01/52/0000277152/82/img5ba35e8fzikezj.gif" ><tr><td>背景画像</td></tr></table>
背景画像

画像のタグは↓この部分を使います

おまけ
これらのソースをツールの用語用例の登録に登録しておくととっても便利です!文字数に制限があるのでうまく使いやすいように登録しておきましょう!

用語登録用語登録2

designed by ayu-maya


© Rakuten Group, Inc.
X

Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: