最低限これだけ押さえておけば大丈夫！というHTML装飾をご紹介
ネット検索するとオシャレな装飾が大量にヒットするけど、なんだか良く分からなくなってきた。それに凝ったデザインは使いにくいし、色々な種類を使うと逆に見にくいかも、、、
そんな私が現在、実際に使っているものだけを纏めました。
そのままコピペ使用OKです！
マーカー罫線
黄色マーカー
ここに文章を入力<span style="background: linear-gradient(transparent 30%, #ffff7f 100%);">ここに文章を入力</span>
黄色マーカー＋太字バージョン
ここに文章を入力<span style="background: linear-gradient(transparent 30%, #ffff7f 100%);"><strong>ここに文章を入力</strong></span>使用色：#ffff7f
青色マーカー
ここに文章を入力<span style="background: linear-gradient(transparent 30%, #87ceeb 100%);">ここに文章を入力</span>
青色マーカー＋太字バージョン
ここに文章を入力<span style="background: linear-gradient(transparent 30%, #87ceeb 100%);"><strong>ここに文章を入力</strong></span>使用色：#87ceeb
囲みデザイン
背景色付き ※<br>を足せばさらに改行できます
文章①
文章②
文章③
文章②
文章③
<div style="background: #dcdcdc; box-shadow: #dcdcdc 0 0 10px 10px; margin:10px; font-size: 100%; padding: 20px;">文章①
<br>文章②
<br>文章③</div>使用色：#dcdcdc
タイトル欄付き ※<br>を足せばさらに改行できます
<fieldset style="border: 1px solid #9acd32; font-size: 100%;padding: 30px;">
<legend>ここにタイトル</legend>ここに文章①
<br>
<br>文章②
<br>文章③
<br>
</fieldset>使用色：#9acd32
吹き出し
思い出し風 ※文と文の間に<br>を入力で改行できます
ここに文章を入力
<div style="display:inline-block;position: relative; margin: 2em 0 2em 40px; background: #fffacd; border-radius: 20px; font-size: 100%; padding: 20px;"><span style=" position: absolute; left: -38px; width: 13px; height: 12px; bottom: 0; background: #fffacd; border-radius: 50%; "></span>ここに文章を入力<span style=" position: absolute; left: -24px; width: 20px; height: 18px; bottom: 3px; background: #fffacd; border-radius: 50%; margin: 0; padding: 0;"></span></div>使用色：#fffacd
左吹き出し ※文と文の間に<br>を入力で改行できます
ここに文章を入力
<div style="display:inline-block; position: relative; margin: 1em 0 1em 20px; border-radius: 10px; border: 2px solid #ffd700; font-size: 100%; padding: 10px; "><span style=" position: absolute; display: block; left: -15px; top: 20px; border-right: 15px solid #ffd700; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span>ここに文章を入力<span style="position: absolute; display: block; left: -12px; top: 20px; border-right: 15px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span></div>使用色：#ffd700
右吹き出し ※文と文の間に<br>を入力で改行できます
ここに文章を入力
<div align="right"> <div style=" display:inline-block; margin: 1em 10px 1em 0; position: relative; border-radius: 10px; border: 2px solid #778899; font-size: 100%; padding: 10px; "><span style=" position: absolute; display: block; right: -15px; top: 20px; border-left: 15px solid #778899; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span>ここに文章を入力<span style="position: absolute; display: block; right: -12px; top: 20px; border-left: 15px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span></div></div>使用色：#778899
まとめ
↓改行
<br>↓文章をストロングで挟むと太字
<strong></strong>こちらは様々なデザイン内でも応用できますのでご活用ください！
また、各項目の下に今回使用色を記載しています。
HTMLテキスト内の「#数字orアルファベット」を変えれば色変更できます。
慣れてきたらご自身でもカスタマイズしてみてくださいね♪
リンク
