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: 各角に異なる値の半径を適用
GO TO FULL VERSION