ボーダーとは
border は CSS の 一括指定 プロパティで、要素の境界を設定します。borderプロパティは、ボーダーのスタイル・太さ・色をまとめて指定する際に使用します。
用途は様々で、見出し、枠によく使われます。
【重要】ボーダーの書き方
ボーダースタイルについてBMBでは以下の書き方で統一しています。
border: 線のサイズ 線の種類 線の色;
例1：border:1px solid #f90;
例2：border:5px double #f00;
線のサイズは「px」で指定
線の色など省略できる部分は「色指定3桁」で統一しています。
色指定をするときは小文字で指定しましょう。（例：#fffなど
順番を守り、コードに規則性を持たせることによってメンテナンス性が上がるため全員で管理していきましょう。
ボーダーのスタイルを指定する場合
ボーダースタイルには以下のような線があります。
・非表示:none・1本線:solid・2本線:double・点線:dotted・破線:dashed
・内面全体が窪んだ枠線:inset・内面全体が隆起した枠線:outset・立体的に窪んだ枠線:groove・立体的に隆起した枠線:ridge
特に以下４つはよく使われるので覚えておきましょう！
- 1本線:solid
- 2本線:double
- 点線:dotted
- 破線:dashed
ボーダーでできる！見出し一覧サイト
ボーダーでできるデザインは工夫次第でとてもたくさんありますが
小山がデザインの段階でよく見るページです。
・https://saruwakakun.com/html-css/reference/h-design
コピペしてカスタムしたり、solidをdoubleにして線の太さを片方変えるだけでも結構雰囲気が変わるのでお勧めです！
このサイトは記事がまとまっていて大量に探せます！
使えそうでしたらお気に入り登録などお願いします☺
まとめ
今回お伝えしたかったことはBMBでコーディングする際のボーダーの書き方と、応用でした。
よく見る見出しもdoubleにしてみたり途中で色を変えてみたりすると結構雰囲気が変わるなぁと思います。
バリエーションをスタッフ内で増やしていけたらいいなと思っています。
見出しでよく使うことが多いのではないのかなと思い参考も少し載せさせてもらいましたが、ほかにも皆さんの「こんな使い方もあるよー」などありましたらコメント欄にお願いいたします☺
株式会社ビーエムビー
〒114-0031 東京都北区十条仲原1-4-8 商店街会館311 TEL&FAX：03-5948-5996
東京都北区のWEBやDTP(印刷物)のデザイン制作会社です。ホームページ制作やLP（ランディングページ）の作成、ECサイト（楽天ストアなど）の構築などのWEBデザイン、チラシ･ポスター･名刺･パンフレット･看板などの印刷物デザインに対応しています。お客様の業務形態や用途に合わせたwordpressによるCMSサイトをフルスクラッチにて構築することが可能です。お気軽にお問い合わせください。