CSS

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


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

スポンサードリンク

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

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

デモ

HTML

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

CSS

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

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

幅の指定を、相対指定(%)にしましょう。

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

最後に

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

投稿者プロフィール

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

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

  2. Web Design

    webデザインのトレンドと取り入れよう!デザインの参考になるwebリソース 〜海外編〜

    みなさんこんにちは、mayukouです。あっという間に土曜の半日が…

  3. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

  4. Web Design

    CSS nite in FUKUOKA vol.6に行ってきました。

    みなさんこんにちは。今日は福岡はあいにくの雨ですが、いかがお過ごし…

  5. Web Design

    自分の頭をデザイン脳に!CSS nite fukuoka vol.8に参加しました

    みなさんこんにちは、mayukouです。このあいだ1月に行われたセミ…

  6. Web Design

    丸からスライドして出てくる検索ボックスの作り方

    みなさまこんにちは、mayukouです。今日は天気がいいのでランニ…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. iPad Pro

    購入して半年♪iPad Proで描いたイラストをご紹介。(主にProcreate…
  2. デザイン

    Adobe CCを導入しました。使ってみて感じたメリットとデメリットとは?
  3. Mac

    起きてしまった!MacOSのMarvericksの不具合
  4. お仕事紹介

    【お仕事紹介】学生向けアンケートパンフレット作りました
  5. Illustrator

    ロゴやイラストに!Illustratorでかすれ表現をする方法!
PAGE TOP