アメブロ上でのテストを兼ねてcopyしています。
ソースも引用していますが、アメブロではブラウザに表示されている物をそのままコピーして使えます。主に自分用になる予定(￣▽+￣*)
主 な引用先（お世話になりましたm(．．)m）
その他のタグ
◆ページ内でジャンプするリンク http://fc2blogshop.blog13.fc2.com/blog-entry-133.html#bottom
<a href = "#Number_1"></a>
<a name = "Number_1"></a>
◆文字を点線で囲む
◆文字の背景に画像を表示
◆引用タグを使った背景画像（もちろん無しも可）
◆文字に背景色を設定
◆キレイな見出し
◆タイトル付き枠線
◆動く文字
◆文章を縦書きで表示
◆破線で囲ったシンプルなリスト
◆テーブルタグを使った見かけ上の三段配置
◆画像リンク
◆文章の横に画像を配置
◆ページを水平線（区切り線で仕切る
オプション指定 黄色の水平線を表示。
<hrcolor="yellow">
この記事で使ってるもの
<hr color="#333ff0">
※カラーコードは編集画面の「カラーパレット」から確認できる。
先頭に戻る
◆文字を点線で囲む http://html.appelle.jp/2006/02/post_89.html
<divstyle="BORDER- BOTTOM:purple2px dotted;BORDER-LEFT:purple 2px dotted;BORDER- TOP:purple 2px dotted;BORDER- RIGHT:purple 2px dotted"><fontsize="3">この段落文章を、太さ2ピクセ ルの紫色の点線の枠で囲みます。<br/>
枠で囲むことで、文章を強調したり、見やすくすることができます。</font></div>
この段落文章を、太さ10ピクセルの赤色の破線の枠で囲みます。
枠で囲むことで、文章を強調したり、見やすくすることができます。
先頭に戻る
◆タイトル付き枠線 http://html.appelle.jp/2006/03/post_129.html
<fieldset>
<legend>フィールド指定(複数エレメントのグループ化)</legend>
<p>fieldsetタグを使ってフィールド指定をすると、こんなふうに四角で囲
むことができます。</p>
</fieldset>
先頭に戻る
◆文字の背景に画像を表示
<div style="background-image:url(sample/cat.gif);
background-repeat:repeat;background-attachment:fixed;
height:80px;overflow:scroll">
この段落は、背景画像を固定表示しています。
スクロールバーでクロースしてみてください。<br><br>
文章はスクロールしますが、背景画像は<br>
動きませんね。サンプル文章が短いので<br>
ちょこっとしかスクロールしませんが...
</div>
background-repeat:repeat;background-attachment:fixed;
height:80px;overflow:scroll">
この段落は、背景画像を固定表示しています。
スクロールバーでクロースしてみてください。<br><br>
文章はスクロールしますが、背景画像は<br>
動きませんね。サンプル文章が短いので<br>
ちょこっとしかスクロールしませんが...
</div>
この段落は、背景画像を固定表示しています。スクロールバーでクロースしてみてください。
文章はスクロールしますが、背景画像は
動きませんね。サンプル文章が短いので
ちょこっとしかスクロールしませんが...
文章はスクロールしますが、背景画像は
動きませんね。サンプル文章が短いので
ちょこっとしかスクロールしませんが...
備考：BACKGROUND-IMAGEオプションは他のタグにも使える。試してみよう。
先頭に戻る
◆引用符を使った背景画像
<blockquote style="BACKGROUND-IMAGE: url(http://stat001.ameba.jp/user_images/32211911529052.gif ); PADDING-BOTTOM: 1em; BACKGROUND-COLOR: green; PADDING-LEFT: 1em; PADDING-RIGHT: 1em; PADDING-TOP: 1em">
本文
</blockquote>
きょうはバイトで女子連中にひつじ癖のことについて陰口言われて散々でお客にいやみ言われたりまためんどくさいノルマ課されたりなんだあのクソババアとかおもったりいりすシンドロームやって萌えたりひつじ画像をみたりして過ごしました（※画像は管理人の趣味です）
先頭に戻る
◆文字に背景色を設定 （上の背景画像タグと組み合わせると効果的です）
<table><tbody><tr><td bgcolor="green">文章</td></tr></tbody></table>
| ダッメー、北海道に帰ろうよ。 |
先頭に戻る
◆キレイな見出し http://www.1uphp.com/con1/h/h1bgimg.html
上
<h2 style="BACKGROUND-IMAGE: url(http://stat.ameba.jp/user_images/20120622/09/translated-mojakou/d9/7e/j/t02200146_0600039712040718867.jpg); PADDING-LEFT: 10px" class="clmTitle"></a><a title="" href="http://www.lec-jp.com/benrishi/new/blog/?p=21" target="">オプトインからオプトアウトへ</a></h2>
<h2 style="BACKGROUND-IMAGE: url(http://stat.ameba.jp/user_images/20120622/09/translated-mojakou/d9/7e/j/t02200146_0600039712040718867.jpg); PADDING-LEFT: 10px" class="clmTitle"></a><a title="" href="http://www.lec-jp.com/benrishi/new/blog/?p=21" target="">オプトインからオプトアウトへ</a></h2>
下
<h2 style="BACKGROUND-IMAGE: url(http://stat.ameba.jp/user_images/20120928/23/translated-mojakou/5e/df/j/o0800004412210661835.jpg); PADDING-LEFT: 10px; BACKGROUND-REPEAT: no-repeat" class="clmTitle"> <a title="" href="http://www.lec-jp.com/benrishi/new/blog/?p=21" target=""> オプトインからオプトアウトへ </a></h2> <span style="font-weight: bold; ">
色 つき見出し
<span><span style="FONT-WEIGHT: bold"><br>
色つき見出し</span>
<table width="100%">
<tr>
<td bgcolor="#d0e0ff" align="center"><b>見出し</b></td& amp;gt;
</tr>
</table>
色つき見出し</span>
<table width="100%">
<tr>
<td bgcolor="#d0e0ff" align="center"><b>見出し</b></td& amp;gt;
</tr>
</table>
オプトインからオプトアウトへ
色つき見出し
| 見出し |
先頭に戻る
◆テーブルタグを使った見かけ上の三段配置
<table class="table-css">
<tr>
<td class="td-css11" colspan="6">ホリエモンとテキ屋さんは地獄行き</td>
<td class="td-css" colspan="6"><a href="http://stat.ameba.jp/user_images/20130407/09/translated-mojakou/1d/fa/j/o0325032512491233067.jpg"><img style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; WIDTH: 167px; HEIGHT: 153px; BORDER-TOP: medium none; BORDER-RIGHT: medium none" src="http://stat.ameba.jp/user_images/20130407/09/translated-mojakou/1d/fa/j/o0325032512491233067.jpg" </a></td>
<td class="td-css13" colspan="3">ダッメーは北海道行き。</td>
| ホリエモンとテキ屋さんは地獄行き |  |
ダッメーは北海道行き。 | ||||||||||||
先頭に戻る
◆動く文字（マーキータグ） http://copicopi.com/marquee.html
<marqueebehavior="alternate"direction="up"height="70"><marqueedirection="right">ここに文章を書いて下さい< /marquee></marquee>
先頭に戻る
◆文章を縦書きで表示 IE、chrome, Safariに対応 http://heo.jp/tag/kowaza/css/10.html
<div style="WRITING-MODE: tb-rl; WIDTH: 310px; HEIGHT: 150px">ここに文章を書きます。 <br>
説明しよう！北斗天パ拳とは、かのケンシロウ、ラオウらが恐れた至高の拳！！南斗、元斗など、高名な流派をもろともせぬ、裏北斗の拳 とも言うべき流派なのじゃ！！（原作者未承認） あの雲のジュウザでさえ、北斗天パ拳の前にあえなく惨敗を喫して天パにされてしもうたのじゃ (｡＞0＜｡)。そんな北斗天パ拳で、次期北斗作品のキャラは全員テンパになってしまうとかいやそんなわけないだろとか諸説あるんじゃ。
私のイチオシのスタイルシートです
私のイチオシのスタイルシートです
先頭に戻る
◆破線で囲ったシンプルなリスト http://copicopi.com/list.html
<divstyle="font-size:14px;color:#009500;
width:230;border:2pxdashed#009500;background-color:#ffffff;padding:10px;margin:auto;">
<ulstyle="margin:0px0px0px15px;text-align:left;"><litype="disc">項目１
<litype="disc">項目２
<litype="disc">項目３
<litype="disc">項目４
<litype="disc">項目５
</ul></div>
先頭に戻る
<a class="" href="http://meim-games.com/product.html" target="_blank"><img ratio="1.5" id="1365781492527" alt="http://ameblo.jp/ameblochange/" src="http://stat.ameba.jp/user_images/20130328/15/translated-mojakou/14/d7/j/o0640048012476812448.jpg" border="0" height="200" width="300"></a>
画像は、最近プレイしたフリーゲーム「幽霊少女館」
先頭に戻る
◆見出し http://www.1uphp.com/con1/h/h1bgimg.html
上
<h2 style="BACKGROUND-IMAGE: url(http://stat.ameba.jp/user_images/20120622/09/translated-mojakou/d9/7e/j/t02200146_0600039712040718867.jpg); PADDING-LEFT: 10px" class="clmTitle"></a><a title="" href="http://www.lec-jp.com/benrishi/new/blog/?p=21" target="">オプトインからオプトアウトへ</a></h2>
<h2 style="BACKGROUND-IMAGE: url(http://stat.ameba.jp/user_images/20120622/09/translated-mojakou/d9/7e/j/t02200146_0600039712040718867.jpg); PADDING-LEFT: 10px" class="clmTitle"></a><a title="" href="http://www.lec-jp.com/benrishi/new/blog/?p=21" target="">オプトインからオプトアウトへ</a></h2>
下
<h2 style="BACKGROUND-IMAGE: url(http://stat.ameba.jp/user_images/20120928/23/translated-mojakou/5e/df/j/o0800004412210661835.jpg); PADDING-LEFT: 10px; BACKGROUND-REPEAT: no-repeat" class="clmTitle"> <a title="" href="http://www.lec-jp.com/benrishi/new/blog/?p=21" target=""> オプトインからオプトアウトへ </a></h2> <span style="font-weight: bold; ">
色 つき見出し
<span><span style="FONT-WEIGHT: bold"><br>
色つき見出し</span>
<table width="100%">
<tr>
<td bgcolor="#d0e0ff" align="center"><b>見出し</b></td& amp;gt;
</tr>
</table>
色つき見出し</span>
<table width="100%">
<tr>
<td bgcolor="#d0e0ff" align="center"><b>見出し</b></td& amp;gt;
</tr>
</table>
オプトインからオプトアウトへ
色つき見出し
| 見出し |
先頭に戻る
先頭に戻る
◆文章を縦書きで表示 IE、chrome, Safariに対応 http://heo.jp/tag/kowaza/css/10.html
<div style="WRITING-MODE: tb-rl; WIDTH: 310px; HEIGHT: 150px">ここに文章を書きます。 <br>
説明しよう！北斗天パ拳とは、かのケンシロウ、ラオウらが恐れた至高の拳！！南斗、元斗など、高名な流派をもろともせぬ、裏北斗の拳 とも言うべき流派なのじゃ！！（原作者未承認） あの雲のジュウザでさえ、北斗天パ拳の前にあえなく惨敗を喫して天パにされてしもうたのじゃ (｡＞0＜｡)。そんな北斗天パ拳で、次期北斗作品のキャラは全員テンパになってしまうとかいやそんなわけないだろとか諸説あるんじゃ。
私のイチオシのスタイルシートです
私のイチオシのスタイルシートです
先頭に戻る
◆文章の横に画像を配置
<img style="WIDTH: 91px; HEIGHT: 60px" align="left" src="http://stat.profile.ameba.jp/profile_images/20110217/16/a3/ac/j /o080006001297927835989.jpg"> この羊の品種はサフォークです。 日本で一番多く買われている羊です。 かわいいですね。<br>
主に食肉用です。性格は温厚です。</div><br>
</ul></ruby></align="RIGHT">
この羊の品種はサフォークです。 日本で一番多く買われている羊です。 かわいいですね。主に食肉用です。性格は温厚です。
先頭に戻る
このページに対する感想・評価などいただけると嬉しいです。メッセージでもメールでも構いません。
メール：svoyagek /@/ yah oo.co.jp