HTMLで文字を枠に入れる方法

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

スポンサードリンク
AUSDOM
サブコンテンツ

このページの先頭へ