文字を枠線で囲むコード 【備忘録】

こんにちは、ユウトです。

今回は、文字を枠線で囲むコードについて、備忘録のためにまとめておきます。

LPでは、文章を枠線で囲むことで、読者に読みやすいレターを作ることができます。

ブログ記事でも、強調したい箇所に枠をつけたり、枠内の背景色を工夫することで、メリハリを出せます。

 

テスト!
これは、テストです。

 

【コード】

<div style=”padding: 1px; width: 100%; border: 5px solid #ffd700; text-align: center; background: #ffffe0;”><strong><span style=”font-size: 14pt;”><span style=”color: #ff0000;”>テスト!</span>
これは、テストです。</span></strong></div>

 

テスト!
これは、テストです。

 

文字を中央寄せして、枠線で囲むだけのシンプルなパターンです。

【コード】

<div style=”padding: 5px; width: 100%; border: 3px solid #0000FF; text-align: center; background: #FFFFFF;”>テスト!
これは、テストです。</div>

 

テスト!
これは、テストです。

 

文字を左に寄せたければ、中央寄せを指定するコードを削除するだけでOKです。

【コード】

<div style=”padding: 5px; width: 100%; border: 3px solid #0000FF; background: #FFFFFF;”>テスト!
これは、テストです。</div>

 

以上



コメントを残す

サブコンテンツ

このページの先頭へ