SWELLで特化サイト作ってみた

border線の種類別ーHTML&CSSデザイン14選

border線デザイン

SHARE

この記事では「CSS」と「HTML」で作るborder線を使う際に役立つ基礎知識とコピペで使える「８種類の囲い線」と「５種類の下線」コードを載せています。

サンプル1

サンプル2

サンプル3

サンプル4

サンプル5

サンプル6

サンプル7

サンプル8

サンプル９

サンプル１０

サンプル１１

サンプル１２

サンプル１３

サンプル１４

border種類１【solid(１本線)の囲い線】

最もオーソドックスな線です。

どんなデザインでも邪魔をしません。

solid(１本線)
HTML
copyする

<p class="sample1">ここに好きな文字を入れてください</p>

style.css
copyする

.sample1{border: solid 4px #8ec6ff;}
ーborderー囲い線を使う際の事前知識

「HTML」コードの間に文字を入れないと線が出ないので注意しましょう。

<pの部分は<spanでも<divでもOK。その際は「終了タグ」も</span>または</div>に変更してください。

7pxを変更すれば「線の太さ」を変更できます。

#adffffを変更すれば「線のカラー」を変更できます。

枠線の「内側」の余白調整はpaddingを使用します。

↑「枠線の内側」に余白のある囲い線padding:10px;↓

枠線の「外側」の余白調整はmarginを使用します。

↑

↑

「枠線の外側」に余白のある囲い線margin:24px 0;

↓

↓

上記の「囲い線」だと線だけ広がっていて、ブサイクですよね。

そこで、線をテキストの量に合わせるにはdisplay:inline-block;を指定します。

テキスト量に合わせた線

上記囲い線の角は「直角」になっているので、角を丸めるにはborder-radiusを使います。

角を丸めた囲い線border-radius:20px;

上記のCSSコードをまとめるとこんな感じになります。

内側・外側の余白を開け、角を丸めて、テキスト量に合わせた線
style.css
copyする

.sample16{
border:solid 4px #8ec6ff;
padding10px;
margin:24px 0;
display:inline-block;
border-radius:20px;
}
注意

上記指定は<p>タグまたは<div>タグで「border」を使用する為のものです。

<span>タグで「border」を使用する場合は元々display:inline-block;が適用されているのでCSSで指定しなくてもテキストに合わせた囲い線になります。

<span class="sample15">ここに文字</span>

border種類２【double(２本線)の囲い線】

線と線の間に空白ができるので、スタイリッシュな印象になります。

ただし、使いすぎるとクドイ印象になるので注意しましょう。

double(２本線)


HTML
copyする

<p class="sample2">ここに好きな文字を入れてください</p>

style.css
copyする

.sample2{border: double 4px #8ec6ff;}

border種類３【dashed(破線)の囲い線】

囲い線の破線は使いどころが難しいデザインです。

デザインに自信がない人にはオススメしません。

dashed(破線)


HTML
copyする

<p class="sample3">ここに好きな文字を入れてください</p>

style.css
copyする

.sample3{border: dashed 4px #8ec6ff;}

border種類４【dotted(点線)の囲い線】

こちらも囲い線で使うには、かなりセンスが必要です。

女性向けサイトと相性が良さそうです。

dotted(点線)


HTML
copyする

<p class="sample4">ここに好きな文字を入れてください</p>

style.css
copyする

.sample4{border: dotted 4px #8ec6ff;}

border種類５【groove(立体的に窪んだ線)の囲い線】

線の内側が窪んだように見える線です。

立体的に見せる線なので、線を太く(4px以上)しないと分かりづらいです。

あと、濃いカラー(ブラックなど)を使うとコントラストがなくなり、ただの太い線になってしまいます。

groove(立体的に窪んだ線)


HTML
copyする

<p class="sample5">ここに好きな文字を入れてください</p>

style.css
copyする

.sample5{border:groove 6px #8ec6ff;}

border種類６【ridge(立体的に山型になる線)の囲い線】

こちらは、線の外側が窪みます。

使い方は「groove」と同じです。

ridge(立体的に山型になる線)


HTML
copyする

<p class="sample6">ここに好きな文字を入れてください</p>

style.css
copyする

.sample6{border: ridge 6px #8ec6ff;}

border種類７【inset(左側と上側が濃くなる線)の囲い線】

「コントラストが分かるカラーを使用する必要」があります。

inset(左側と上側が濃くなる線)


HTML
copyする

<p class="sample7">ここに好きな文字を入れてください</p>

style.css
copyする

.sample7{border:inset 6px #8ec6ff;}

border種類８【outset(右側と下側が濃くなる線)の囲い線】

「コントラストが分かるカラーを使用する必要」があります。

outset(右側と下側が濃くなる線)


HTML
copyする

<p class="sample8">ここに好きな文字を入れてください</p>

style.css
copyする

.sample8{border:outset 6px #8ec6ff;}

border種類９【solid(１本線)の下線】

テキストの下に下線を引くコード

マーカー線とはまた違った印象になります。

蛍光ペン風マーカー線CSSCSSマーカー線（蛍光ペン風）の解説【４２色のサンプル付き】

solid(下線)

HTML
copyする

<p class="sample9">ここに好きな文字を入れてください</p>

style.css
copyする

.sample9{border-bottom:solid 3px  #8ec6ff;}
ーborderー1本線を使う際の事前知識

線を下に引く場合は、border-bottomを指定します。

同様にborder-leftとすれば左側に線

solid(左線)

border-rightとすれば右側に線

solid(右線)

border-topとすれば上側に線

solid(上線)

を引けます。

上記のように<p>タグや<div>タグなどで「線をテキスト量に合わせる」または「左右に近接させる」にはdisplay:inline-block;を指定します。

※</span>タグで引く場合はdisplay:inline-block;は不要です。

また、線とテキストの余白を調整したい場合はpaddingを使います。
例えば、下線であればpadding-bottom:5px;のように指定すると

テキストの下に余白が開きます。

その他の余白も「線を引く位置(上下左右)に合わせる」ことで指定できます。

border種類10【double(2本線)の下線】

ただの下線よりスタイリッシュになりますね。

double(下線)


HTML
copyする

<p class="sample10">ここに好きな文字を入れてください</p>

style.css
copyする

.sample10{border-bottom:double 3px  #8ec6ff;}

border種類11【dashed(破線)の下線】

「カテゴリー」「目次」「箇条書き」などに使うと、ちょっとしたメリハリになります。

その場合は１pxくらいに細くするとキレイに見えます。

dashed (下線)


HTML
copyする

<p class="sample11">ここに好きな文字を入れてください</p>

style.css
copyする

.sample11{border-bottom:dashed  3px  #8ec6ff;}

border種類12【dotted(点線)の下線】

当サイトの「カテゴリー」や「目次」はこれを使用しています。

dotted(下線)


HTML
copyする

<p class="sample12">ここに好きな文字を入れてください</p>

style.css
copyする

.sample12{border-bottom:dotted 3px  #8ec6ff;}

border種類13【solid(2色下線)】

左右で違う色を使う場合の下線です。ややコードが複雑になりますが目立ちます。

solid(2色下線)


HTML
copyする

<p class="sample13">ここに好きな文字を入れてください</p>

style.css
copyする

.sample13{
border-bottom:dotted 3px  #8ec6ff;
position: relative;
}
.sample13:after {
position: absolute;
display: block;
content: " ";
border-bottom: solid 3px #ffc78f;
bottom: -3px;
width: 50%;
}

width: 50%;の値を上げると「左側の色」が「右に」伸びます。

width:80%にした(2色下線)

値を下げると「右側の色」が「左に」伸びます。

width:20%にした(2色下線)

border種類14【グラデーション下線】

border線ではないですが、グラデーションの下線を引くことも出来ます。

グラデーション下線

HTML
copyする

<p class="sample14">ここに好きな文字を入れてください</p>

style.css
copyする

.sample14:after {
content:"";
display:block;
height:3px;
background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
}
補足

各自調整する場合は、赤字コードを追記して下さい

グラデーション下線とテキストの余白を狭くしたい

style.css
copyする

.sample15:after{
content:"";
display:block;
height:3px;
background-image:linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
position:relative;
bottom:5px;
}

テキスト量に合わせたグラデーション下線を引きたい

style.css
copyする


.sample16{
display:inline-block;
}

.sample16:after{
content:"";
display:block;
height:3px;
background-image:linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
}

グラデーションカラーを選ぶ時にオススメのサイト「コピペで使える!!180色のグラデーションサンプル」

重めのサイトですが、デザインが美しく、見てるだけで楽しめるサイトです。

まとめ

「border線」の基礎を解説してきましたが「カラー」や「太さ」を変更するとイメージがだいぶ変わるので、ぜひ自分なりに色々試してみてください。

コメントはお気軽にどうぞ

＼最強のSEO対策ツール・Rank Trackerを解説／
登録方法はこちら使い方はこちら