テキストなど枠で囲みたいけど、やり方が分からないなぁ……
枠はボーダーって言うんだけど、入れるのは簡単だよ！
このような、線（ボーダー）の入れ方を解説します！
ボーダーを使いこなすための3要素
ボーダーを付けたいときは、指定の要素に以下を書き込みます。
- border: 1px solid #FF0000;
これは「指定要素の4辺に1pxでsolidタイプの赤色線を表示させてください」という命令です。
実際の使用例が、以下の通り。
See the Pen
Untitled by Rino (@Rinosaurus)
on CodePen.
テキストが赤色の線で囲まれているのが分かりますね。
「border: 1px solid #FF0000;」の意味を解剖してみましょう！
数値
「1px」は、ボーダーの太さを表しています。
単純な話、数値が大きいほど線は太く、低いほど線は細くなります。
種類
「solid」は、ボーダーの種類を表しています。
線の種類は8個あり、ここを変えることで様々な線が引けます！
| solid | 1本線 |
|---|---|
| double | 2本線 |
| dashed | 破線 |
| dotted | 点線 |
| groove | 立体的に窪んだ線 |
| ridge | 立体的に出っ張った線 |
| inset | 上と左が暗め・下と右が明るめ |
| outset | 上と左が明るめ・下と右が暗め |
See the Pen
border-kinds by Rino (@Rinosaurus)
on CodePen.
色
「#FF0000」は色を表しています。
「#FF0000」は赤色を示しているので、赤色の線が表示されました。
「色 数値」で検索すると様々なカラーが見つかるので、希望する色を探してみてください！
「border: 1px solid #FF0000;」の構成
- 1px｜線の太さ
- solid｜線の種類
- #FF0000｜線の色
特定の部分だけボーダーを表示させる方法
人によっては、
「上下だけボーダーを引きたい！」
「上下はdobleで左右はdashedの線がいい」
ということもあるでしょう。
そんなときは「border」の部分を以下に変えることで、指定の箇所に線を引けます。
| border | 4辺にボーダーを表示 |
|---|---|
| border-top | 上にボーダーを表示 |
| border-bottom | 下にボーダーを表示 |
| border-left | 左にボーダーを表示 |
| border-right | 右にボーダーを表示 |
実践問題を解いてみよう！
- 見本のテキストです
- 見本のテキストです
- 見本のテキストです
上記の3種類は、どのボーダーが使われているでしょうか？
まとめ
ボーダーは使う機会が多いので、ブログを続けるなら覚えておいた方が得策です。
様々な場面で使うので、ぜひ覚えてみてください！
Comment