カラーコード
囲み枠で使いやすいものを集めました。
文中の＃が付いているところは、カラーコードです。
下記サイトを参考にして色を変えてください。
色の組み合わせの参考に
グレーの囲み枠
<fieldset style=”width: 70%; padding: 10px; border-radius: 8px; background: #e9e9e9; border: none;”>囲み</fieldset>
ピンク吹き出し
ピンク吹き出し
<h3 style=”width: 85%; padding: 10px; border-radius: 8px; background: #f3acd2; color: #fff; margin-bottom: 0px; margin-left: 2px;”>ピンク吹き出し</h3>
<div style=”width: 0px; height: 0px; border-style: solid; border-width: 16px 10px 0 10px; border-color: #f3acd2 transparent transparent; margin-left: 50px; margin-bottom: 20px;”>
ブルーグレーの吹き出し
ふきだし
<h3 style=”width: 40%; padding: 10px; border-radius: 8px; background: #bec9d8; color: #fff; margin-bottom: 0px; margin-left: 10px;”>ふきだし</h3>
<div style=”width: 0px; height: 0px; border-style: solid; border-width: 25px 10px 0 10px; border-color: #bec9d8 transparent transparent transparent; margin-left: 30px; margin-bottom: 20px;”></div>
囲みタイトル付き
<fieldset style=”border: 0.5px solid #b7c6d2; border-radius: 8px; background;padding: 10px;”><legend><span style=”font-weight: bold;”><span style=”color: #82aac7;”><span style=”font-size: 1.2em;“> ポイント </span></span></span></legend>ここに文字</fieldset>
ブルーのグレー塗りつぶし 見出し
みだし
<h3 style=”width: 75%; border-left: 13px solid #b2c7e4; padding: 10px; background: #EEEEEE; margin-left: 10px; padding-left: 10px;”>みだし</h3>
ピンクのグレー塗りつぶし 見出し
ピンク
<h3 style=”width: 75%; border-left: 13px solid #FFABCE; padding: 10px; background: #EEEEEE; margin-left: 10px; padding-left: 10px;”>ピンク</h3>
ブルーの下線
らら
<span style=”background: linear-gradient(transparent 60%, #b9e3ee 60%);”> らら</span>