この記事では「CSS」と「HTML」で作るborder線を使う際に役立つ基礎知識とコピペで使える「8種類の囲い線」と「5種類の下線」コードを載せています。
サンプル1
サンプル2
サンプル3
サンプル4
サンプル5
サンプル6
サンプル7
サンプル8
サンプル9
サンプル10
サンプル11
サンプル12
サンプル13
サンプル14
目次・読みたい所へタップできます
border種類1【solid(1本線)の囲い線】
最もオーソドックスな線です。
どんなデザインでも邪魔をしません。
HTMLcopyする<p class="sample1">ここに好きな文字を入れてください</p>
style.csscopyする.sample1{border: solid 4px #8ec6ff;}
「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.csscopyする.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本線)
border種類3【dashed(破線)の囲い線】
囲い線の破線は使いどころが難しいデザインです。
デザインに自信がない人にはオススメしません。
dashed(破線)
border種類4【dotted(点線)の囲い線】
こちらも囲い線で使うには、かなりセンスが必要です。
女性向けサイトと相性が良さそうです。
dotted(点線)
border種類5【groove(立体的に窪んだ線)の囲い線】
線の内側が窪んだように見える線です。
立体的に見せる線なので、線を太く(4px以上)しないと分かりづらいです。
あと、濃いカラー(ブラックなど)を使うとコントラストがなくなり、ただの太い線になってしまいます。
groove(立体的に窪んだ線)
border種類6【ridge(立体的に山型になる線)の囲い線】
こちらは、線の外側が窪みます。
使い方は「groove」と同じです。
ridge(立体的に山型になる線)
border種類7【inset(左側と上側が濃くなる線)の囲い線】
「コントラストが分かるカラーを使用する必要」があります。
inset(左側と上側が濃くなる線)
border種類8【outset(右側と下側が濃くなる線)の囲い線】
「コントラストが分かるカラーを使用する必要」があります。
outset(右側と下側が濃くなる線)
border種類9【solid(1本線)の下線】
テキストの下に下線を引くコード
マーカー線とはまた違った印象になります。

solid(下線)
HTMLcopyする<p class="sample9">ここに好きな文字を入れてください</p>
style.csscopyする.sample9{border-bottom:solid 3px #8ec6ff;}
線を下に引く場合は、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(下線)
border種類11【dashed(破線)の下線】
「カテゴリー」「目次」「箇条書き」などに使うと、ちょっとしたメリハリになります。
その場合は1px
くらいに細くするとキレイに見えます。
dashed (下線)
border種類12【dotted(点線)の下線】
当サイトの「カテゴリー」や「目次」はこれを使用しています。
dotted(下線)
border種類13【solid(2色下線)】
左右で違う色を使う場合の下線です。ややコードが複雑になりますが目立ちます。
solid(2色下線)
border種類14【グラデーション下線】
border線ではないですが、グラデーションの下線を引くことも出来ます。
グラデーション下線
まとめ
「border線」の基礎を解説してきましたが「カラー」や「太さ」を変更するとイメージがだいぶ変わるので、ぜひ自分なりに色々試してみてください。
※日本語が含まれていないコメントは投稿できません。(スパム対策)