4.プチ☆カスタマイズ

HTML編集画面を使って、簡単な枠をつける方法を「HTMLのお勉強・枠をつける」で紹介していますが、 このページでは、枠に影がついたパターンをご紹介します。

↓こんな感じ

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

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

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

1.影をつける

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

<div style="padding: 10px; margin: 15px auto; color: #333333; background: #ffffff none repeat scroll 0% 0%; border: 1px solid #cccccc; box-shadow: 4px 4px 8px #dddddd;">ここに文字を入れる。</div>

2.影を大きめにする

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

<div style="padding: 10px; margin: 15px auto; color: #333333; background: #ffffff none repeat scroll 0% 0%; border: 1px solid #cccccc; box-shadow: 8px 8px 16px #dddddd;">ここに文字を入れる。</div>

3.影を抑えめにする

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

<div style="padding: 10px; margin: 15px auto; color: #333333; background: #ffffff none repeat scroll 0% 0%; border: 1px solid #cccccc; box-shadow: 2px 2px 4px #dddddd;">ここに文字を入れる。</div>