HTML装飾の方法 - 簡単【囲み枠・見出し・蛍光ペン】の作成方法

HTML装飾の方法 - 簡単【囲み枠・見出し・蛍光ペン】の作り方です。

枠線を入れると、大切なところを目立たせる事ができます！

約20種類を掲載します。

(自分自身のメモでもあります。)

箇条書き

箇条書き_番号あり

1. Sample
2. Sample
3. Sample

<span>Title</span><ol>
 <li>Sample</li>
 <li>Sample</li>
 <li>Sample</li>
</ol>

箇条書き_番号なし

• Sample
• Sample
• Sample

<span>Title</span><ul>
 <li>Sample</li>
 <li>Sample</li>
 <li>Sample</li>
</ul>

囲み枠

囲み枠-影付

<div style="border:1px solid #aaa; padding:15px 20px; box-shadow: 0 2px 3px 0 #ddd;width:90%;font-size: 90%;margin:auto;">
<p>Sample</p>
<p>Sample</p>
</div>

囲み枠-タイトル付

<div style="border:1px solid #aaa;width:90%;font-size:90%;margin:auto;"><div style="background:#4169e1;padding:4px;text-align:center;color:#FFF;">Title</div><div style="padding:15px 20px;">
<p>Sample</p>
<p>Sample</p>
</div></div>

囲み枠-タイトル付箇条書き

<div style="border:1px solid #aaa;width:90%;font-size:90%;margin:auto;"><div style="background:#4169e1;padding:4px;text-align:center;color:#FFF;">Title</div><div style="padding:15px 20px;">
<ul>
 <li>Sample</li>
 <li>Sample</li>
 <li>Sample</li>
</ul>
</div></div>

2重枠(角丸)

<div style="border-radius: 10px; border: 4px double #ff6699; font-size: 90%; padding: 20px;">
<p>Sample</p>
<p>Sample</p>
</div>

ステッチ風(角丸影付き)

<div style="color:white;background:#f98289;padding:20px;border:2px dashed rgba(255,255,255,0.5);border-radius:6px;box-shadow:0 0 0 5px #f98289,0 2px 3px 5px rgba(0,0,0,0.5);font-size:90%;">
<p>Sample</p>
<p>Sample</p>
</div>

極細斜めストライプ

<div style="background-image: linear-gradient( -45deg, #fff 25%,  #ffe5f2 25%,#ffe5f2 50%, #fff 50%, #fff 75%, #ffe5f2 75%, #ffe5f2 ); background-size: 5px 5px;font-size: 90%; padding: 20px;">
<p>Sample</p>
<p>Sample</p>
</div>

和紙

<div style="text-align:center; padding: 20px; background: #fff; box-shadow: 0 0 50px #bbeeff inset; font-size: 90%;">
<p>Sample</p>
<p>Sample</p>
</div>

シンプル角丸ボーダー囲み枠(背景なし)

<div style="border:#ffd201 solid 3px;border-radius:10px;padding:20px;font-size:90%;">
<p>Sample</p>
<p>Sample</p>
</div>

ふわっとライトイエロー

<div style="padding: 10px 20px; margin: 10px; background: #fffdef; box-shadow: #fffdef 0 0 16px 16px; font-size: 90%;">
<p>Sample</p>
<p>Sample</p>
</div>

ふわっとオレンジピンク

<div style="padding: 10px 20px; margin: 10px; background: #ffe4e1; box-shadow: #ffe4e1 0 0 16px 16px; font-size: 90%;">
<p>Sample</p>
<p>Sample</p>
</div>

ふわっとライトオレンジ

<div style="padding: 10px 20px; margin: 10px; background: #f8f0d7; box-shadow: #f8f0d7 0 0 16px 16px; font-size: 90%;">
<p>Sample</p>
<p>Sample</p>
</div>

ふわっと水色

<div style="background: rgb(150, 241, 253); box-shadow: rgb(150, 241, 253) 0px 0px 16px 16px; font-size: 90%; margin: 10px; padding: 10px 20px;">
<p>Sample</p>
<p>Sample</p>
</div>

見出し

簡単見出し(左線)

Sample

<p><span style="padding:0.5em;background:#fffaf4;border-left:solid 5px #ffaf58;">Sample</span></p>

簡単見出し(2重線)

Sample

<p><span style="padding:0 0.5em;font-weight:bold;border-bottom:double 5px #FFC778;">Sample</span></p>

HTML蛍光ペン

HTML蛍光ペン_黄色

Sample

<p><span style="padding:0 0.3em;background:linear-gradient(transparent 50%,#fff799 0%);">Sample</span></p>

HTML蛍光ペン_水色

Sample

<p><span style="padding:0 0.3em;background:linear-gradient(transparent 50%,#99ccff 0%);">Sample</span></p>

HTML蛍光ペン_オレンジ

Sample

<p><span style="padding:0 0.3em;background:linear-gradient(transparent 50%,#ffbb55 0%);">Sample</span></p>

HTML蛍光ペン_グリーン

Sample

<p><span style="padding:0 0.3em;background:linear-gradient(transparent 50%,#b2ffb2 0%);">Sample</span></p>

HTML蛍光ペン_ピンク

Sample

<p><span style="padding:0 0.3em;background:linear-gradient(transparent 50%,#F8E0EC 0%);">Sample</span></p>