borderとは
borderとは、HTMLやCSSでWEBサイトを作る際に枠線を引くために使用するCSSのプロパティです。
borderを使いこなすことができれば、ただ枠線を引くだけでなく、おしゃれな装飾や三角形などの図を作成することもできるようになります。
枠線一つにしても、点線や二重線、波線など活用の幅が広いため、borderについての理解を深めることでWEBサイトを作る際によりおしゃれなWEBサイトを作ることができるようになります。
当サイトの見出しも、borderプロパティを使用して装飾しています！
borderの基本
borderには「線の太さ」「線の種類」「線の色」の３つの値を指定することができます。
<p class="border_sample">
borderサンプル
</p>.border_sample{
border: 3px(太さ) solid(種類) #333(色);
}また、「線の太さ」「線の種類」「線の色」はそれぞれ個別に指定することもできます。
border-width（線の太さ）
border-widthでは、線の太さを指定することができます。
pxなどの任意の数値で指定することもできますが、thin(細い)やthick(太い)などのキーワードで指定することもできます。
| border-width | 説明 |
| thin | 細い線 |
| medium | 中くらいの線 |
| thick | 太い線 |
とはいえ、WEBサイト制作においては基本的にはpxで指定することがほとんどですね。
border-width: 1px;border-style（線の種類）
border-styleでは、線の種類を指定することができます。
border-styleに指定できる値には以下のものがあります。
| border-style | 説明 |
| none | 線は表示されない。 |
| hidden | 線は表示されない。（重なる他要素の線も非表示となる） |
| dotted | 点線を表示する。 |
| dashed | 破線を表示する。 |
| solid | 実線を表示する。 |
| double | 二重線を表示する。 |
| groove | 立体的に窪んだ線を表示する。 |
| ridge | 立体的に隆起した線を表示する。 |
| inset | borderで囲まれた要素が立体的に窪んだ線を表示する。 |
| outset | borderで囲まれた要素が立体的に隆起した線を表示する。 |
solidやdottedなどの実務でもよく使用するものから、grooveやinsetなどほとんど使用する機会がないものまでさまざまです。
<p class="border_solid">
solid
</p>.border_solid{
border: 5px solid orange;
}
<p class="border_dotted">
dotted
</p>.border_dotted{
border: 5px dotted orange;
}noneやhiddenについては、他のCSSでも出てくるので覚えやすいとは思います。他には、solid、dotted、dashed辺りを覚えておけば困ることはほとんどありません！
border-color（線の色）
border-colorでは、線の色を指定することができます。
border-colorで線の色を指定する方法には以下の４つがあります。
- カラー名で指定する
- カラーコードで指定する
- rgbで指定する
- rgbaで指定する
色の指定については、backgroudでの背景色の指定と同じなので理解できている人も多いのではないでしょうか。
実際のコーディングにおいては、指定の自由度が高い「カラーコードでの指定」や「rgbaで指定する」ことが多い傾向にあります。
<ul>
<li>カラー名で指定する</li>
<li>カラーコードで指定する</li>
<li>rgbで指定する</li>
<li>rgbaで指定する</li>
</ul>li:nth-of-type(1){
border: 5px solid red;
}
li:nth-of-type(2){
border: 5px solid #ff0000;
}
li:nth-of-type(3){
border: 5px solid rgb(255, 255, 255);
}
li:nth-of-type(4){
border: 5px solid rgba(255, 255, 255, .7); // 透明度に0.7を指定
}上下左右別々に指定する
borderで枠線を指定する際、上下左右個別に指定することもできます。
- 上 ….. border-top
- 右 ….. border-right
- 下 ….. border-bottom
- 左 ….. border-left
見出しの装飾を行う際など、おしゃれなデザインを再現する際にはborderを個別に指定することが多いです。
<p class="border_each">上下左右別々に指定する</p>.border_each{
border-top: 5px solid orange;
border-right: 5px dotted blue;
border-bottom: 1px solid rgba(150, 0, 100, .5);
border-left: 10px solid #888;
}見出しのborderデザインサンプル
<h2>
見出しサンプル
</h2>h2{
position: relative;
padding: 1rem 2rem;
border-bottom: 5px solid rgb(255, 153, 1);
}
h2::after{
position: absolute;
display: block;
content: "";
height: 5px;
width: 20%;
bottom: -5px;
left: 0;
background-color: rgb(255, 102, 0);
}目次のborderデザインサンプル
<ul>
<li>目次サンプル</li>
<li>目次サンプル</li>
<li>目次サンプル</li>
</ul>li{
position: relative;
list-style: none;
padding: .3rem 2rem;
border-bottom: 1px dashed rgb(255, 212, 69);
}
li::before{
content: "\002713";
color: orange;
position: absolute;
top: 40%;
left: 10px;
width: 15px;
height: 15px;
transform: translateY(-50%);
}borderが効かない原因
border-styleを指定していない
border-styleの初期値はnoneであるため、border-styleに任意の値を指定しないとborderは表示されません。
solidが初期値だという間違いが多いため、注意が必要です。
必ずborder-styleにnone以外の値を指定するようにしましょう。
例えば、以下のようなborderの指定を指定してしまうと、borderが表示されません。
border: 3px #ff0000;特に、borderプロパティで太さ・種類・カラーを一括で指定する際には注意しましょう。
border: 3px solid #ff0000;border-widthに0を指定している
border-widthに0が指定してあると、幅がないということになるため、borderが表示されない状態となります。
border-widthの初期値はmedium（中くらいの太さ）であるため、0の値を指定しないようにだけ注意していれば問題はありません。
border-width: 1px;border-colorに#fff（背景色）やtransparent（透明）を指定している
borderの色の指定を背景色と同じ色や透明にしていると、要素としては存在するが、見た目的に見えないという状況に陥ってしまうことがあります。
この場合、一旦borderの色を変えてあげることで存在を確認できるようになるので、border-colorに指定している色を変えてあげましょう。
そのほか、borderとしては存在しているが、見た目的に見えなくなってしまっているということも多いため、指定した値を変えるなどして原因を特定してあげると、borderが聞かない問題の解決に繋がります。
border-color: red; /* 背景と異なる色を指定してみる */まとめ
CSSのborderプロパティでは、HTML要素の枠線を指定することができます。
- 線の太さ ・・・ border-width
- 線の種類 ・・・ border-style
- 線の色 ・・・ border-color
また、borderプロパティは左右上下を別々に設定できるため、自在なカスタマイズが可能です。
- 左の線 ・・・ border-left
- 右の線 ・・・ border-right
- 上の線 ・・・ border-top
- 下の線 ・・・ border-bottom
borderプロパティ以外を使って、HTML要素に線を引く方法について、以下の記事でご紹介しているので、ぜひそちらもご覧ください。
コメント