【初心者向け】HTMLをコピペできるページ！折りたたみ式の目次からアンダーラインまで

コピーしてhtmlに貼るだけです。

開く/閉じる

ここに本文を入れます。

HTMLを開く/閉じる

<div style="padding: 15px 10px; margin: 0px 0px 10px 0px; border: 5px solid #e1f0fa;"><span style="color: #a5c2e6; font-size: 150%;">目次</span> <details open=""> <summary><span style="font-size: 80%; color: #a5c2e6;">開く/閉じる</span></summary>
<p>ここに本文を入れます。</details></div>

クリックして飛ぶ

ここに本文を入れます。

HTMLを開く/閉じる

<p><a href="#1">クリックして飛ぶ</a></p>
<p id="1">ここに本文を入れます。</p>

アイキャッチの作り方

作り方を見る/閉じる

パワーポイントで作ります。(はてなブログは編集オプションでも作れます)文字を太くする方法は、

パワーポイント文字の太さを調整したいです -パワーポイント2010です- PowerPoint（パワーポイント） | 教えて!goo

を参考にしました。
pngで保存します。編集画面にドラッグします。

ここに本文を入れます。

HTMLを開く/閉じる

<fieldset style="background: #9eceff; padding: 10px; border: none;">
<div id="1" style="color: #ffffff;"><span style="font-size: 150%;"><strong>ここに本文を入れます。</strong></span></div>
</fieldset>

ここに本文を入れます。

HTMLを開く/閉じる

<div style="border-width: 0px 0px 0px 7px; border-color: #99CCFF; border-style: solid; margin: 0px 0px 10px 0px;">
<p><strong>ここに本文を入れます。</strong></p>
</div>

ここに本文を入れます。

HTMLを開く/閉じる

<p id="b"><span style="font-size: 150%;"><strong>ここに本文を入れます。</strong></span></p>
<hr />

ここに本文を入れます。

HTMLを開く/閉じる

<div style="background: #e1edfa; padding: 10px; border: none;">
<p>ここに本文を入れます。</p>
</div>

ここに本文を入れます。

HTMLを開く/閉じる

<div style="background: #0077cc; padding: 10px; border: none;"><span style="color: #ffffff;">ここに本文を入れます。<br /></span></div>
<div style="padding: 15px 10px; margin: 0px 0px 10px 0px; border: 5px solid #ffffff;"><details>
</div>

ここに本文を入れます。

HTMLを開く/閉じる

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">ここに本文を入れます。</div>

ここに本文を入れます。

HTMLを開く/閉じる

<div style="padding: 10px; margin-bottom: 10px; border: 2px solid#e6e6e6;">ここに本文を入れます。</div>

段落でなくて改行する

<br />

ここに本文を入れます。

HTMLを開く/閉じる

<strong>ここに本文を入れます。</strong>

ここに本文を入れます。