みなさんこんにちは、mayukouです。
先日、ホームページを作る際に、役立った
二重線のボーダーボックスの作り方をご紹介します。
スポンサードリンク
二重線ボーダーのボックスの作り方
HTMLとCSSで実装できます。まずはデモをご覧ください。
HTML
1 2 3 |
<div class=“double-border”> テキストが入ります。 </div> |
divタグ等で適当なボックスを作りましょう。dlタグやpタグでも代用可。
CSS
cssではoutlineプロパティを使います。これは、枠線となるアウトラインのスタイル、太さ、色をまとめて指定できます。
outline-offsetでボーダーからの距離を指定できます。プラス(+)にすると外側、マイナス(ー)にすると内側に表示できます。
レスポンシブでwidthに影響を与えたくない場合は、マイナス(ー)指定して、その分パディング(padding)で隙間を取ることをオススメします。
borderプロパティと一緒に使うことで、二重線を表現することができます。
※ただし、outlineプロパティは角丸を使用することができませんので、ご注意ください。
1 2 3 4 5 6 |
.double-border { width:700px; border:1px solid #0C6; outline: 3px solid green; /* 線幅、線のスタイル、カラー */ outline-offset: -10px; /* 対象の要素からの距離、マイナス(内側)にも対応 */ padding:5px;} |
レスポンシブにしたい場合
幅の指定を、相対指定(%)にしましょう。
1 2 3 4 5 6 |
.double-border2 { width:96%; border:3px solid #0C6; outline: 1px solid green; /* 線幅、線のスタイル、カラー */ outline-offset: -10px; /* 対象の要素からの距離、マイナス(内側)にも対応 */ padding:2%;} |
これでできます。ぜひチェックしてみてください。
最後に
いかがでしょうか?二重線のデザインに使えるCSSをご紹介しました。ぜひ、チェックしてみてください。
投稿者プロフィール

-
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2022.05.20jQueryfullpage.jsで全画面表示&スクロールを実現できます。その方法をご紹介
- 2022.03.27デザイン【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
- 2022.02.23デザイン人は色で判断している!?ブランディングにおける色彩設計の基本
- 2022.02.23CSSデバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。
この記事へのコメントはありません。