PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【CSS】ボーダー(境界線)をつける

HTMLの要素に「border」を指定していすることで、ボーダー(境界線)をつけることができます。


ボーダーの種類

ボーダーには、solid(実線)、dashed(破線)、double(二重線)、dotted(点線)があります。他にも種類がありますが、あまり使われません。

実行例

f:id:game-web-design:20140922113146p:plain

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>文字の枠線</title>
<style>
.border1, .border2, .border3, .border4, .border5, .border6{
  padding: 20px;
  margin: 10px;
}

.border1{
  border:#333 solid 1px;
}
.border2{
  border: #ccc solid 4px;
}
.border3{
  border: #f00 solid 1px;
}
.border4{
  border: #333 dashed 1px;
}
.border5{
  border-top: #2E9961 solid 2px;
  border-right: #2E9961 dashed 1px;
  border-bottom: #2E9961 dashed 1px;
  border-left: #2E9961 solid 12px;
}
.border6{
  border-top: #21669D solid 3px;
  border-bottom: #21669D double 4px;
  border-left: #21669D solid 2px;
}

</style>

</head>

<body>

<div id="box1">
<p class="border1">テキストの囲みを表現したい[標準]</p>
<p class="border2">テキストの囲みを表現したい[線の太さ]</p>
<p class="border3">テキストの囲みを表現したい[線のカラー]</p>
<p class="border4">テキストの囲みを表現したい[線のスタイル]</p>
<p class="border5">テキストの囲みを表現したい[複数の指定]</p>
<p class="border6">テキストの囲みを表現したい[複数の指定]</p>
</div>

</body>
</html>