ブログをおしゃれにする初心者向けカスタマイズ。CSS【border(ボーダー)】の基本テクニック

こんにちは、斉藤です。

ブログをオシャレにしたい！というリクエストを頂いたので、今日は見映えがよくなる簡単なCSSテクニックをお伝えしたいと思います。

「ブログをオシャレに」の「オシャレ」、つまり見た目の部分はCSSで指定をします。

今日紹介するのは、使う頻度が高くて色んなアレンジが出来る「border（ボーダー）」プロパティ。

border（ボーダー）＝枠線と思ってください。

ではまず、borderを使うとどんな表現が出来るの？を先に紹介しますね。

borderプロパティを使った装飾サンプル

borderの指定は、見出しや囲み枠などで使われることが多いです。

見出しの例。

同じくよく使うのが囲み枠の装飾。

出来ることはなんとなくお分かりいただけたでしょうか。

では次に、borderの指定方法について。

borderの指定方法

上記が基本の書き方です。

線の太さ、線の種類、線の色を指定します。

線の太さはそのままですね。値が大きくなるほど太くなります。

線の種類では、好みによって下の値を選んでください。

種類を変えるだけで見た目の雰囲気が変わります。

線の色は、こちらのサイト（WEB色見本 原色大辞典）を参考に好きな色を選んでください。

borderは個別に指定もできる

このボーダーのいいところは、上下左右個別で指定も出来るところ。

を使って指定します。

例えばサンプル1のデザインは、border-leftだけ指定をしています。

サンプル2では上下のボーダーを指定しています。

見出しサンプルのCSSコード

最後に、サンプルで作った見出しと囲み枠のCSSソースを貼っておきますね。

htmlとCSSを分けて使うパターンと、そのままコピペで使えるパターンの2種用意したので、好きな方を使ってください。（※アメブロの方は下のそのままコピペで使える方を使用してください）

htmlとCSSを分けて使う場合は、htmlは

<h2 class="midashi-sample1">見出しを入れる</h2>
<p class="midashi-sample1">見出しを入れる</p>
<div class="box-sample1">囲み枠に入れる内容</div>

のように、使いたいタグにclass名を指定する形で使用してください。

まとめ

影を付けたり、角丸にしたり、アレンジは色々出来るんですが、今回は初級編。
borderを使った基本的な装飾についてお伝えしました。

中級編、上級編はまた書きます 笑。

記事でご紹介したサンプルは自由にソースをコピペして使っていただいてOKです。
アレンジもご自由に♪

質問があればコメント欄からお気軽にどうぞ。

[sp]
[ad#co-2]
[/sp]