WordPress
その他
運営中のサブブログ
主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。
border線の種類別｜HTML&CSSサンプル21選
当ページのリンクには広告が含まれています。
当記事ではHTMLとCSSで作るborder線21種類を解説しました。
どれもコピペで使えます。
また各コードの使い所や調整方法も書きましたので、目次を活用して気になるところから読んでくださいませ。
目次
CSSとHTMLのborder種類1｜枠線8パターン
solid1本枠線
double2重枠線
dashed破線枠
dotted点線枠
groove谷型枠線
ridge山型枠線
inset凹型枠線
outset凸型枠線
まずは8つの枠線について解説します。
1本枠線｜solid
最もオーソドックスな線です。
border-styleの基本となるため、必ず押さえておきましょう。
solid(１本線)
<div class="sample1">ここに好きな文字を入れてください</div>divタグはpタグやspanタグに変更してもOKです。
用途に応じて使い分けてください。
.sample1 {
border: solid 4px #8ec6ff;
}solid：線の種類px：線の太さ#〇〇：線のカラー
カスタムする際は、この3つが基本となりますので覚えておきましょう。
枠線の内側を広げる
↑↓”枠線の内側余白“は
paddingの値で決まります。.sample1{
border: solid 4px #8ec6ff;
padding:15px;
}padding:10px;＝上下左右に余白padding:10px 0;＝上下に余白padding:0 10px;＝左右に余白
枠線の外側を広げる
“枠線の外側余白“は
marginを指定しましょう。
.sample1{
border: solid 4px #8ec6ff;
margin:10px 0;
}margin:10px;＝上下左右に余白margin:10px 0;＝上下に余白margin:0 10px;＝左右に余白
テキストに合わせる
テキスト量に合わせた枠線
.sample1{
border: solid 4px #8ec6ff;
display: inline-block;
}display: inline-block;を指定することで、テキスト量に自動で合わせてくれます。
先ほどのpaddingやmarginと合わせて調整すると良いでしょう。
テキストを真ん中にしたい
テキストを中央へ
.sample1{
border: solid 4px #8ec6ff;
text-align: center;
}text-align: center;を指定します。
テキスト量に合わせた枠線を中央へ
ただし先ほどのdisplay: inline-block;要素を中央寄せするには、少し工夫が必要です。
<div class="center">
<div class="sample1">こちらが枠線の指定</div>
</div>.center{
text-align: center;
}
.sample1{
border: solid 4px #8ec6ff;
display: inline-block;
}center＝親要素に中央寄せを指定
sample1＝子要素に枠線の指定
と2つに分ける必要があります。
枠線の角を丸くしたい
枠線の角を丸めるには、
border-radiusを指定します。.sample1{
border: solid 3px #8ec6ff;
border-radius:20px;
}これくらい覚えておけば、ある程度思い通りにカスタマイズできるはずです。
これ以降のborder線にも応用してください。
2重枠線｜double
2重枠線は、スタイリッシュな印象を与えます。
ただし、使いすぎるとクドイ印象になるため注意しましょう。
double｜2重枠線
コードを表示する
<div class="sample2">ここに好きな文字を入れてください</div>.sample2{
border: double 4px #8ec6ff;
}線の太さは4px〜にしないと、2重線であることがほとんどわかりません。
破線枠線｜dashed
破線枠は使いどころが難しいです。
デザインに自信がない人にはオススメしません。
dashed｜破線枠
コードを表示する
<div class="sample3">ここに好きな文字を入れてください</div>.sample3{
border: dashed 4px #8ec6ff;
}点線枠線｜dotted
破線と同じく使い所が難しいです。
女性向けサイトなどに相性が良さそうです。
double｜点線枠
コードを表示する
<div class="sample4">ここに好きな文字を入れてください</div>.sample4{
border: dotted 4px #8ec6ff;
}谷型枠線｜groove
線が内側に窪んだように見えます。
立体的に見せる線なので、線の太さを4px〜指定しないと分かりづらいです。
あと、濃いカラーはコントラストがなくなり、ただの太い線になってしまうため注意しましょう。
groove｜谷型枠線
コードを表示する
<div class="sample5">ここに好きな文字を入れてください</div>.sample5{
border:groove 6px #8ec6ff;
}山側枠線｜ridge
線が外側に浮き上がって見えます。
使い方は「groove」と同じです。
ridge｜山型枠線
コードを表示する
<div class="sample6">ここに好きな文字を入れてください</div>.sample6{
border: ridge 6px #8ec6ff;
}凹型枠線｜inset
コントラストが分かるカラーを指定する必要があります。
inset｜凹枠線（左と上が濃くなる）
コードを表示する
<div class="sample7">ここに好きな文字を入れてください</div>.sample7{
border:inset 6px #8ec6ff;
}凸型枠線｜outset
コントラストが分かるカラーを指定する必要があります。
outset｜凸型枠線（右と下が濃くなる）
コードを表示する
<div class="sample8">ここに好きな文字を入れてください</div>.sample8{
border:outset 6px #8ec6ff;
}CSSとHTMLのborder種類2｜1本線8パターン
solid下線
double下線
dashed下線
dotted下線
要素の左側の線
要素の右側の線
要素の上側の線
1本線同士の組み合わせ
先ほどは枠線について解説しました。
続いて1本線について解説します。
1本線は上下左右どこにでも設置可能ですし、組み合わせて使うこともできます。
1本線｜solid
テキストの下に下線を引くコード
マーカー線とはまた違った印象になります。
solid｜1本下線
<div class="sample9">ここに好きな文字を入れてください</div>1本線について、左右と上線も解説しますが、HTMLは上記を参考にしてください。
.sample9{
border-bottom:solid 3px #8ec6ff;
}テキストと下線に余白をあける
テキストと下線に余白をあけた
.sample9{
border-bottom:solid 3px #8ec6ff;
padding-bottom:5px!important;
}padding-bottomの値を大きくすれば、下線が下がります。
要素と下線の長さを合わせる
テキストと下線の長さが同じ
.sample9{
border-bottom:solid 3px #8ec6ff;
display: inline-block;
}枠線と同様にdisplay: inline-block;を追加すると、要素の長さに自動で合わせてくれます。
要素の左側に線を引く
要素の左側に線を引く
.sample9{
border-left: solid 5px #8ec6ff;
}左側の線はborder-leftで指定できます。
ただし、要素を中央に持ってくるときはdisplay: inline-block;を指定しないと線だけ左に寄ったままになってしまうため、注意しましょう。
display:inline-blockなし
display:inline-blockあり
<div class="center">
<div class="sample9">こちらが枠線の指定</div>
</div>.center{
text-align: center;
}
.sample9{
border-left: solid 5px #8ec6ff;
display: inline-block;
padding-left: 10px;
}HTMLを親子要素に分けるのは、枠線と同じ原理です。
最後にpadding-leftを追記して、線の右側に余白を作ると見栄えがよくなります。
イメージ的にはright（右）であけているように見えますが、逆なのでご注意を。
要素の右側に線を引く
要素の右側に線を引く
.sample9{
border-right: solid 5px #8ec6ff;
display: inline-block;
padding-right: 10px;
}右側線の左側に余白をあけるにはborder-rightで指定しましょう。
要素の上に線を引く
要素の上側に線を引く
.sample9{
border-top: solid 5px #8ec6ff;
font-weight:bold;
}上側に線を引くには、border-topを指定します。
1本線を組み合わせる
要素の左と下に線を引いた
.sample9{
border-left: solid 5px #8ec6ff;
border-bottom: solid 5px #8ec6ff;
font-weight: bold;
padding-left: 10px;
}border要素は組み合わせて使うことができます。
サンプルでは、左と下線を指定しました。
見出しデザインなどによく使われていますね。
2重線｜double
1本線より強調したいときにおすすめです。
double｜2重下線
<div class="sample10">ここに好きな文字を入れてください</div>.sample10{
border-bottom: double 4px #8ec6ff;
text-align:center;
font-weight:bold;
}線の太さにより、見え方が結構変わるので、いろいろ試してみてください。
線の太さ4px
線の太さ6px
線の太さ8px
1本破線｜dashed
要素の区切りや箇条書きの下に設置すると、ちょっとしたメリハリをつけることができます。
- 箇条書き
- サンプル
dashed｜1本破線
<div class="sample11">ここに好きな文字を入れてください</div>.sample11{
border-bottom:dashed 3px #8ec6ff;
text-align:center;
font-weight:bold;
}こちらも線の太さを変えることで、見え方が異なります。
線の太さ1px
線の太さ3px
線の太さ5px
1本点線｜dotted
破線よりやや細かいため、やわらかい印象になります。
ただし線が細いと、両者の見分けはほとんどつきません。
dotted｜1本点線
<div class="sample12">ここに好きな文字を入れてください</div>.sample12{
border-bottom:dotted 3px #8ec6ff;
text-align:center;
font-weight:bold;
}破線と使い分けるなら線の太さを2px〜にすると良いでしょう。
破線の太さ1px
点線の太さ1px
破線の太さ2px
点線の太さ2px
破線の太さ3px
点線の太さ3px
異なる1本線を組み合わせる
枠線では線の種類はひとつに固定でしたが、1本線同士なら異なる線同士を組み合わせることもできます。
左：1本線｜上：破線｜右：2重線｜下：点線｜
<div class="sample12">ここに好きな文字を入れてください</div> .sample12 {
border-left: solid 5px #8ec6ff;
border-top: dashed 5px #8ec6ff;
border-right: double 5px #8ec6ff;
border-bottom: dotted 5px #8ec6ff;
text-align: center;
font-weight: bold;
padding: 10px;
}それぞれ線を引く”場所“と”種類“を指定してください。
CSSとHTMLのborder種類3｜2色の線を組み合わせる
ツートン下線
ツートン上線
ツートン左線
ツートン右線
今度は異なる2色のborder線の組み合わせについて解説します。
見出しのデザインなどによく使われていますね。
ツートン下線
左右で違う色を指定することもできます。
ややコードが複雑になります。
2色の1本線
<div class="sample13">ここに好きな文字を入れてください</div> .sample13 {
border-bottom: solid 3px #8ec6ff;
position: relative;
font-weight: bold;
text-align: center;
}
.sample13::after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #ff8f9a;
bottom: -3px;
width: 50%;
}widthの値を変更すると、各色の長さを変更できます。
50％以上＝左側の色が伸びる
50％以下＝右側の色が伸びる
各色の長さを変更
width80％を指定
width20％を指定
線の太さを変更
width20％を指定
.sample13 {
border-bottom: solid 6px #8ec6ff;
position: relative;
font-weight: bold;
text-align: center;
}
.sample13::after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 6px #ff8f9a;
bottom: -6px;
width: 50%;
}線の太さをそれぞれ同じ値6pxに変更、下から2番目bottomの値-6pxも揃えてください。
※.bottomは-（マイナス）指定なので注意
線の種類を変更
2重線｜doubleを指定
.sample13 {
border-bottom: double 3px #8ec6ff;
position: relative;
font-weight: bold;
text-align: center;
}
.sample13::after {
position: absolute;
content: " ";
display: block;
border-bottom: double 3px #ff8f9a;
bottom: -3px;
width: 50%;
}破線｜dashedを指定
.sample13 {
border-bottom: dashed 3px #8ec6ff;
position: relative;
font-weight: bold;
text-align: center;
}
.sample13::after {
position: absolute;
content: " ";
display: block;
border-bottom: dashed 3px #ff8f9a;
bottom: -3px;
width: 50%;
}点線｜dottedを指定
.sample13 {
border-bottom: dotted 3px #8ec6ff;
position: relative;
font-weight: bold;
text-align: center;
}
.sample13::after {
position: absolute;
content: " ";
display: block;
border-bottom: dotted 3px #ff8f9a;
bottom: -3px;
width: 50%;
}線の位置を変更
上ツートン線
.sample13 {
border-top: solid 3px #8ec6ff;
position: relative;
font-weight: bold;
text-align: center;
}
.sample56::after {
position: absolute;
content: " ";
display: block;
border-top: solid 3px #ff8f9a;
top: -3px;
width: 50%;
}線の位置を両方ともborder-topに指定、合わせて下から2番目もtopに変更しましょう。
border-left｜左ツートン線
.sample13 {
border-left: solid 4px #8ec6ff;
position: relative;
font-weight: bold;
display: inline-block;
padding-left: 10px;
}
.sample13::before {
position: absolute;
content: " ";
display: block;
border-left: solid 4px #ff8f9a;
left: -4px;
height: 50%;
}線の位置を両方ともborder-liftに指定、合わせて下から2番目もliftに変更しましょう。
また上下は各色の長さをwidthで調整しましたが、左右はheightで指定します。
最後に左線の場合のみ、下のコードをafter→beforeに変えてください。
border-right｜右ツートン線
<div class="center">
<div class="sample13">こちらが枠線の指定</div>
</div>.center{
text-align: center;
}
.sample13 {
border-right: solid 4px #8ec6ff;
position: relative;
font-weight: bold;
padding-right: 10px;
display: inline-block;
}
.sample13:after {
position: absolute;
content: " ";
border-right: solid 4px #ff8f9a;
right: -4px;
height: 50%;
}右ツートンの場合は、1本線のときと同じく親子要素に分けると調整しやすいです。
線の位置を両方ともborder-rightに指定、合わせて下から2番目もrightに変更しましょう。
CSSとHTMLのborder種類4｜グラデーション下線
こちらはborderタグではないですが、おまけとしてグラデーション下線を引く方法も解説します。
グラデーション下線
<div class="sample14">ここに好きな文字を入れてください</div>.sample14 {
font-weight: bold;
}
.sample14:after {
content: "";
display: block;
height: 3px;
background: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
}.sample14の方で、フォントの指定をしてください。heightの値で線の太さを変更できます。
カラー調整はこちらのサイト180色のグラデーションサンプルがおすすめです。
テキストと線の余白調整
グラデーション下線
.sample14:afterにmargin-top:〇〇pxを追記してください。
値を上げると、その分だけ上に余白があきます。
テキスト量とグラデーション下線を合わせる
グラデーション下線
.sample14にdisplay: inline-block;を追記してください。
border線を使ったSNSボタン
borderをうまく使えばこんな感じのボタンも作れます。
結論：CSSとHTMLのborder線は基本12種類を組み合わせて使おう
以上、borderタグについて解説しました。
見出しやボタンを作る際もborderの原理がわかっていれば、応用が効きますので、デザインの参考になれば幸いです。
borderと似ているマーカー線もあります。
この記事が気に入ったら
フォローしてね！
記事への質問等はこちらからどうぞ