DESIGN BLOGデザイン事務所の制作ブログ

【css】ボーダースタイル

優香
株式会社ビーエムビー

ボーダーとは

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


特に以下4つはよく使われるので覚えておきましょう!

  • 1本線:solid
  • 2本線:double
  • 点線:dotted
  • 破線:dashed

 

ボーダーでできる!見出し一覧サイト

ボーダーでできるデザインは工夫次第でとてもたくさんありますが

小山がデザインの段階でよく見るページです。

 

https://saruwakakun.com/html-css/reference/h-design

コピペしてカスタムしたり、solidをdoubleにして線の太さを片方変えるだけでも結構雰囲気が変わるのでお勧めです!

https://ferret-plus.com/6821

このサイトは記事がまとまっていて大量に探せます!

 

使えそうでしたらお気に入り登録などお願いします☺

 

まとめ

今回お伝えしたかったことはBMBでコーディングする際のボーダーの書き方と、応用でした。

よく見る見出しもdoubleにしてみたり途中で色を変えてみたりすると結構雰囲気が変わるなぁと思います。

バリエーションをスタッフ内で増やしていけたらいいなと思っています。

見出しでよく使うことが多いのではないのかなと思い参考も少し載せさせてもらいましたが、ほかにも皆さんの「こんな使い方もあるよー」などありましたらコメント欄にお願いいたします☺

株式会社ビーエムビー

株式会社ビーエムビー

〒114-0031 東京都北区十条仲原1-4-8 商店街会館311 TEL&FAX:03-5948-5996

東京都北区のWEBやDTP(印刷物)のデザイン制作会社です。ホームページ制作やLP(ランディングページ)の作成、ECサイト(楽天ストアなど)の構築などのWEBデザイン、チラシ・ポスター・名刺・パンフレット・看板などの印刷物デザインに対応しています。お客様の業務形態や用途に合わせたwordpressによるCMSサイトをフルスクラッチにて構築することが可能です。お気軽にお問い合わせください。

その他の制作ブログ一覧

LINEスタンプを制作しました。たくさんのイラスト作画が大変でしたが、とても楽しい作業で納品まであっという間でした。 LINEスタンプ制作のご依頼を頂きました。 兵庫県三木市で彫刻刀の老舗メーカーとしてたくさんの彫刻刀を製造販売しているクライアントさんです。以前にホームページ制作をさせていただいたご縁からいろんなお仕事をご依頼いただいています。 そんな中でもLINEスタンプ制作のご相談をいただきました。クライアントさんのマスコットキャラクターをLINEスタンプにしたいとのこと。 何度かやったことのある仕事で… イラスト制作illustratorphotoshop
【jQuery】slideToggleを使って要素をクリックで要素を表示・非表示させる 「Q&A」などでよく使われる、クリックすると詳細が表示される、アコーディオンメニュー。この記事では、そのアコーディオンメニューを、jQueryのslideToggleというメソッドを使って作成する方法をご紹介します。 1、slideToggleの使用例 まずはjsの記述について <script> $(function($){ $('ul.qa li .question'… TECHNICWEB制作javascriptjQuery
一覧に戻る