老後に備えるパソコン活用

簡単に使えるCSS　パート�A





前回からの引き続きです。数回に分けて、ブログで簡単に使える便利なCSSをご紹介します。

※CSSというのは、ホームページの装飾を補うプログラム言語と思ってください。


では、さっそく以下の例を表示します。


ご自身のブログやホームページに、ソースコードをコピー＆ペーストして貼り付ければOKです。

中の文章は、ご自由に変更してください。




◇見出し：囲み青


ソースコード
<div style="padding:13px 8px;border-color:#0040FF;border-width:1px 1px 1px 7px;border-style:solid;">見出し</div>

---

◇見出し：囲み赤


ソースコード
<div style="padding:13px 8px;border-color:#FF0000;border-width:1px 1px 1px 7px;border-style:solid;">見出し</div>

---

◇見出し：囲み緑


ソースコード
<div style="padding:13px 8px;border-color:#01DF01;border-width:1px 1px 1px 7px;border-style:solid;">見出し</div>

---

◇見出し：囲み黄


ソースコード
<div style="padding:13px 8px;border-color:#FFBF00;border-width:1px 1px 1px 7px;border-style:solid;">見出し</div>

---

◇見出し：塗りつぶし水色


ソースコード
<div style="padding:13px 8px;background:#CEF6F5;border-color:#FFFFFF #555555 #555555 #FFFFFF;border-width:1px;border-style:solid;">見出し</div>

---

◇見出し：塗りつぶしピンク


ソースコード
<div style="padding:13px 8px;background:#F6CEF5;border-color:#FFFFFF #555555 #555555 #FFFFFF;border-width:1px;border-style:solid;">見出し</div>

---

◇見出し：塗りつぶし薄緑


ソースコード
<div style="padding:13px 8px;background:#80FF00;border-color:#FFFFFF #555555 #555555 #FFFFFF;border-width:1px;border-style:solid;">見出し</div>

---

◇見出し：塗りつぶし黄


ソースコード
<div style="padding:13px 8px;background:#F7D358;border-color:#FFFFFF #555555 #555555 #FFFFFF;border-width:1px;border-style:solid;">見出し</div>



※線の色を変更する場合には、
border-color:#FFBF00や、background:#F7D358
の#FFBF00の部分をHTMLのカラーコードを変更することで、お好きな色に変更できます。

HTMLカラーコードのサイト
HTML color codes



これから、ブログ作成に使える、簡単CSSテクニックを、数回に分けてご紹介していきます。





TVショッピングでお馴染みの真空パック【FoodSaver】

FoodSaverは日本でのシェアが非常に高い家庭用真空パック機です。

全世界では２０００万台も販売しています！

アウトドア用品メーカーのコールマンジャパンが提供する製品だから安心のブランド。

FoodSaverの真空保存なら鮮度が最大５倍も長持ちするんです！

身近な食材を真空パックで保存するので、目で見て伝わりやすい商品です。