HTMLこれさえ覚えてたらそれっぽい記事書ける説
はてなブログをはじめるにあたり、個人的にこれさえ覚えていればなんとかなるのでは？というHTMLコードをまとめました。（ほぼ自分用）
反映させる方法などは他の方がわかりやすく詳しく書いているので省略。
色見本はこちらから
マーカー
<p><span style="background: linear-gradient(transparent 50%, #ffea00 0%);">マーカー</span></p>
マーカー細め
<p><span style="background: linear-gradient(transparent 70%, #ffea00 0%);">マーカー細め</span></p>
ドット
<div style="background: #ffea00; background-image: radial-gradient(#fff 10%, transparent 20%), radial-gradient(#fff 10%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 100%; padding: 20px;">ドット</div>
細ストライプ
<div style="background-image: linear-gradient( -45deg, #fff 25%, #ffea00 25%,#ffea00 50%, #fff 50%, #fff 75%, #ffea00 75%, #ffea00 ); background-size: 5px 5px; font-size: 100%; padding: 20px;">細ストライプ</div>
点々枠
<div style="border-radius: 1px; border: 4px dotted #ffea00; font-size: 100%; padding: 20px;">点々枠</div>
点々、背景あり
<div style="background-color: #ffffcc; border-radius: 5px; border: 1px dashed #ffea00; font-size: 100%; padding: 20px;">点々、背景あり</div>
タイトルによさそうな枠
<div style="border: #ffea00 solid 1px; border-left: #ffea00 solid 10px; padding: 20px; background: #fff; font-size: 100%;">タイトルによさそうな枠</div>
▼タイトル
タイトルあり枠①
<div style="background: #ffea00; border: 1px solid #ffea00; padding-left: 20px;"><span style="color: white;">▼タイトル</span></div>
<div style="border: 1px solid #ffea00; font-size: 100%; padding: 20px;">タイトルあり枠①</div>
▼タイトル
タイトルあり枠②
<div style="margin: 0em; display: inline-block; position: relative; top: 3px; padding: 0 .5em; height: 1.5em; line-height: 1.5em; color: #ffffff; background: #ffea00; font-weight: bold; text-align: center; border-radius: 5px 5px 0 0;">▼タイトル</div>
<div style="background: rgba(255,255,255,0); border: solid 3px #ffea00; border-radius: 0 5px 5px; padding: 20px; font-size: 100%;">タイトルあり枠②</div>
見やすい記事が書けるように頑張ります。
近々商用利用可能な素材サイトもまとめれたらなあと思います。
