HTMLで文字を枠に入れる方法
HTMLでHTMLで文字を枠に入れる方法をご紹介いたします。項目「表」を使って枠をつける方法もありますが、外枠だけつけたい場合は、こんな方法もありますので参考にしてください。
目次
HTMLで文字を枠に入れた『サンプル』
実際に文字を囲む場合のソースコード
1.細かい点線の枠に入れる
↓下記をコピー＆ペースト
<div style=”padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;”>
ここに文字を入力する。
</div>
2.点線の枠に入れる
↓下記をコピー＆ペースト
<div style=”padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;”>
ここに文字を入力する。
</div>
3.実線の枠に入れる
↓下記をコピー＆ペースト
<div style=”padding: 10px; margin-bottom: 10px; border: 1px solid #333333;”>
ここに文字を入力する。
</div>
4.二重線の枠に入れる
↓下記をコピー＆ペースト
<div style=”padding: 10px; margin-bottom: 10px; border: 5px double #333333;”>
ここに文字を入力する。
</div>
5.細かい点線の枠に入れる（角丸つき）
↓下記をコピー＆ペースト
<div style=”padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;”>
ここに文字を入力する。
</div>
6.点線の枠に入れる（角丸つき）
↓下記をコピー＆ペースト
<div style=”padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px;”>
ここに文字を入力する。
</div>
7.実線の枠に入れる（角丸つき）
↓下記をコピー＆ペースト
<div style=”padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;”>
ここに文字を入力する。
</div>
8.二重線の枠に入れる（角丸つき）
↓下記をコピー＆ペースト
<div style=”padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px;”>
ここに文字を入力する。
</div>
こんにちは！
こんにちは！人生楽しみたいと思い立ち会社を辞めました（笑）