【超簡単】もう悩まない!CSSのみで二重線をつける方法

こんにちは、ライターのナナミです!

みなさんCSS書いてますか?WEBサイトの見栄えを決めるCSS、いろいろなテクニックがありますよね。

今回は、そんなテクニックの中から、CSSのみで実装できる二重線に注目してみました。

この記事では、

  • 二重線の枠のひきかた
  • 二重の下線のひき方
  • 二重の打ち消し線のひき方

などの基本から応用編も解説し、二重線についてとことん掘り下げていきます。CSSでできることを増やして、悩まずスラスラとスタイルをあてられるようになりましょう!

二重の枠線を引く

二重の枠線を引く方法は、いくつかの種類があります。それぞれの手順やメリット・デメリットを見ていきましょう!

htmlやcssの書き方から知りたいという方は、ぜひ下記の記事をご覧ください。

今回の解説では、下記のHTMLとCSSを基本として進めていきます。

HTML

CSSのみで二重線をつけています!

CSS

borderで引く

一番基本的な方法ですね。
枠をつけたい要素にborder:double;を指定するだけです、お手軽!

double1

CSS

borderのデザイン例

borderプロパティは、線の太さや色を同時に指定することができます。二重線の場合でも問題なく指定できるので、下記のように幅10pxの灰色の二重線などをひくことも可能です。

double2

CSS

ただし、太さを指定する場合は、3px以上を指定しないと二重線にならないのでご注意ください。

borderのメリット・デメリット

メリット

  • 記述が簡単
  • 要素のズレなどを気にしなくていい
  • 手軽に使える

デメリット

  • デザインの自由度が低いので、二本の線の太さをバラバラにしたい、色を別々に指定したいなどの場合には不向き。
  • ブラウザによって見栄えが変わってしまうことがある。

手軽なぶん自由度に欠ける点はありますが、とても使いやすい手法ですね。ただ、ブラウザによっての差異が出ることがあるので、使う際にはブラウザチェックをお忘れなく!

outlineを使って引く

borderよりも自由なデザインの二重線にしたいときに向いている方法です。

outline1

CSS

内側の線は、枠をつけたい要素自体にborderで一本線の枠をつけています。そのさらに外側にoutlineで一本線の枠をつけて、二重線とする方法です。

ただ、それだけだと二本の線がくっついて太い一本線になってしまうので、outlineでひいた線の位置をoutline-offsetで調整しています。

ここの値が、外側の線と内側の線の空いている部分の大きさになります。outline-offsetプロパティのリファレンスはこちら↓
http://www.htmq.com/css3/outline-offset.shtml

outlineで二重線を引く時の注意点

outlineでひかれた線とoutline-offsetで調整した幅は要素の大きさに含まれません。つまり下記のように横に並んだ要素があると

float1

二重線の部分が重なってしまい、上の揃えもズレてしまいます。このズレを調整するために、marginにoutlineの線の太さ+outline-offsetの値を入れて調整しています。

float2

outlineのデザイン例

borderよりもちょっと手間ではありますが、この方法だとこんなデザインも可能です。

outline2

CSS

外側の線を5pxにしてみました。
ただの二重線でも、こうするとちょっとおしゃれですね!

outlineのメリット・デメリット

メリット

  • デザインの自由度がまあまあ高い
  • 記述が少なくて済む

デメリット

  • IE11では実装不可(outline-offsetが使えないため)
  • 角丸にはできない

IE11で使えないのは結構痛いですね…

記述はとても楽なので、IE11を気にしなくてもいい時期になったらどんどん使っていきたいですね!

擬似要素を使って引く

borderのようにどのブラウザでも使えて、outlineのように自由なデザインにしたい…

そんなときに使えるのが、::before・::afterといった擬似要素を使った方法です。

擬似要素とはCSS内でHTMLのような要素を擬似的に作れるものです。

リストの頭にアイコンをつけたり、今回のように線を追加したりなどは、HTMLにソースを追加するよりも擬似要素で作ってしまう方が楽チンです。classを統一していればCSSで一括管理できるのも魅力的ですね!

擬似要素の詳細はこちらの記事がわかりやすいです↓
https://saruwakakun.com/html-css/basic/before-after

擬似要素を使って書いた二重線の記述は、下記のようになります。

gizi1

CSS

細かい設定などがあるので、ひとつひとつ紐解いて見てみましょう!

枠をつけたい要素の設定

枠をつけたい要素には、内側の線となる一本線の枠をつけています。

また、外側の線の場所を用意する必要があるので、marginで確保しています。今回は内側の線から1px間を空けて、外側1pxの線をひくので、合計2pxのmarginをとっています。

ここで一番重要なのは、position: relative;をつけることです。これがついていないと、::before要素の位置があらぬ方向にいってしまい、レイアウトが崩れてしまいます。忘れず入れましょう!

擬似要素の実体化

::before要素はcontentを入れることにより実体を持つようになります。本来は「”(クォーテーション)」に文字などを入れるのですが、今回は空っぽの要素を作りたいので空っぽのままで大丈夫です。

擬似要素の高さと幅の指定

次に高さと幅を指定します。外側の線になるので、基本となる要素よりも大きくなるように指定しましょう。今回は要素の大きさが変わってもそのまま使えるように、calcというCSS内で計算ができる記述を使って計算するようにしてみました。

calcについては下記の記事がわかりやすいです↓
https://w3g.jp/blog/css3_calc_function

今回は下記の式で計算するとぴったりになりました。

width = 100% + ( (1px + 1px) × 2)
height = 100% + ( (1px + 1px) × 2)

カッコの中は(内側の線の太さ + 内側の線と外側の線の間)のそれぞれの数値が入っています。
2倍にしているのは左右や上下の分です。

これを整理して、100% + 4pxで計算するようにしました。

外側の線の位置調整

そうしてできた要素に一本線の枠をつけて、位置の調整をしていきます。
ここで重要なのがposition: absolute;をつけることです。

position: absolute;を指定した要素は、left、right、top、bottomといったプロパティで位置を調整することができます。

各プロパティのリファレンスはこちら↓
left:http://www.htmq.com/style/left.shtml
right:http://www.htmq.com/style/right.shtml
top:http://www.htmq.com/style/top.shtml
bottom:http://www.htmq.com/style/bottom.shtml

今回はleftとtopで外側の線の位置を調整します。

ここでポイントなのが、1px多くずらすことです。

内側の線となる要素を基準に動かすのですが、その時の基準点は内側の線の内側になります。つまりtop:0;、left:0;と指定すると、下記のようになります。

default

内側の線のより1px内側にくっついた状態になりますね。この部分も考慮して、動かす値は下記のように計算します。

marginで指定した値 + 内側の線の太さ

今回はmargin:2px;を指定していて、内側の線は1pxなので、3px動かします。基準となる点よりも外側に出すので、マイナスの値で指定しましょう。これで完成です!

ちょっとややこしい方法ですが、IEでも問題なく使用でき、デザインも自由にできるので、なかなか便利ですね。

擬似要素のデザイン例

outlineと違って角丸にすることもできるので、こんなデザインも可能です!

giji2

CSS

内側の線を太くして、角丸をつけてみました。
各値の計算は前述の通りです。

擬似要素のメリット・デメリット

メリット

  • デザインの自由度がとても高い
  • どのブラウザでも見栄えに差がでない

デメリット

  • borderなどに比べるとやはり実装がややこしい
  • positionプロパティの設定をきちんとしないとレイアウトが崩れることがある
  • CSSに慣れていないと少々難易度が高い

細かいコツがいろいろあるので、使いこなすまでが大変かもしれません。ただpositionプロパティの仕様さえ理解できれば難なくできる手法です。

positionプロパティの説明はこちらの記事がわかりやすいです↓
http://uxmilk.jp/63409

二重の下線を引く

枠のつけ方がわかれば、下線をつけるのはとっても簡単です。残念ながらoutlineは下だけに線をひけないので、下線の場合はborderか擬似要素での実装になります。

2つの方法があるので、それぞれ見ていきましょう!

border-bottomを使う

under1

CSS

枠線をひく際に使っていた borderをborder-bottomにするだけ、簡単ですね!

擬似要素を使う

擬似要素の場合はこんな感じです。

under2

CSS

枠とは違い一辺のみなので、枠よりもちょっと難易度が下がります。線の場所を確保するためのmarginもmargin-bottomにし、下のみに適用されるようにしました。

線は borderでの実装と同様に、border-bottomにするだけです。高さや幅の計算は必要ありません。幅は同じにしたいので、100%にします。高さは入れておかないと線が表示されないため、1pxだけ入れておきましょう。下線なのでbottomで位置を調整し完成です!

これでちょっとした見出しなんかもバッチリです。

二重の打ち消し線を引く

一本の打ち消し線であれば、打ち消し線をひきたい要素にtext-decoration:line-through;を指定すればOKです。

では、二重の打ち消し線はどうすればよいのか見ていきましょう。

二重の打ち消し線を引くプロパティは無い!

残念ながら、text-decorationに二重の打ち消し線はありません。しかも他のプロパティでも、二重の打ち消し線をつけるものはありません。つまり無理です。

ただし、それはCSSのプロパティとしてのお話。無いなら作ればいいじゃない。ということで、擬似要素を使って作ってみました!

擬似要素で二重の打ち消し線を作る

uchikeshi1

CSS

打ち消し線をつけたい要素に::beforeと::afterで作った線を重ねて実装しました。

文字と同じ幅にするために、基本となる要素にdisplay: inline-block;を指定しています。あとは枠をつけた時と同じような感じで、擬似要素の幅や位置を指定しただけです。

おまけで、文字が大きくなった場合でも崩れたりしないようにcalcを使って計算するようにしました。今回は真ん中から3px上下にずらしたので、上下の線の間は6pxとなっています。ここはお好みで調整してみてください。

打ち消し線のバリエーション

擬似要素での実装なので、線の色や太さを変えることもできます。

uchikeshi2

CSS

記述はちょっと長いですが、使えるとデザインの幅も広がりますね!

ブラウザによる差異

borderによる枠線のデメリットとして挙げましたが、線の太さによっては、ブラウザごとに線の見栄えが変わってしまうことがあります。

borderでの実装
double

outlineでの実装
outline

擬似要素での実装
giji

これらは全て4pxの二重線になるように実装しました。borderによる実装では、線が滲んでいるブラウザや、二重線になっていないブラウザがありますね。outlineによる実装では、やはりIE11では二重線になっていません。

擬似要素での実装はなかなか優秀で、ブラウザごとの差はあまり感じないですね。この差については、こちらのサイトが詳細に解説してくれています↓
https://monochrome-design.jp/blog/572

実装時にはこれらの差もチェックしながら進めると、安定した見栄えのWEBサイトが作れるようになります。

しっかりチェックして、どのブラウザでも綺麗に見れるWEBサイトを目指しましょう!

まとめ

いかがでしたか?

ちょっとしたことではありますが、そういうちょっとしたところを知っていくと、CSSを書く速度も上がるうえ、素敵なデザインのサイトを作れるようになります。

それぞれのテクニックのメリットやデメリットを把握しつつ、その時に最適な手法を選べるようになれれば最高ですね!

今回は二重線にフォーカスしましたが、応用すれば他の場面でも役に立つテクニックです。CSSはまだまだいろいろなことができるので、ぜひ二重線だけに限らずどんどん試してみてください!

最短でプログラミングを習得したい方へ

元々ITリテラシーのある方やプログラムの学び方がわかっている方は独学で習得することも可能でしょう。

ただし、実際の学習期間中はつまづいている時間がほとんどです。

「もう挫折したくない」
「本業と両立しながら、好きな時間で自分のペースで勉強を続けていきたい。」
「自分だけのカリキュラムで効率的に勉強したい」

そんな方はお気軽に侍エンジニア塾までご相談ください。

弊社では、

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

までをひと通り学習できます。

まずは無料体験レッスンで、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

挫折しない学び方や、通常1000時間以上かかる学習時間を1/3にする方法などより具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta1

LINEで送る
Pocket

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説