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

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

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


では、さっそく以下の例を表示します。今回は「囲み線」の装飾です。


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

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





ソースコード

<div style="border:2px dotted #555; border-color:#000000";>
<p>　点線（丸い点線） dotted

<p>　文字を入れてください

</div>





ソースコード

<div style="border:2px dashed #555; border-color:#0000FF">
<p>　破線（四角い点線） dashed

<p>　文字を入れてください

</div>





ソースコード

<div style="border:2px solid #555; border-color:#DF7401"">
<p>　実線 solid

<p>　文字を入れてください

</div>





ソースコード

<div style="border:5px double #555; border-color:#B40431"">
<p>　二重線 double

<p>　文字を入れてください

</div>





ソースコード

<div style="border:10px outset #999; border-color:#E6E6E6"">
<p>　立体枠 outset

<p>　文字を入れてください

</div>



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

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



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