4.プチ☆カスタマイズ

枠をつける - HTMLのお勉強

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

HTMLに直接CSSを加えることで、外枠をつけて、このようにいろいろアレンジできます。

ご要望にお応えしてバリエーションを増やしました。スクロールするとHTMLを確認いただけます。

>> タイトル付き枠も追加しました♪(別ページ)

 

【枠内で改行したい方へ】

枠内で改行したい場合は、Shiftを押しながら改行してください。<br>タグが挿入されます。

※Shiftを押さないと、<p></p>タグになり、枠が2つできちゃったりしますのでご注意を。

変更方法

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

 

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

ここに文字を入力する

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

 

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

 

 

1x)細かい点線の枠に入れる -背景色付き

ここに文字を入力する

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


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

 

 

2x)点線の枠に入れる-背景色付き

ここに文字を入力する

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


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

 

 

3x)実線の枠に入れる -背景色付き

ここに文字を入力する

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


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

 

 

4x)二重線の枠に入れる -背景色付き

ここに文字を入力する

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

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

 

5x)細かい点線の枠に入れる(角丸つき) -背景色付き

ここに文字を入力する

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

 

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

 

6x)点線の枠に入れる(角丸つき) -背景色付き

ここに文字を入力する

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

 

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

 

7x)実線の枠に入れる(角丸つき) -背景色付き

ここに文字を入力する

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

 

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

 

8x)二重線の枠に入れる(角丸つき) -背景色付き

ここに文字を入力する

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

 

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

 

 

1xx)細かい点線の枠に入れる  - 濃い背景色付き・文字色変更

ここに文字を入力する

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


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

 

 

2xx)点線の枠に入れる - 濃い背景色付き・文字色変更

ここに文字を入力する

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


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

 

 

3xx)実線の枠に入れる - 濃い背景色付き・文字色変更

ここに文字を入力する

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


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

 

 

4xx)二重線の枠に入れる  - 濃い背景色付き・文字色変更

ここに文字を入力する

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

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

 

5xx)細かい点線の枠に入れる(角丸つき) - 濃い背景色付き・文字色変更

ここに文字を入力する

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

 

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

 

6xx)点線の枠に入れる(角丸つき) - 濃い背景色付き・文字色変更

ここに文字を入力する

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

 

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

 

7xx)実線の枠に入れる(角丸つき) - 濃い背景色付き・文字色変更

ここに文字を入力する

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

 

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

 

8xx)二重線の枠に入れる(角丸つき) - 濃い背景色付き・文字色変更

ここに文字を入力する

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

 

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

 

 

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

「細かい点線枠(角丸つき) - 濃い背景色付き・文字色変更 」を例に,解説します。
線の色や、幅のバリエーションをつけたい場合、参考にしてください。

 


例)「細かい点線枠(角丸つき) - 濃い背景色付き・文字色変更 」のHTMLソース

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px; background-color: #009999; color: #ffffff;">
    ここに文字を入力する。
</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: 5px;

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

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


background-color: #009999;

→ background-colorは、背景色の指定です。色指定は、こちらのページをご参考ください。


color: #ffffff;

→ colorは、文字色の指定です。色指定は、こちらのページをご参考ください。


<おまけ>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>