遠く離れていても、LEGENDを見上げれば、同じ空を見れる。
枠線の記事への入れ方はコチラをご覧ください
解説
#で始まる６文字の英数字がカラーコードです。
これを変えると色を変更できます。
【配色の参考ページ】
○px がラインの太さです。
数字が大きいほど太くなります。
タグを変えると線の種類も変えられます
実践： solid
二重線： double
点線： dotted
破線： dashed
文字数に合わせて幅を自動調整： display:inline-block;
ここから枠線一覧になります。
コピーして、ご自由にお使いください！
１．基本の罫線
<hr>
２．カラー罫線
<hr style=”border: 1px solid #1e50a2;”>
全２０色はこちらから
３．点線
<hr style=”border: 1px dashed #ffcccc;”>
全２０色はこちらから
４．基本の枠 （スマホだと表示されない場合があります）
<fieldset>本文</fieldset>
５．基本の枠（細いバージョン）
<fieldset style=”border: 1px solid #FF0000;”>文章</fieldset>
全２０色はこちらから
６．基本の枠（太いバージョン）
<fieldset style=”border: 2px solid #00a3af;”>文章</fieldset>
全２０色はこちらから
７．基本の枠（角丸・細いバージョン）
<fieldset style=”padding:10px;border-radius: 5px;border: 1px solid #f19072;”>本文</fieldset>
全２０色はこちらから
８．基本の枠（角丸・太いバージョン）
<fieldset style=”padding:10px;border-radius: 5px;border: 2px solid #006400;”>本文</fieldset>
全２０色はこちらから
９．基本の枠（二重線・細いバージョン）
<fieldset style=”border:4px double #00afcc;”>本文</fieldset>
全２０色はこちらから
１０．基本の枠（二重線・太いバージョン）
<fieldset style=”border:5px double #ffbcdd;”>本文</fieldset>
全２０色はこちらから
１１．基本の枠（角丸二重線・細いバージョン）
<fieldset style=”padding:10px;border-radius: 5px;border: 4px double #884898;”>本文</fieldset>
全２０色はこちらから
１２．基本の枠（角丸二重線・太いバージョン）
<fieldset style=”padding:10px;border-radius: 5px;border: 5px double #fa8072;”>本文</fieldset>
全２０色はこちらから
１３．点線の枠
<fieldset style=”border: 2px dotted #66cc99;”>本文</fieldset>
全２０色はこちらから
１４．角丸点線の枠
<fieldset style=”padding:10px;border-radius: 5px;border: 2px dotted #ff8989;”>本文</fieldset>
全２０色はこちらから
１５．破線の枠 （細めバージョン）
<fieldset style=”border: 1px dashed #ec6800;”>本文</fieldset>
全２０色はこちらから
【枠線１６】破線の枠（太めバージョン）
<fieldset style=”border: 2px dashed #4d5aaf;”>本文</fieldset>
全２０色はこちらから
１７．背景付枠
<fieldset style=”background:#9eceff; padding:10px; border:none;”>本文</fieldset>
全２０色はこちらから
１８．外枠＆背景付枠
<fieldset style=”background:#ffffc1; padding:10px; border:2px solid #ee7800;”>本文</fieldset>
全８色はこちらから
１９．角丸外枠＆背景付枠
<fieldset style=”background:#dbffdb; padding:10px; border-radius:10px; border:2px solid #98d98e;”>本文</fieldset>
全８色はこちらから
２０．点線外枠＆背景付枠
<fieldset style=”background:#ffeeee; padding:10px; border:1px dotted #ff0000;”>本文</fieldset>
全８色はこちらから
２１．角丸点線外枠＆背景付枠
<fieldset style=”background:#f7efff; padding:10px; border-radius:10px; border: 2px dotted #d3a8ff;”>本文</fieldset>
全８色はこちらから
２２．点線外枠＆背景付枠（太めバージョン）
<fieldset style=”background:#f7f7f7;padding:10px;border:3px dotted #ffb6c1;”>本文</fieldset>
全８色はこちらから
２３．破線外枠＆背景付枠（細めバージョン）
<fieldset style=”background:#fff4f9; padding:10px; border:1px dashed #ff84c1;”>本文</fieldset>
全８色はこちらから
２４．破線外枠＆背景付枠（太めバージョン）
<fieldset style=”background:#ffffdb; padding:10px; border:2px dashed #7fffbf;”>本文</fieldset>
全８色はこちらから
２５．角丸破線外枠＆背景付枠
<fieldset style=”background:#e4faff; padding:10px; border-radius:10px; border:2px dashed #84c1ff;”>本文</fieldset>
全８色はこちらから
２６．角丸背景付枠
<fieldset style=”background:#ff7a7a; padding:10px; border-radius:10px; border:none;”><span style=”color:#ffffff;”>本文</span></fieldset>
全２０色はこちらから
２７．角丸・別外枠＆背景付枠
<fieldset style=”background:#b7ffff; padding:10px; border:4px double #ffffff; border-radius:10px;”>本文</fieldset>
全２０色はこちらから
２８．タイトル付き枠（細いバージョン）
<fieldset style=”border:1px solid #ff7f50;”><legend>タイトル</legend>
本文</fieldset>
全２０色はこちらから
２９．タイトル付き枠（太いバージョン）
<fieldset style=”border:2px solid #ffcccc;”><legend>【タイトル】</legend>
本文</fieldset>
全２０色はこちらから
３０．タイトル付き・点線の枠（細いバージョン）
<fieldset style=”border:2px dotted #2a83a2;”><legend>タイトル</legend>本文</fieldset>
全２０色はこちらから
３１．タイトル付き・点線の枠（太いバージョン）
<fieldset style=”border:3px dotted #fcc800;”><legend>タイトル</legend>
本文</fieldset>
全２０色はこちらから
３２．タイトル付き・二重線の枠（細いバージョン）
<fieldset style=”border:4px double #93ca76;”><legend>タイトル</legend> 本文</fieldset>
全２０色はこちらから
３３．タイトル付き・二重線の枠（太いバージョン）
<fieldset style=”border:5px double #f09199;”><legend>タイトル</legend> 本文</fieldset>
全２０色はこちらから
３４．上部タイトル付枠 ※androidスマホで開くと崩れる場合があります
■タイトル
本文
<div style=”background:#ff7f50; border:1px solid #ff7f50; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトル</font></div><div style=”border:1px solid #ff7f50; padding:10px; font-size:1em;”>本文<br></div>
全２０色はこちらから
３５．見出し枠 ※androidスマホで開くと崩れる場合
があります
タイトル
<div style=”border-left: 10px solid #4c6cb3; border-bottom: 2px solid #4c6cb3; padding-left: 10px; font-weight: bold; font-size: 130%; color: #000000;”>タイトル</div>
全２０色はこちらから
告知記事を書くときはもちろん、通常の記事を書く時も、
枠線を使ったりラインを引いたりするだけで、
とっても読みやすくなります！
ぜひ、使ってみてくださいね
【参考記事】
LEGENDを楽天ショップで探してる方へ、TVなどでも話題騒然今が旬の商品です
枠線の記事への入れ方はコチラをご覧ください
解説
#で始まる６文字の英数字がカラーコードです。
これを変えると色を変更できます。
【配色の参考ページ】
○px がラインの太さです。
数字が大きいほど太くなります。
タグを変えると線の種類も変えられます
実践： solid
二重線： double
点線： dotted
破線： dashed
文字数に合わせて幅を自動調整： display:inline-block;
ここから枠線一覧になります。
コピーして、ご自由にお使いください！
１．基本の罫線
<hr>
２．カラー罫線
<hr style=”border: 1px solid #1e50a2;”>
全２０色はこちらから
３．点線
<hr style=”border: 1px dashed #ffcccc;”>
全２０色はこちらから
４．基本の枠 （スマホだと表示されない場合があります）
<fieldset>本文</fieldset>
５．基本の枠（細いバージョン）
<fieldset style=”border: 1px solid #FF0000;”>文章</fieldset>
全２０色はこちらから
６．基本の枠（太いバージョン）
<fieldset style=”border: 2px solid #00a3af;”>文章</fieldset>
全２０色はこちらから
７．基本の枠（角丸・細いバージョン）
<fieldset style=”padding:10px;border-radius: 5px;border: 1px solid #f19072;”>本文</fieldset>
全２０色はこちらから
８．基本の枠（角丸・太いバージョン）
<fieldset style=”padding:10px;border-radius: 5px;border: 2px solid #006400;”>本文</fieldset>
全２０色はこちらから
９．基本の枠（二重線・細いバージョン）
<fieldset style=”border:4px double #00afcc;”>本文</fieldset>
全２０色はこちらから
１０．基本の枠（二重線・太いバージョン）
<fieldset style=”border:5px double #ffbcdd;”>本文</fieldset>
全２０色はこちらから
１１．基本の枠（角丸二重線・細いバージョン）
<fieldset style=”padding:10px;border-radius: 5px;border: 4px double #884898;”>本文</fieldset>
全２０色はこちらから
１２．基本の枠（角丸二重線・太いバージョン）
<fieldset style=”padding:10px;border-radius: 5px;border: 5px double #fa8072;”>本文</fieldset>
全２０色はこちらから
１３．点線の枠
<fieldset style=”border: 2px dotted #66cc99;”>本文</fieldset>
全２０色はこちらから
１４．角丸点線の枠
<fieldset style=”padding:10px;border-radius: 5px;border: 2px dotted #ff8989;”>本文</fieldset>
全２０色はこちらから
１５．破線の枠 （細めバージョン）
<fieldset style=”border: 1px dashed #ec6800;”>本文</fieldset>
全２０色はこちらから
【枠線１６】破線の枠（太めバージョン）
<fieldset style=”border: 2px dashed #4d5aaf;”>本文</fieldset>
全２０色はこちらから
１７．背景付枠
<fieldset style=”background:#9eceff; padding:10px; border:none;”>本文</fieldset>
全２０色はこちらから
１８．外枠＆背景付枠
<fieldset style=”background:#ffffc1; padding:10px; border:2px solid #ee7800;”>本文</fieldset>
全８色はこちらから
１９．角丸外枠＆背景付枠
<fieldset style=”background:#dbffdb; padding:10px; border-radius:10px; border:2px solid #98d98e;”>本文</fieldset>
全８色はこちらから
２０．点線外枠＆背景付枠
<fieldset style=”background:#ffeeee; padding:10px; border:1px dotted #ff0000;”>本文</fieldset>
全８色はこちらから
２１．角丸点線外枠＆背景付枠
<fieldset style=”background:#f7efff; padding:10px; border-radius:10px; border: 2px dotted #d3a8ff;”>本文</fieldset>
全８色はこちらから
２２．点線外枠＆背景付枠（太めバージョン）
<fieldset style=”background:#f7f7f7;padding:10px;border:3px dotted #ffb6c1;”>本文</fieldset>
全８色はこちらから
２３．破線外枠＆背景付枠（細めバージョン）
<fieldset style=”background:#fff4f9; padding:10px; border:1px dashed #ff84c1;”>本文</fieldset>
全８色はこちらから
２４．破線外枠＆背景付枠（太めバージョン）
<fieldset style=”background:#ffffdb; padding:10px; border:2px dashed #7fffbf;”>本文</fieldset>
全８色はこちらから
２５．角丸破線外枠＆背景付枠
<fieldset style=”background:#e4faff; padding:10px; border-radius:10px; border:2px dashed #84c1ff;”>本文</fieldset>
全８色はこちらから
２６．角丸背景付枠
<fieldset style=”background:#ff7a7a; padding:10px; border-radius:10px; border:none;”><span style=”color:#ffffff;”>本文</span></fieldset>
全２０色はこちらから
２７．角丸・別外枠＆背景付枠
<fieldset style=”background:#b7ffff; padding:10px; border:4px double #ffffff; border-radius:10px;”>本文</fieldset>
全２０色はこちらから
２８．タイトル付き枠（細いバージョン）
<fieldset style=”border:1px solid #ff7f50;”><legend>タイトル</legend>
本文</fieldset>
全２０色はこちらから
２９．タイトル付き枠（太いバージョン）
<fieldset style=”border:2px solid #ffcccc;”><legend>【タイトル】</legend>
本文</fieldset>
全２０色はこちらから
３０．タイトル付き・点線の枠（細いバージョン）
<fieldset style=”border:2px dotted #2a83a2;”><legend>タイトル</legend>本文</fieldset>
全２０色はこちらから
３１．タイトル付き・点線の枠（太いバージョン）
<fieldset style=”border:3px dotted #fcc800;”><legend>タイトル</legend>
本文</fieldset>
全２０色はこちらから
３２．タイトル付き・二重線の枠（細いバージョン）
<fieldset style=”border:4px double #93ca76;”><legend>タイトル</legend> 本文</fieldset>
全２０色はこちらから
３３．タイトル付き・二重線の枠（太いバージョン）
<fieldset style=”border:5px double #f09199;”><legend>タイトル</legend> 本文</fieldset>
全２０色はこちらから
３４．上部タイトル付枠 ※androidスマホで開くと崩れる場合があります
■タイトル
本文
<div style=”background:#ff7f50; border:1px solid #ff7f50; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトル</font></div><div style=”border:1px solid #ff7f50; padding:10px; font-size:1em;”>本文<br></div>
全２０色はこちらから
３５．見出し枠 ※androidスマホで開くと崩れる場合
があります
タイトル
<div style=”border-left: 10px solid #4c6cb3; border-bottom: 2px solid #4c6cb3; padding-left: 10px; font-weight: bold; font-size: 130%; color: #000000;”>タイトル</div>
全２０色はこちらから
告知記事を書くときはもちろん、通常の記事を書く時も、
枠線を使ったりラインを引いたりするだけで、
とっても読みやすくなります！
ぜひ、使ってみてくださいね
【参考記事】
