文字を枠で囲む設定 HTMLの初心者

ブログを書くときによく利用する、文字を枠で囲む設定です。

いっつも調べなおしているので、まとめておくことにしました。

よかったらコピーしてお使いください。

 

 を “ にしてから使ってください

 

● 文字と線の間に余白を持たせた

<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>

 

● タイトル付きの枠

タイトル

<FIELDSET style=”width:300px”>
<LEGEND>
<b>タイトル</b>
</LEGEND>
あいうえお<br>
かきくけこ<br>
さしすせそ <br>
</FIELDSET>

 

● 上と右に線がない枠

<div style=”border-left: solid red 7px; border-bottom: solid #666666 1px; padding-left: 8px;”><strong>●●●</strong></div>

 

おわり

One thought on “文字を枠で囲む設定 HTMLの初心者

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です