【線を自由自在に操る】擬似要素を使った線の引き方

はじめに

webサイトを作成するうえで、文字の装飾として頻繁に使うのが線(上下左右)です。

borderで作成する人も多いですが、今回は非常に便利である擬似要素を使った線の引き方について解説していきます。

目次

事前準備編

なぜ擬似要素を使うのか

擬似要素に関しては以前記事で紹介しています。

擬似要素に関する記事はこちら

こちらの記事ですね。

擬似要素はざっくり言えば、「HTMLに記述しなくてもdivのような箱を作ったり、文字を入れたり、いろんなことができるもの」です

今回使う上で理解しておいていただきたいのが、::before::afterの違いですね。

単語の通り、前に作るか後ろに作るかの違いです。

webは左上を基準にして作ります。

つまり、左右ではが、上下では::beforeになります。

反対に右と下::afterになります。

displayについて

こちらに関しても以前紹介しています。

displayに関する記事はこちら

displayは簡単に言えば「要素が最初から持っている属性みたいなもの」です。

ここをよく理解していないと、これから紹介する擬似要素を使った線の引き方が難しくなるかと思います

軽く説明しておくと、blockの場合は要素同士はに並びます。

inline-blockの場合はではなく、に要素同士が並ぶようになります。

この性質を使って上下左右の配置を決めていきます。

borderとは何が違うの??

以前投稿した、様々な下線の引き方に関して少し紹介した記事をまずは読んでみて下さい。

文字の下線の引き方に関する記事はこちら

文字に対してborderを使用しても似たようなことはできます。

ただ、線が対象要素に依存するため不便なことが多いのです。

なので今回は擬似要素を使って線を引いていきます。

実践編

再度事前準備編でのポイントを確認しましょう。

  • 上と左は::before、右と下は::after
  • diplay:block縦並びinline-block横並びになる

このポイントを踏まえたうえで上下左右の線を作っていきましょう。

上の図のように①〜④で分けて解説していきます。

対象要素はh2とします。

①上線

上の線を作る場合の条件は以下の3つです。

上線でのポイント

  • 対象要素に対して縦並びである(display:block)
  • 対象要素に対して上に作る(::before)
  • 横線なので、width線の長さheight太さになる

3つめに関しては、横線の場合widthは線の長さなのでお好みで、heightは太さになるのであまり大きくしすぎない方がいいです。

この内容を踏まえ上線のコードを書いてみると

CSS

h2{
   position:relative;
}
h2::before{ content:""; display:block; width:80px; height:3px; background-color:#0097A7; position:absolute; top:0; left:10px; }

こんな感じですね。
表示結果は以下のようになりました。

②左線

①の上線の内容を理解できれば全て同じ原理で作ることができます。

左線の場合の条件は

左線でのポイント

  • 対象要素に対して横並びである(display:inline-block)
  • 対象要素に対して左に作る(::before)
  • 横線なので、width線の太さheight長さになる

この条件を考慮してコードを書くと

CSS

h2{
   position:relative;
}
h2::before{ content:""; display:inline-block; width:3px; height:40px; background-color:#0097A7; position:absolute; top:-2px; left:-5px; }

表示結果は左線が表示されます。

③右線

右線の場合の条件は

右線でのポイント

  • 対象要素に対して横並びである(display:inline-block)
  • 対象要素に対して右に作る(::after)
  • 横線なので、width線の太さheight長さになる

この条件を考慮してコードを書くと

CSS

h2{
   position:relative;
   display:inline-block;
}
h2::after{ content:""; display:inline-block; width:3px; height:40px; background-color:#0097A7; position:absolute; top:-2px; right:-5px; }

コードを見ればわかりますが、右線だけはh2に対してdisplay:inline-blockを追加指定しています。

理由は、absoluteの基準が「文字のすぐ右横じゃないから」です。

h2block要素です

なので今回はh2inline-block要素にすることで解決しました。

MEMO
※なぜinline-blockで解決できるの??って人はdisplayの記事を再度読んでください。

表示結果では右線が表示されます。

④下線

下線の場合の条件は

下線でのポイント

  • 対象要素に対して縦並びである(display:block)
  • 対象要素に対して下に作る(::after)
  • 横線なので、width線の長さheight太さになる

この条件を考慮してコードを書くと

CSS

h2{
   position:relative;
}
h2::after{ content:""; display:block; width:80px; height:3px; background-color:#0097A7; position:absolute; bottom:0; left:10px; }

表示結果では下線が表示されます。

実践編の補足

線の配置に関して

今回は線の配置はposition:absolute絶対配置を使いました。

他にも配置のやり方はあります。

marginなどで動かしたり、position:relativeでも大丈夫です

ただ、スマホなどのレスポンシブも考慮すると絶対配置の方が後々楽かなと思います。

線のサイズに関して

今回はwidth,heightを決めて、擬似要素に対してbackground-colorで線の色を決めました。(backgroundでも同じです)

実は今回のやり方では3行になりますが、2行で書く方法もあります。
(わかりにくいかなと思い今回は簡単なやり方にしました、、)

それはborderプロパティを使います。

例えば

CSS

h2::after{
   content:"";
   display:block;
   width:80px;
   height:3px;
   background-color:red;
   position:absolute;
   bottom:0;
   left:10px;
}

この先ほど紹介した下線のコードを置き換えると

CSS

h2{
   position:relative;
}
h2::after{ content:""; display:block; width:80px; border-right:3px solod #0097A7; position:absolute; bottom:0; left:10px; }

となります。

heightbackground-colorの代わりにborder-rightを入れました。

注意
borderだけでも置き換え可能ですが、その場合border-rightborder-leftの2つが反応するため、幅が指定したサイズの2倍になります。
なので、もしborderを使う場合は本来のpxの1/2のpxを指定しましょう。

今回はborder-rightを使いました。

縦線に影響するのはrightもしくはleftです。
なのでこれはどちらを指定しても同じ結果になりますので、お好みで大丈夫です。

borderに比べて、px数は本来のままで大丈夫です。

ただ、実践編で解説した①or④ではtopbottom②or③ではleftrightに変更が必要なので少し考え方が難しくなります。

まとめ

今回は今までの内容を踏まえ、擬似要素を使った線の引き方を詳しく解説してみました。

別に擬似要素を必ずしも使わないといけない、という訳ではないので参考程度に捉えていただけたら嬉しいです。

実践的なプログラミングを学ぶなら

CodeShipでは、ただ知識をインプットするだけではなく、現場で使えるテクニックや勉強の仕方など周辺知識まで幅広く教えています。

勉強目的ごとに用意された6つの学習コース&オリジナルのポートフォリオ開発実戦経験豊富な現役エンジニアキャリアコンサルタントがあなたの「開発スキル修得」と「キャリアプランニング」をサポート。

独学での挫折や未経験からでも、スタートアップベンチャーや日系・外資の大手WEB系企業まで幅広くエンジニアを輩出する教育実績を残しています。

さらに、期間内であれば選択した以外のコースのカリキュラムも無料で受講可能。
頑張った分だけ勉強できる「勉強し放題」はCodeShipだけ。

まずはご自身のプログラミング学習やキャリアプランについて、無料個別相談会にてお気軽にご相談ください。