WordPressカスタマイズまとめ←クリック

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

border線デザイン

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

サンプル1

サンプル2

サンプル3

サンプル4

サンプル5

サンプル6

サンプル7

サンプル8

サンプル9

サンプル10

サンプル11

サンプル12

サンプル13

サンプル14

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

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

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

solid(1本線)
HTML
<p class="sample1">ここに好きな文字を入れてください</p>
style.css
.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
.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種類2【double(2本線)の囲い線】

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

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

double(2本線)

HTML
<p class="sample2">ここに好きな文字を入れてください</p>
style.css
.sample2{border: double 4px #8ec6ff;}

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

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

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

dashed(破線)

HTML
<p class="sample3">ここに好きな文字を入れてください</p>
style.css
.sample3{border: dashed 4px #8ec6ff;}

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

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

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

dotted(点線)

HTML
<p class="sample4">ここに好きな文字を入れてください</p>
style.css
.sample4{border: dotted 4px #8ec6ff;}

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

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

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

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

groove(立体的に窪んだ線)

HTML
<p class="sample5">ここに好きな文字を入れてください</p>
style.css
.sample5{border:groove 6px #8ec6ff;}

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

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

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

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

HTML
<p class="sample6">ここに好きな文字を入れてください</p>
style.css
.sample6{border: ridge 6px #8ec6ff;}

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

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

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

HTML
<p class="sample7">ここに好きな文字を入れてください</p>
style.css
.sample7{border:inset 6px #8ec6ff;}

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

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

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

HTML
<p class="sample8">ここに好きな文字を入れてください</p>
style.css
.sample8{border:outset 6px #8ec6ff;}

border種類9【solid(1本線)の下線】

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

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

蛍光ペン風マーカー線CSS CSSマーカー線(蛍光ペン風)の解説【42色のサンプル付き】

solid(下線)

HTML
<p class="sample9">ここに好きな文字を入れてください</p>
style.css
.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
<p class="sample10">ここに好きな文字を入れてください</p>
style.css
.sample10{border-bottom:double 3px  #8ec6ff;}

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

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

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

dashed (下線)

HTML
<p class="sample11">ここに好きな文字を入れてください</p>
style.css
.sample11{border-bottom:dashed  3px  #8ec6ff;}

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

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

dotted(下線)

HTML
<p class="sample12">ここに好きな文字を入れてください</p>
style.css
.sample12{border-bottom:dotted 3px  #8ec6ff;}

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

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

solid(2色下線)

HTML
<p class="sample13">ここに好きな文字を入れてください</p>
style.css
.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
<p class="sample14">ここに好きな文字を入れてください</p>
style.css
.sample14:after {
content:"";
display:block;
height:3px;
background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
}
補足

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

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

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

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

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

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

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

まとめ

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

やってはいけないデザイン
★Amazonは現金チャージがお得★

チャージ額に応じてポイントが貯まります。

プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!

※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください

STEP1

キャンペーンページへ

Amazonギフトポイント付与キャンペーン

STEP2

エントリー完了後、「Amazonギフト券チャージタイプ」をクリック

Amazonギフトポイント付与キャンペーンエントリー

STEP3

キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力次へをクリック

Amazonギフトチャージタイプ購入

STEP4

Amazonギフトチャージタイプ支払い方法選択PC

「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック


STEP5

注意×10

特に何もせず注文を確定するをクリック

Amazonギフトチャージタイプ購入PC

以下キャンペーン条件から外れてしまうトラップについて。

  • 支払い方法の「電子マネー」はNG
  • Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
  • 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG

私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX(導線)でよろしくないなと思いました。


STEP6

Amazonギフトチャージタイプ購入確認メール

Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。お支払い方法別の手順」のリンクをクリックしてください。


STEP7

Amazonギフトチャージタイプ支払い確定PC

もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。

それ以外の支払い方法をクリックすると詳細が載っているので、期限である6日以内に支払いを済ませて完了です。

以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。

プライム会員」なら最大2.5%ポイント還元!!

※チャージした金額の有効期限は安心の10年間

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。