【CSS】borderで枠線を作成する方法 -初心者向け-
borderの使い方
borderの基本的な書き方は要素の線種(border-style) 太さ(border-width) カラー(border-color) のプロパティを半角スペースで区切り一括指定(ショートハンド)します。
線種・太さ・カラーを記述する順番は自由で、必要ないプロパティは省略することもできます。（省略したプロパティの値は初期値となります。）
.sytle {
border-top: solid 1px #000000; /*枠線(上部)指定*/
border-right: solid 1px #000000; /*枠線(右部)指定*/
border-bottom: solid 1px #000000; /*枠線(下部)指定*/
border-left: solid 1px #000000; /*枠線(左部)指定*/
}
下線だけborderを引きたい場合や、上下左右ごとにborderの太さやカラーを変えたい場合は上(border-top) 右(border-right) 下(border-bottom) 左(border-left) で個別に指定します。
線種 (border-style)
線種 (border-style)はsolid(1本線) double(2本線) dotted(点線) を使用することが多いと思いますが、破線や立体的なスタイルもあります。
solid
border-style：solidは、1本線のスタイル
border solid
<p class="border01" >border solid</p>
.border01{
display:block;
width: 250px;
height:70px;
line-height: 70px;
text-align: center;
border:solid 10px navy;
}
double
border-style：doubleは、2本線のスタイル
border double
.border02{
border:double 10px navy;
}
dotted
border-style：dottedは、点線のスタイル
border dotted
.border03{
border:dotted 10px navy;
}
dashed
border-style：dashedは、破線のスタイル
border dashed
.border04{
border:dashed 10px navy;
}
groove
border-style：grooveは、立体的(凹凸)な窪んだ線のスタイル
border groove
.border05{
border:groove 10px silver;
}
ridge
border-style：ridgeは、立体的(凹凸)な隆起した線のスタイル
border ridge
.border06{
border:ridge 10px silver;
}
inset
border-style：insetは、上と左のボーダーを暗く、右と下のボーダーを明るくした立体的(凹)な線のスタイル
border inset
.border07{
border:inset 10px silver;
}
outset
border-style：outsetは、上と左のボーダーを明るく、右と下のボーダーを暗くした立体的(凸)な線のスタイル
border outset
.border08{
border:outset 10px silver;
}
線の太さ (border-width)
線の太さ (border-width)についてはpxやemなどの数値で指定することがオーソドックスですが、キーワード thin(細い) medium(普通) thick(太い)でも指定することができます。但し、キーワードでの指定はブラウザによって線の太さの見え方が異なります。
thin
border-width:thinは、細い線
thin
.border09{
border:solid thin navy;
}
medium
border-width:mediumは、普通の線
medium
.border10{
border:solid medium navy;
}
thick
border-width:thickは、太い線
thick
.border11{
border:solid thick navy;
}
線のカラー (border-color)
線のカラー (border-color)は16進数(#000000)かカラーネーム(color)で指定します。下図は上下左右のカラーを変えた例です。
border
.border_color{
border-top: solid 10px orange; /*枠線(上部)指定*/
border-right: solid 10px red; /*枠線(右部)指定*/
border-bottom: solid 10px green; /*枠線(下部)指定*/
border-left: solid 10px blue; /*枠線(左部)指定*/
}
CSSボーダーのデザイン例
タイトル・見出しの装飾
CSSの疑似要素::afterを使用し下線のborderを2カラーにしたデザイン例
見出しデザイン
<h1>見出しデザイン</h1>
h1 {
position: relative;
padding-bottom: 0.5em;
border-bottom: 4px solid #DDD;
}
h1::after {
position: absolute;
content: " ";
border-bottom: solid 4px #446689;
bottom: -4px;
width:10%;
display: block;
}
CSSボタンの装飾
下線border-bottomを使用して立体感のあるCSSボタンにしたデザイン例。クリックで下線をborder-bottom: none;を消しボタンの押しこみを表現。
<a class="button01" href="#">Button</a>
.button01{
display:block;
width: 250px;
height:70px;
line-height: 70px;
color: #FFF;
text-decoration: none;
text-align: center;
background-color: #f39800; /*ボタン色*/
border-bottom: solid 6px #ec6c00; /*下線色*/
border-radius: 5px; /*角丸*/
}
.button01:hover{
background-color: #f9c500;/*ボタン色*/
border-bottom: solid 6px #f39800; /*下線色*/
}
.button01:active {
margin-top: 6px;
border-bottom: none;
-webkit-transform: translateY(6px); /*下移動*/
transform: translateY(6px);
}
テキスト領域の装飾
文章中にある別記やポイントなど、テキスト領域のデザイン例。CSSの疑似要素を使用しラベル(POINT)を左上に配置。
<div class="point01" >ポイント文章</div>
.point01{
position:relative;
padding:30px;
border:8px solid navy;
border-radius: 10px;
}
.point01::after{
content: "POINT";
position: absolute;
top: -15px;
left: 13px;
background: #fff;
font-size:1em;
font-weight: bold;
color: navy;
padding: 0 8px;
}
その他にCSSだけで三角・矢印を作るときに、borderを使用しデザインすることができますので下記記事も合わせてご覧ください。
CSSボーター制作のアイデア
Arrowed Progression Line
フォームなどで見られるSTEP表示にborderを使用し描画した例
See the Pen Arrowed Progression Line by Boutter Loïc (@Lo-X) on CodePen.
Brick Sign Up Form
CSS border in corners
CSSの疑似要素を使用しborderの四隅を括弧のようにしたデザイン例
See the Pen CSS border in corners – technique #1 – pseudo elements by Jiří Thiemel (@ThiemelJiri) on CodePen.
Imperfect Buttons
border-radiusを使用して手書き風のborderにアレンジしたデザイン例
See the Pen Imperfect Buttons by Tiffany Rayside (@tmrDevelops) on CodePen.
Simple Animations using CSS Borders
borderにアニメーションをつけたデザイン例
See the Pen Simple Animations using CSS Borders by Maninder Pal Singh (@mpsinghk) on CodePen.
CSS Border transitions
マウスオーバーでborderにアニメーションをつけたCSSボタンのデザイン例
See the Pen CSS Border transitions by Giana (@giana) on CodePen.
