4.プチ☆カスタマイズ

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

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

バリエーションを増やしました。スクロールするとHTMLを確認いただけます。

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

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

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

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

1. HTMLが編集できる画面（HTMLソースエディタ）に切り替えます。
2. 下記のHTMLソースを“コピペ”して使ってください。

１）細かい点線の枠に入れる

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

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

２）点線の枠に入れる

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

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

３）実線の枠に入れる

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

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

４）二重線の枠に入れる

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

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

５）細かい点線の枠に入れる（角丸つき）

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

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

６）点線の枠に入れる（角丸つき）

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

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

７）実線の枠に入れる（角丸つき）

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

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

８）二重線の枠に入れる（角丸つき）

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

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

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

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

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

２x）点線の枠に入れる-背景色付き

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

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

３x）実線の枠に入れる -背景色付き

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

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

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

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

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

５x）細かい点線の枠に入れる（角丸つき） -背景色付き

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

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

６x）点線の枠に入れる（角丸つき） -背景色付き

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

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

７x）実線の枠に入れる（角丸つき） -背景色付き

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

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

８x）二重線の枠に入れる（角丸つき） -背景色付き

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例）「細かい点線枠（角丸つき） - 濃い背景色付き・文字色変更 」の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: ５px;

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

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

background-color: #009999;

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

color: #ffffff;

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

＜おまけ＞border-radiusバリエーション

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

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

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

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

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