みなさんこんにちは、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デザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2019.09.29jQuery画像も文字もスライド可能！Swiper.jsでコンテンツスライダーを簡単に！
- 2019.07.27デザインお店の顔！仕事の幅も広がる私流ロゴデザインマニュアル
- 2018.11.10Photoshop画像からフォントを探してくれる！Photoshopのマッチフォントが素敵。
- 2018.09.02CSSフレームワークサイト制作が早くなる！Bootstrapの特徴
この記事へのコメントはありません。