サイトを見やすくするためにborderはよく使います。
イーブロでもborderを使った囲み枠のサンプル例の記事を書いてるので参考にしてください。
では、改めてborderの基本的な使い方から応用までを解説しますが、
これを読めば自分で作ったり、サンプル例をカスタマイズできるようになります。
borderとは？基本的な使い方
borderは上下左右のボーダーラインの太さや色など指定するプロパティです。
borderだけだと四方はすべて同じスタイルになります。
のちに一部だけボーダーをつける方法も解説しますが、記述の仕方はほぼ同じですので、まずはborderの使い方を基本に学んでいきましょう。
<div class=”border-test”>こんな風に囲みます</div>CSS
.border-test{
border:1px solid #000;
}
基本的にはclass名やid名を指定して、指定した要素にborderを適用するだけです。
ただ、これだと殺風景ですよね。
では、まずはborderに書かれていることを理解しましょう。
borderの基本的な記述方法
前述のCSSは「border:1px solid #000」としてますが、borderは「線の太さ・線の種類・線の色」を設定します。
この場合、1pxは線の太さを「1px」に、solidは線の種類を「実線」、#000は「黒」と指定しているわけです。
線の太さについては自分の好みの太さにすればいいので、太い方が良ければ数字を大きくすればいいだけです。
また、色についてはGoogleで「色見本」と検索すると、以下のような画面が表示されるの、好みの色を選んでコードを入力してください。
borderの線の種類について
| ボーダースタイルの値 | 効果 |
|---|---|
| solid | 1本線で表示 |
| double | ２本線で表示 |
| dashed | 破線で表示 |
| dotted | 点線で表示 |
| groove | 立体的に窪んだ線で表示 |
| ridge | 立体的に山型になる線で表示 |
| inset | 上と左が暗く、下と右が明るいボーダーが立体的に窪んだように表示 |
| outset | 上と左が明るく、下と右が暗いボーダーが立体的に隆起したように表示 |
ボーダーのスタイルで表示されるもので主に使うものは８種類です。
では、どういう変化があるのか実際に記述していきますので、比較してみてください。
例としてスタイルだけを変えたCSSも実際に記載してる参考にして下さいね。
スタイル１ solid
これが基本となる実線スタイルです。
.border-test{border:3px solid #ff776e;}
スタイル２ double
これが二重線となるスタイルです。
ただし、線の太さを3px以上にしないと２重線に見えないので、使うときは太めに設定しましょう。
.border-test{border:3px double #ff776e;}
スタイル３ dashed
これが破線となるスタイルです。
.border-test{border:3px dashed #ff776e;}
スタイル４ dotted
これが点線となるスタイルです。
線を細くしすぎるとdashedと比較しても若干分かりづらくなります。
.border-test{border:3px dotted #ff776e;}
スタイル５ groove
内側にくぼんで立体的に見えるスタイルです。
ただ、黒や濃い色だと影が見えなくなるので、立体的にはみえなくなります。
また、線の太さも太くない（3～4px以上）と効果がわかりづらいです。
.border-test{border:10px groove #ff776e;}
スタイル６ ridge
立体的に山型に見えるスタイルです。
grooveと同様に黒や濃い色だと影が見えなくなるので、立体的にはみえなくなりますし、
線の太さも太くない（3～4px以上）と効果がわかりづらいです。
.border-test{border:10px ridge #ff776e;}
スタイル７ inset
上と左が暗く、下と右が明るいボーダーが立体的に窪んで見えるスタイルです。
線だけを窪んだように見せるgrooveと異なり、囲んだ線を基準に全体的に窪んで見せるスタイルです。
色が暗かったり線の太さが細い（3～4px以上）と効果がわかりづらいです。
.border-test{border:10px inset #ff776e;}
スタイル８ outset
上と左が明るく、下と右が暗いボーダーが立体的に隆起して見えるスタイルです。
こちらは線だけを隆起して見せるridgeと異なり、囲んだ線を基準に全体的に隆起して見せるスタイルです。
色が暗かったり線の太さが細い（3～4px以上）と効果がわかりづらいです。
.border-test{border:10px outset #ff776e;}
border-topやborder-bottom等を使って下線や部分的に囲む方法
borderは上下左右のすべてにスタイルが適応されます。
しかし、下線だけ引きたい時や一部を囲んだり色を変えたい時はどのようにすればいいでしょうか？
ここからは少しだけ基本と応用に入っていきます。
border以外で主に使うborderプロパティの解説
| プロパティ | 効果 |
|---|---|
| border-top | 上ボーダーのスタイル・太さ・色を指定する |
| border-bottom | 下ボーダーのスタイル・太さ・色を指定する |
| border-right | 右ボーダーのスタイル・太さ・色を指定する |
| border-left | 左ボーダーのスタイル・太さ・色を指定する |
borderプロパティは実はたくさんありますが、使うプロパティは上記の４つで問題なく利用できます。
太さやスタイル・色の指定方法はborderと全く同じです。
では、今回は活用法になるのでわかりやすいようにHTMLタグを記載してる例もあるので、どのように使うか参考にしてください。
border-top・border-bottom・border-right・border-leftの使用例
使用例１ 下線を引く
classタグを使う場合、どこのサイトや本を見ても、例をとしてdivタグを使って書いてると思います。
ただ、下線を引くときは、基本的にはspanタグを使って下線を引きたいところを囲んでください。
下線はHTMLでもありますが、CSSにすることで後ででも一括でスタイルを変更でますから、下線はCSSで書きましょう。
こんな風に<span class=”border-test”>下線を引きます</span>
.border-test{border-bottom:1px solid #de0e00;}こんな風に下線を引きます
きれいに線を引く知識例題は<span>で線を引いてますが、<div>で囲む場合上記のCSSを記述しただけでは、サイトの端から端までラインが引かれてしまいます。
細かいことは割愛しますが、<div>や<p>で要素を囲む場合はCSSに「display:inline-block」を追加すると、囲んだ範囲のみボーダーが反映されます。
使用例２ 上下のスタイルは同じ・左右の色や太さを変える
上下を1pxの実線・左を10pxの実線・右を5pxの実線で表示しています。
.border-test{border-top:1px solid #faa60a;border-bottom:1px solid #faa60a;border-left:10px solid #ff5e00;border-right:5px solid #ff5e00;}
使用例３ 上下左右のスタイルをすべて変える
上下左右すべてのスタイル変えて使うことも可能です。
ただ、例はかっこいいわけでも、おしゃれなわけでもないですけどね。
.border-test{border-top:2px solid #faa60a;border-bottom:3px dashed #000000;border-left:10px double #ff5e00;border-right:5px dotted #09419c;}
paddingについては別記事で書いてますので、参考にしてください。
borderと他のプロパティを組み合わせてバランスよく見やすいサイトを作ろう
borderプロパティはpadding・background-color・box-shadow・border-radiusなどと組み合わせて装飾することで、サイトのコンセプトに合った見やすいサイトを作ることができます。
それぞれのプロパティについてはまた別記事で書いていきますが、簡単にコンセプトに合わせた、囲み枠ができますので、自分のコンセプトに合わせた枠を作っていきましょう。
おすすめ記事【CSS】コピペで利用する・borderの囲み枠・ボックスサンプル33選！＞＞
おすすめ記事15分で分かる！基本から応用まで解説するborder-radius。CSSでボックスの角を丸くする方法
