4.プチ☆カスタマイズ

影付き枠 - HTMLのお勉強

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

 

↓こんな感じ

ここに文字を入れる。

変更方法

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

枠内で改行したい方へ

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

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

 

影付き枠サンプル

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>