この記事では「CSS」と「HTML」で作るborder線を使う際に役立つ基礎知識とコピペで使える「８種類の囲い線」と「５種類の下線」コードを載せています。
サンプル1
サンプル2
サンプル3
サンプル4
サンプル5
サンプル6
サンプル7
サンプル8
サンプル９
サンプル１０
サンプル１１
サンプル１２
サンプル１３
サンプル１４
記事の目次
- border種類１【solid（１本線）の囲い線】
- border種類２【double（２本線）の囲い線】
- border種類３【dashed（破線）の囲い線】
- border種類４【dotted（点線）の囲い線】
- border種類５【groove（立体的に窪んだ線）の囲い線】
- border種類６【ridge（立体的に山型になる線）の囲い線】
- border種類７【inset（左側と上側が濃くなる線）の囲い線】
- border種類８【outset（右側と下側が濃くなる線）の囲い線】
- border種類９【solid（１本線）の下線】
- border種類10【double（2本線）の下線】
- border種類11【dashed（破線）の下線】
- border種類12【dotted（点線）の下線】
- border種類13【solid（2色下線）】
- border種類14【グラデーション下線】
- まとめ
border種類１【solid（１本線）の囲い線】
最もオーソドックスな線です。
どんなデザインでも邪魔をしません。
HTML <p class="sample1">ここに好きな文字を入れてください</p>
style.css
.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.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種類２【double（２本線）の囲い線】
線と線の間に空白ができるので、スタイリッシュな印象になります。
ただし、使いすぎるとクドイ印象になるので注意しましょう。
double（２本線）
border種類３【dashed（破線）の囲い線】
囲い線の破線は使いどころが難しいデザインです。
デザインに自信がない人にはオススメしません。
dashed（破線）
border種類４【dotted（点線）の囲い線】
こちらも囲い線で使うには、かなりセンスが必要です。
女性向けサイトと相性が良さそうです。
dotted（点線）
border種類５【groove（立体的に窪んだ線）の囲い線】
線の内側が窪んだように見える線です。
立体的に見せる線なので、線を太く（4px以上）しないと分かりづらいです。
あと、濃いカラー（ブラックなど）を使うとコントラストがなくなり、ただの太い線になってしまいます。
groove（立体的に窪んだ線）
border種類６【ridge（立体的に山型になる線）の囲い線】
こちらは、線の外側が窪みます。
使い方は「groove」と同じです。
ridge（立体的に山型になる線）
border種類７【inset（左側と上側が濃くなる線）の囲い線】
「コントラストが分かるカラーを使用する必要」があります。
inset（左側と上側が濃くなる線）
border種類８【outset（右側と下側が濃くなる線）の囲い線】
「コントラストが分かるカラーを使用する必要」があります。
outset（右側と下側が濃くなる線）
border種類９【solid（１本線）の下線】
テキストの下に下線を引くコード
マーカー線とはまた違った印象になります。
CSSマーカー線（蛍光ペン風）の解説【４２色のサンプル付き】
solid（下線）
HTML <p class="sample9">ここに好きな文字を入れてください</p>
style.css .sample9{border-bottom:solid 3px #8ec6ff;}
線を下に引く場合は、border-bottomを指定します。
同様に solid（左線）border-leftとすれば左側に線
solid（右線）border-rightとすれば右側に線
solid（上線）border-topとすれば上側に線
を引けます。
上記のように<p>タグや<div>タグなどで「線をテキスト量に合わせる」または「左右に近接させる」にはdisplay:inline-block;を指定します。
※</span>タグで引く場合はdisplay:inline-block;は不要です。
paddingを使います。
例えば、下線であればpadding-bottom:5px;のように指定するとテキストの下に余白が開きます。
その他の余白も「線を引く位置（上下左右）に合わせる」ことで指定できます。
border種類10【double（2本線）の下線】
ただの下線よりスタイリッシュになりますね。
double（下線）
border種類11【dashed（破線）の下線】
「カテゴリー」「目次」「箇条書き」などに使うと、ちょっとしたメリハリになります。
その場合は１pxくらいに細くするとキレイに見えます。
dashed （下線）
border種類12【dotted（点線）の下線】
当サイトの「カテゴリー」や「目次」はこれを使用しています。
dotted（下線）
border種類13【solid（2色下線）】
左右で違う色を使う場合の下線です。ややコードが複雑になりますが目立ちます。
solid（2色下線）
border種類14【グラデーション下線】
border線ではないですが、グラデーションの下線を引くことも出来ます。
グラデーション下線
まとめ
「border線」の基礎を解説してきましたが「カラー」や「太さ」を変更するとイメージがだいぶ変わるので、ぜひ自分なりに色々試してみてください。
コメントを残す