HTMLのお勉強・枠をつける

HTML編集画面を使って、簡単な枠をつける方法を紹介します。

項目「表」を使って枠をつける方法もありますが、外枠だけつけたい場合は、こんな方法もあります。

 

サンプル

1)丸い点線の枠に入れる
2)波線の枠に入れる
3)実線の枠に入れる
4)二重線の枠に入れる

 

枠をつける

【変更方法】

1)HTMLが編集できる画面(HTMLソースエディタ)に切り替えます。

2)下記の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: 5px solid #333333; border-radius: 10px;">
    ここに文字を入力する。
</div>

 

8)二重線の枠に入れる(角丸つき)

ここに文字を入力する

↓下記をコピー&ペースト

 

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px;">
    ここに文字を入力する。
</div>



HTMLソース解説(CSSによる指定)

丸い点線枠を例に,解説します。
線の色や、幅のバリエーションをつけたい場合、参考にしてください。

 


●丸い点線枠のHTMLソース

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">
    ここに文字を入力する。
</div>

 

padding: 10px;
→ paddingは、枠の内側の余白です。これは、10px内側に余白を入れています。

   数値の大小で、余白の幅が変更できます。

 

margin-bottom: 10px;

→ marginは、枠の外側の余白です。margin-bottomだと、枠の下の余白です。

   数値の大小で、余白の幅が変更できます。

 

border: 1px dotted #333333;
→ borderは、線の指定です。これは、線の太さ1px、線の種類がdotted、線の色が#333333となります。

  線の太さは、数字の大小で変更します。
  線の種類は、丸い点線が「dotted」、波線が「dashed」、直線が「solid」、二重線が「double」です。

  線の色の指定は、こちらのページを参考にしてください。

 

border-radius: 10px;

→ border-radiusは、角丸指定。角丸の半径が10pxとなります。

  数字の大小で角丸の大きさが変わります。
  ※但し、このタグはブラウザ環境で角丸にならない場合もあります。

 

<おまけ>border-radiusバリエーション

「border-radius:10px 0 10px 0;」とすると、左上、右上、右下、左下の順に角丸の半径を変更することができます。0は、角丸なしの意味。

 

ここに文字を入力する

 

 

文字を2行以上入れたい時は?

二行以上文字を入れたい場合。

ここに文字を入力する。
2行目
3行目


HTML編集画面で、<br />を使って、文字を改行します。
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">
    ここに文字を入力する。<br />2行目<br />3行目
</div>

文字のセンタリングをしたい場合は?

文字のセンタリングをしたい場合。

ここに文字を入力する。
2行目
3行目


HTML編集画面で、 text-align: center; を加えます。
<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; text-align:center;">
    ここに文字を入力する。<br />2行目<br />3行目
</div>