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. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました

    みなさんこんにちは、mayukouです。今回は、デザイン関連のお勧め…

  2. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ

    みなさんこんにちは、mayukouです。今回は、スマホサイトやレス…

  3. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える

    みなさんこんにちは、mayukouです。最近では、webデザイナーと…

  4. Web Design

    ブログ作りの参考に♬ジャンル別オススメwordpressテーマを考察してみました

    皆さんは、wordpressのブログを持っていますか?ブログを持ってい…

  5. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

  6. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive Nav

    みなさんこんにちは、mayukouです!今回は、うちのブログで結構…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

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

  1. Illustrator

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

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

    自分で作れると便利!illustratorでチェック柄を描く方法
  4. 写真

    食べ物やブツ撮りにおすすめ♩PENTAXの単焦点レンズ買いました。撮ったものなど…
  5. Web Design

    カフェのサイトをwordpressでリニューアル制作しました。その時の覚書
PAGE TOP