枠組みのサンプル

枠組みのサンプルです。

枠の色は『#a1d8e2』を変更することで、変えることができます。
（枠内色付きの場合、薄い色は『#f8f8ff』を変えます）

 

色は、こちらのページを参考にして、変更してみてください。

色見本のページ

 

また、枠の横幅は、「width: 500px』を変更することで変えられます。

この『width: 500px』を削除するとページの幅最大の枠を作ることができます。

 

色々と試してみてくださいね。

ちなみにこれをコピペする場合は、アメブロのhtml表示の方にペタッと貼り付けてくださいね。

===================

 

1.
<div style=”padding: 10px; border-radius: 10px; border: 5px double#a1d8e2; width: 500px;”>ココに本文を入れる
改行は、shiftキーを押しながら、Returnキー</div>

 

2.
<div style=”background: #fff; padding: 10px; border: 2px dotted#a1d8e2; width: 500px;”>ココに本文を入れる
改行は、shiftキーを押しながら、Returnキー</div>

 

3.
<div style=”padding: 10px; border: 1px solid#a1d8e2; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 500px;”>ここに本文を入れる
改行は、shiftキーを押しながら、Returnキー</div>

 

4.
<div style=”background: #f8f8ff; padding: 10px; border: 1px solid#a1d8e2; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 500px;”>ここに文章を入れる
改行は、shiftキーを押しながら、Returnキー</div>

 

 

5.
<div style=”background: #fff; padding: 10px; border: 2px dotted#a1d8e2; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 500px;”>ここに文章を入れる
改行は、shiftキーを押しながら、Returnキー</div>

 

６．
<div style=”background: #a1d8e2; border: 1px solid#a1d8e2; padding-left: 10px; width: 510px;”>ここに文章を入れる</div>
<div style=”border: 1px solid#a1d8e2; padding: 10px; width: 500px;”>ここに文章を入れる
改行は、shiftキーを押しながら、Returnキー</div>

 

7.
<div style=”border: #a1d8e2 solid 1px; border-left: #a1d8e2 solid 13px; padding: 10px; background: #f8f8ff; width: 500px;”>ここに文章を入力する。
改行はShift+Enter</div>