レスポンシブ対応！CSSで二重線のボーダーボックスを作る方法

ホーム
CSS, Web Design
レスポンシブ対応！CSSで二重線のボーダーボックスを作る方法

CSS

2017.09.17

レスポンシブ対応！CSSで二重線のボーダーボックスを作る方法

Pocket

みなさんこんにちは、mayukouです。
先日、ホームページを作る際に、役立った
二重線のボーダーボックスの作り方をご紹介します。

スポンサードリンク

二重線ボーダーのボックスの作り方

HTMLとCSSで実装できます。まずはデモをご覧ください。

デモ

HTML

<div class=“double-border”>
テキストが入ります。
</div>

テキストが入ります。

</div>

divタグ等で適当なボックスを作りましょう。dlタグやpタグでも代用可。

CSS

cssではoutlineプロパティを使います。これは、枠線となるアウトラインのスタイル、太さ、色をまとめて指定できます。
outline-offsetでボーダーからの距離を指定できます。プラス（＋）にすると外側、マイナス（ー）にすると内側に表示できます。
レスポンシブでwidthに影響を与えたくない場合は、マイナス（ー）指定して、その分パディング（padding）で隙間を取ることをオススメします。
borderプロパティと一緒に使うことで、二重線を表現することができます。
※ただし、outlineプロパティは角丸を使用することができませんので、ご注意ください。

.double-border {
    width:700px;
    border:1px solid #0C6;
    outline: 3px solid green; /* 線幅、線のスタイル、カラー */
        outline-offset: -10px; /* 対象の要素からの距離、マイナス(内側)にも対応 */
        padding:5px;}

.double-border {

width:700px;

border:1px solid #0C6;

outline: 3px solid green; /* 線幅、線のスタイル、カラー */

outline-offset: -10px; /* 対象の要素からの距離、マイナス(内側)にも対応 */

padding:5px;}

レスポンシブにしたい場合

幅の指定を、相対指定（%）にしましょう。

.double-border2 {
    width:96%;
    border:3px solid #0C6;
    outline: 1px solid green; /* 線幅、線のスタイル、カラー */
outline-offset: -10px; /* 対象の要素からの距離、マイナス(内側)にも対応 */
padding:2%;}

.double-border2 {

width:96%;

border:3px solid #0C6;

outline: 1px solid green; /* 線幅、線のスタイル、カラー */

outline-offset: -10px; /* 対象の要素からの距離、マイナス(内側)にも対応 */

padding:2%;}

これでできます。ぜひチェックしてみてください。

最後に

いかがでしょうか？二重線のデザインに使えるCSSをご紹介しました。ぜひ、チェックしてみてください。

投稿者プロフィール

mayukou: Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら

プロフィール

mayukou

こんにちは！mayukouと申します。福岡市でハーブティー専門店のデザイナーをしています。デザイナー10年目。海外で活動できる一流デザイナーを目指しています。洋楽好き（特にR&B）。Mac&iPhoneユーザー。AB型です。自分の学んだこと、役に立つことを発信していきたいと思います。よろしくおねがいします。