CSS・見た目をもっと自由に

枠線で囲ってみる

ここからここまでが一区切り——枠線があると、かたまりがはっきりする。borderで太さ・種類・色をまとめて指定しよう。

「ここからここまでが、ひとかたまり」——それを目で見えるようにしてくれるのが枠線です。注意書きを囲ったり、カードのふちを描いたり。border ひとつで、部品のかたちがぐっとはっきりします。

書いてみよう

.box {
  border: 2px solid teal;
}

class="box" をつけた部品に、青緑の枠線がつきます。border のうしろに並ぶ3つは、それぞれこういう意味です。

  • 2px … 線の太さ（数字＋単位）
  • solid … 線の種類（solid はふつうの実線）
  • teal … 線の色（色の名前やコード）

「2ピクセルの、実線の、青緑の枠」と、左から順に読めます。3つをスペースでつなげて一気に書けるのが border の便利なところです。

CSS余白でゆとりをつくる内側の余白づくりを思い出そう——枠線と組み合わせると、ちょうどよく効いてくる

1辺だけに線をつける

border は4辺ぜんぶに線をつけますが、border-bottom（下だけ）や border-left（左だけ）のように、方向を指定した名前を使えば1辺だけに線をつけられます。

.header {
  border-bottom: 1px solid #e9e3d9;
}
.quote {
  border-left: 4px solid #e8734e;
}

border-bottom はヘッダーの下端に境界線を引いて「ここまでがヘッダー」を示すときに、border-left は引用の左に太めの線を添えて「引用ですよ」と目立たせるときによく使われます。-top・-rightもあわせて、4方向すべてに同じ考え方が使えます。

このレッスンのまとめ

  1. 枠線は border
  2. 太さ・種類・色の3つをスペースで区切って並べる
  3. 枠線と padding はセットで考えると窮屈にならない
  4. border-bottom/border-left で1辺だけに線をつけられる

かたちがはっきりしたら、最後は角をまるくして、やわらかい印象に仕上げましょう。 :::

やってみよう：ヘッダーと引用に線を足す

ヘッダーにclass="lp-header"、すきなことばの引用にclass="quote"をつけましょう。

<header class="lp-header">
  ...
</header>
.lp-header {
  border-bottom: 1px solid #e9e3d9;
}
.quote {
  border-left: 4px solid #e8734e;
  padding: 14px 18px;
}

ヘッダーの下端に、うすいグレーの線が1本。引用の左には、オレンジの太い線が1本。同じborderの仲間でも、方向を変えるだけで役割が変わります。

ブラウザ表示。ヘッダーの下にうすい線、じこしょうかいの引用の左にオレンジの太い線が入っている
線が1本入るだけで、「ここまでがヘッダー」「これは引用」と、ひと目で伝わるようになります。