CODING

[css] borderで枠線をつける方法

投稿日:2019年10月23日 更新日:


どうも、べ〜やんです。

今回はCSSで枠線を指定する方法のborderの使い方を紹介します。





borderとは


borderは枠線を指定できるプロパティです。

線の種類、太さ、色などを指定してさまざまな枠線をつけることができます。



borderの使い方


border: 値;で指定します。

また border: 種類の値 太さの値 色の値; と書くと線の種類、太さ、色を同時に指定できます。



線の種類

border: 種類の値;で枠線の種類を指定します。

枠線の種類を指定する値はこちら↓

border:  none;    /* 枠線なし(デフォルト) */
border:  solid;   /* 1本線 */
border:  double;  /* 2本線 */
border:  dashed;  /* 破線 */
border:  dotted;  /* 点線 */
border:  groove;  /* 立体的に窪んだ線 */
border:  ridge;   /* 立体的に隆起した線 */
border:  inset;   /* 全体が窪む */
border:  outset;  /* 全体が隆起する */

See the Pen wvvJgpy by beeyan (@orientado) on CodePen.



borderの線の太さ

border: 太さの値;で枠線の太さを指定します。

pxやemで数値で指定する方法や、medium(標準)、thick(太く)、thin(細く)などキーワードで指定する方法があります。

See the Pen XWWMMRj by beeyan (@orientado) on CodePen.



borderの色

border: 色の値;で枠線の色を指定します。

色コード(例: #000000)やカラーネーム(例: red)で指定します。

transparentで透明にできます。

See the Pen wvvJJdO by beeyan (@orientado) on CodePen.



borderの種類


borderには他にも類似のプロパティがあり使い分けることでデザインの幅が広がります。

border-top: 値;           /* 上に線 */
border-right: 値;        /* 右に線 */
border-bottom: 値;        /* 下に線 */
border-left: 値;         /* 左に線 */
border-style: 値;        /* 線の種類 */
border-width: 値;        /* 太さ */
border-color: 値;      /* 色 */
border-top-style: 値;     /* 上の線の種類 */
border-top-width: 値;     /* 上の線の太さ */
border-top-color: 値;     /* 上の線の色 */
border-right-style: 値;  /* 右の線の種類 */
border-right-width: 値;  /* 右の線の太さ */
border-right-color: 値;  /* 右の線の色 */
border-bottom-style: 値;  /* 下の線の種類 */
border-bottom-width: 値;  /* 下の線の太さ */
border-bottom-color: 値;  /* 下の線の色 */
border-left-style: 値;   /* 左の線の種類 */
border-left-width: 値;   /* 左の線の太さ */
border-left-color: 値;   /* 左の線の色 */

一部使用例

類似プロパティの使い方を一部紹介します。

See the Pen yLLMMYB by beeyan (@orientado) on CodePen.



おわりに


今回はCSSで枠線を指定する方法のborderの使い方を紹介しました。

borderは使いこなせればデザインの幅がグッと広がります。



-CODING
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[超初心者] HTMLとは

どうも、べ〜やんです。 webデザインやプログラミングを学びはじめたとき、最初にHTMLとCSSから学ぶ人が多いのではないでしょうか?私も一番最初にHTMLから学びました。ということで、今回はHTML …

[CSS] linear-gradient()グラデーション

どうも、べ〜やんです。 今回は、グラデーションを指定するlinear-gradient()を紹介します。 linear-gradient()とは linear-gradient()は背景色をグラデーシ …

[超初心者] HTMLのタグ・要素

どうも、べ〜やんです。 今回は、HTMLのよく使うタグ・要素などをまとめました。 タグとは <html>、<head>、<footer>、<div>など …

HTML文法チェックサービスMarkup Validation Service

どうも、べ〜やんです。 今回は、HTMLの文法にミスがないかを自動で判別してくれるサービスMarkup Validation Serviceを紹介します。 HTMLを独学で勉強していて自分の知識がどれ …

[css] font-sizeの種類

どうも、べ〜やんです。 今回は、CSSで指定するフォントサイズの種類と簡単な使い方をまとめて紹介します。 フォントサイズの種類 フォントサイズを適当に決めてませんか?なんとなくpxだけを使ってませんか …