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

CSSでborderを指定する

こんにちは、斉藤です。

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

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

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

border(ボーダー)=枠線と思ってください。

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

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

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

見出しの例。

見出しサンプル1
見出しサンプル2
見出しサンプル3

 

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

囲み枠のサンプル1。シンプルな実線の囲み枠です。汎用性が高いです。
囲み枠のサンプル2。二重線にしています。くっきりはっきりデザインのブログにおすすめ。
囲み枠のサンプル3。破線で囲んでみました。より目立たせたい箇所に使えるかも。

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

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

borderの指定方法

border:1px solid #CCCCCC;

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

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

ボーダープロパティの指定

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

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

  • solid 実線
  • dashed 破線
  • dotted 点線
  • double 二重線

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

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

borderは個別に指定もできる

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

上の罫線:border-top
下の罫線:border-bottom
左の罫線:border-left
右の罫線:border-right

を使って指定します。

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

見出しサンプル1
border-left: 5px solid #f587b3;

 

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

見出しサンプル2
border-top: 4px double #CCCCCC;
border-bottom: 4px double #CCCCCC;

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

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

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

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

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

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

サイトで設定されているスタイル指定とバッティングする場合は、サンプルと同じ見た目にならないことがあります。
見出しサンプル1
.midashi-sample1{
border-left: 5px solid #f587b3;
font-size: 1.4rem;
font-weight: bold;
padding:0 0 0 0.5em;
margin-bottom: 1em;
text-align: left;
}
<div style="border-left: 5px solid #f587b3; font-size: 1.4rem; font-weight: bold; padding: 0 0 0 0.5em; margin-bottom: 1em; text-align: left;">見出しサンプル1</div>

 

見出しサンプル2
.midashi-sample2{
border-top: 4px double #CCCCCC;
border-bottom: 4px double #CCCCCC;
font-size: 1.4rem;
font-weight: bold;
padding: 0.5em 0;
margin-bottom: 1em;
text-align: left;
}
<div style="border-top: 4px double #CCCCCC; border-bottom: 4px double #CCCCCC; font-size: 1.4rem; font-weight: bold; padding: 0.5em 0; margin-bottom: 1em; text-align: left;">見出しサンプル2</div>

 

見出しサンプル3
.midashi-sample3{
border-bottom: 3px solid #9ad2f2;
font-size: 1.4rem;
font-weight: bold;
padding: 0.5em;
margin-bottom: 1em;
text-align: left;
background-color: #deeff9;
}
<div style="border-bottom: 3px solid #9ad2f2; font-size: 1.4rem; font-weight: bold; padding: 0.5em; margin-bottom: 1em; text-align: left; background-color: #deeff9;">見出しサンプル3</div>

 

囲み枠のサンプル1。シンプルな実線の囲み枠です。汎用性が高いです。
.box-sample1{
border: 1px solid #db4141;
padding: 1em;
margin-bottom: 2em;
text-align: left;
}
<div style="border: 1px solid #db4141; padding: 1em; margin-bottom: 2em; text-align: left;">囲み枠のサンプル1</div>

 

囲み枠のサンプル2。二重線にしています。くっきりはっきりデザインのブログにおすすめ。
.box-sample2{
border: 4px double #000000;
padding: 1em;
margin-bottom: 2em;
text-align: left;
}
<div style="border: 4px double #000000; padding: 1em; margin-bottom: 2em; text-align: left;">囲み枠のサンプル2</div>

 

囲み枠のサンプル3。破線で囲んでみました。より目立たせたい箇所に使えるかも。
.box-sample3{
border: 2px dashed #f97fb0;
background-color: #ffedf4;
padding: 1em;
margin-bottom: 2em;
text-align: left;
}
<div style="border: 2px dashed #f97fb0; background-color: #ffedf4; padding: 1em; margin-bottom: 2em; text-align: left;">囲み枠のサンプル3</div>

まとめ

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

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

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

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

[sp] [ad#co-2] [/sp]
CSSでborderを指定する
最新情報をチェックしよう!