枠線

使用可能

8.1 borderプロパティ

枠線はWebデザインの重要な要素だよね。要素を目立たせたり、ページのビジュアルを良くしたりするんだ。CSSには枠線を作成・スタイリングするためのプロパティがたくさん用意されてる。基本的なプロパティを見てみよう。コンパクトな書き方、フルな書き方、幅、スタイル、色、角の丸め方の指定方法を含むよ。

基本パラメータ

枠線の基本パラメータは、border-width, border-style, border-colorという個別のプロパティを使って設定できるよ。

構文:

element {
  border-width: width;
  border-style: style;
  border-color: color;
}

使用例:

CSS
.border-full {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

コンパクトな書き方

borderプロパティを使えば、枠線の幅、スタイル、色を一行で指定できるんだ。

構文:

element {
  border: width style color;
}
CSS
.border-compact {
  border: 2px solid red;
}

.border-full {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}
HTML
<body>
  <div class="border-compact">コンパクトな書き方</div>
  <div class="border-full">フルな書き方</div>
</body>

8.2 枠線の幅: border-width

border-widthプロパティで枠線の幅を指定するよ。ピクセル (px), ポイント (pt), パーセント (%), またはキーワード (thin, medium, thick)で指定可能だよ。

構文:

element {
  border-width: width;
}

例:

CSS
.border-thin {
  border: thin solid black;
}

.border-medium {
  border: medium solid black;
}

.border-thick {
  border: thick solid black;
}

.border-custom {
  border-width: 5px;
  border-style: solid;
  border-color: black;
}
HTML
<body>
  <div class="border-thin">細い枠線</div>
  <div class="border-medium">中くらいの枠線</div>
  <div class="border-thick">太い枠線</div>
  <div class="border-custom">幅5pxの枠線</div>
</body>

8.3 枠線のスタイル: border-style

説明:

border-styleプロパティで枠線のスタイルを指定するよ。スタイルには次のようなものがあるよ:

  • none: 枠線なし
  • solid: 実線
  • dotted: 点線
  • dashed: ダッシュ
  • double: 二重線
  • groove: 溝のような枠線
  • ridge: 稜線のような枠線
  • inset: 窪んだ枠線
  • outset: 突き出た枠線

構文:

element {
  border-style: style;
}

例:

CSS
.border-none {
  border: 2px none black;
}

.border-solid {
  border: 2px solid black;
}

.border-dotted {
  border: 2px dotted black;
}

.border-dashed {
  border: 2px dashed black;
}

.border-double {
  border: 4px double black;
}

.border-groove {
  border: 4px groove black;
}

.border-ridge {
  border: 4px ridge black;
}

.border-inset {
  border: 4px inset black;
}

.border-outset {
  border: 4px outset black;
}
HTML
<body>
  <div class="border-none">枠線なし</div>
  <div class="border-solid">実線</div>
  <div class="border-dotted">点線</div>
  <div class="border-dashed">ダッシュ</div>
  <div class="border-double">二重線</div>
  <div class="border-groove"></div>
  <div class="border-ridge">稜線</div>
  <div class="border-inset">窪んだ枠線</div>
  <div class="border-outset">突き出た枠線</div>
</body>

8.4 枠線の色: border-color

border-colorプロパティで枠線の色を指定するよ。色は色名、16進数コード、RGB、RGBA、HSL、HSLA形式で指定できるよ。

構文:

element {
  border-color: color;
}
CSS
.border-red {
  border: 2px solid red;
}

.border-blue {
  border: 2px solid blue;
}

.border-green {
  border: 2px solid green;
}

.border-rgba {
  border: 2px solid rgba(255, 0, 0, 0.5);
}
HTML
<body>
  <div class="border-red">赤い枠線</div>
  <div class="border-blue">青い枠線</div>
  <div class="border-green">緑の枠線</div>
  <div class="border-rgba">半透明の赤い枠線</div>
</body>

8.5 border-radiusによる角の丸め

border-radiusプロパティを使うと、要素の角を丸めて、丸い枠線を作成できるよ。四隅すべてに同時に適用することも、1つずつの角に適用することもできるんだ。

構文:

element {
  border-radius: radius;
}

値:

  • 単一の値: 例 border-radius: 10px; — 全ての角に同じ丸め半径を設定するよ
  • 2つの値: 例 border-radius: 10px 20px; — 左上と右下の角には1つ目の値、右上と左下の角には2つ目の値を適用するよ
  • 4つの値: 例 border-radius: 10px 20px 30px 40px; — 左上、右上、右下、左下の角にそれぞれ異なる値を設定するよ
  • 混合値: 角の丸みをパーセントで指定することもできて、要素のサイズに応じて自動調整されるよ

例:

CSS
.radius-all {
  border: 2px solid black;
  border-radius: 15px;
  padding: 10px;
  margin: 10px;
}

.radius-top {
  border: 2px solid red;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 10px;
  margin: 10px;
}

.radius-bottom {
  border: 2px solid blue;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  padding: 10px;
  margin: 10px;
}

.radius-mixed {
  border: 2px solid green;
  border-radius: 10px 20px 30px 40px;
  padding: 10px;
  margin: 10px;
}
HTML
<body>
  <div class="radius-all">すべての角が丸い</div>
  <div class="radius-top">上部の角が丸い</div>
  <div class="radius-bottom">下部の角が丸い</div>
  <div class="radius-mixed">混合した角の丸み</div>
</body>
  • .radius-all: 全ての角に同じ丸め半径 (15px) を適用
  • .radius-top: 上部の角にのみ丸め (20px) を適用
  • .radius-bottom: 下部の角にのみ丸め (25px) を適用
  • .radius-mixed: 各角に異なる値の半径を適用
1
タスク
Frontend SELF JA,  レベル 19レッスン 2
ロック未解除
枠スタイル
枠スタイル
1
タスク
Frontend SELF JA,  レベル 19レッスン 2
ロック未解除
枠線の色
枠線の色
コメント
  • 人気
  • 新規
  • 古い
コメントを残すには、サインインしている必要があります
このページにはまだコメントがありません