HTMLでHTMLで文字を枠に入れる方法をご紹介いたします。項目「表」を使って枠をつける方法もありますが、外枠だけつけたい場合は、こんな方法もありますので参考にしてください。
目次
HTMLで文字を枠に入れる方法
- 更新日：
- 公開日：
1.細かい点線の枠に入れる
2.点線の枠に入れる
3.実線の枠に入れる
4.二重線の枠に入れる
5.細かい点線の枠に入れる（角丸つき）
6.点線の枠に入れる（角丸つき）
7.実線の枠に入れる（角丸つき）
8.二重線の枠に入れる（角丸つき）
実際に文字を囲む場合のソースコード
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>
