ブログを書くときによく利用する、文字を枠で囲む設定です。
いっつも調べなおしているので、まとめておくことにしました。
よかったらコピーしてお使いください。
” を “ にしてから使ってください
● 文字と線の間に余白を持たせた
<div style=”border-style: solid; border-width: 1px; padding: 8px 5px 8px 20px;”>何かしらの文字</div>
● 枠内の文字に色をつけた
<div style=”border-style: solid; border-width: 1px; padding: 8px 5px 8px 20px; ; border-color: black; color: red;”>何かしらの文字</div>
● 枠内の背景に色をつけた
<div style=”border-style: solid; border-width: 1px; padding: 8px 5px 8px 20px; ; border-color: black; color: black; background-color: #fa8072;”>何かしらの文字</div>
● 枠線の種類を破線にしてみた
<div style=”border: #ff6666 2px dashed; padding: 10px; background: #ffffff; color: #666666;”>何かしらの文字</div>
● 枠線の種類を点線にしてみた
<div style=”border-style: dashed; border-width: 1px; padding: 8px 5px 8px 20px;”></div>
● 枠線の種類を破線にしてみた(赤縁取り)
<div style=”border: #ff6666 2px dashed; border-width: 1px; padding: 8px 5px 8px 20px;”></div>
● 枠の角を丸くして背景を黄色にしてみた
<div style=”border-style: solid; border-width: 1px; padding: 8px 5px 8px 20px; border-color: black; color: black; background-color: yellow; border-radius: 15px;”></div>
● 枠の種類を二重線にしてみた
<div style=”border: black 5px double; padding: 10px; background: #ffffff; color: #666666;”></div>
● 枠に影をつけてみた
<div style=”border-style: solid; border-width: 1px; padding: 8px 5px 8px 20px; ; border-color: black; color: black; background-color: #fa8072; box-shadow: 5px 5px 5px #AAA;”></div>
● 枠に影をつけてみた(赤)
<div style=”border-style: solid; border-width: 1px; padding: 8px 5px 8px 20px; ; border-color: black; color: black; background-color: #fa8072; box-shadow: 5px 5px 5px red;”></div>
● タイトル付きの枠
● 上と右に線がない枠
<div style=”border-left: solid red 7px; border-bottom: solid #666666 1px; padding-left: 8px;”><strong>●●●</strong></div>
おわり
One thought on “文字を枠で囲む設定 HTMLの初心者”