あらゆるデザインに使える「ボックス」について
CSSでボックスを作成する方法を解説する。ボックスとは下記のようなデザインをイメージしてくれ。
ボックスで使えるCSSのプロパティ
下記のプロパティはほぼ全てが重要でよく使うので、自分でタイピングして使えこなせるようになると良い。
| プロパティ | 値 | 説明 |
|---|---|---|
| width | 数値 | 主にpxや%が使われる。ボックスの横幅を指定する |
| height | 数値 | 主にpxが使われる。ボックスの縦幅を指定する |
| background | カラーコード | ボックスの色を付ける |
| margin | 数値 | 外側の余白を付ける。主にpxが使われる |
| padding | 数値 | 内側の余白を付ける。主にpxが使われる |
| border | 3つの値 | 下で詳しく解説する |
| box-shadow | 数値 | 下で詳しく解説する |
| background-image | url('画像のパス') | 画像を表示できる |
| position | ポジションの値 | 別のページで解説する |
| display | ディスプレイの値 | 別のページで解説する |
| overflow | hidden | 中身が溢れたら溢れたものを非表示にできる |
| z-index | 数値 | 重ね順を指定 |
枠線を引くborderについて
<style>
.border_sample1 {
width: 100px;
height: 100px;
border: 2px solid blue;
}
</style>
<body>
<div class="border_sample1"></div>
</body>
この例では100pxの正方形に枠線である青色のborderを2px引いているサンプルだ。
border: サイズ 線の種類 線の色;
サイズにpxで線の太さを指定して、線の種類は下記の表にまとめた。線の色はカラーコードや色名で指定する。
borderの線の種類
| 線の種類 | 説明 |
|---|---|
| none | 枠線をを表示しない |
| solid | 普通の線を引く |
| dotted | 点線を引く |
| dashed | 破線を引く |
| double | 二重線を引く |
| groove | 3D効果で溝を掘る |
| ridge | 3D効果でgrooveの逆。盛り上がるような描画 |
| inset | 3D効果で沈んでいるような描画 |
| outset | 3D効果で浮いているような描画 |
上記表を参照していろいろ試してみるとよい。
<style>
.border_sample2 {
width: 200px;
height: 100px;
border: 5px dashed #44ff88;
}
</style>
<body>
<div class="border_sample2"></div>
</body>
dashedの破線で5pxの太さの黄緑色の線を引いている。