
背景に縦線を引いてあるデザインがたまにあるのですが、間隔を均等にして線を引くのをパッと出来る人は少ないと思います。
今回はその方法をご紹介します。
効率よくコーディングしたい人はこちら
背景に縦線を等間隔に引く方法
それでは早速デモを見てみましょう。
See the Pen
背景に縦線を引く方法 by junpei (@junpei-sugiyama)
on CodePen.
背景に線が4本で5等分されているのが分かります。
また、左上のHTMLやCSSをクリックするとレスポンシブ対応されているのも分かると思います。
それではコードを見ていきます。
コード解説
まずはHTMLはこちら。
<div class="container">
<div class="grid">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="text">
<p>テキスト・・・</p>
</div>
</div>
class="grid"
の中に線の数だけspanタグを書きます。
テキストの部分はサンプルなので、imgタグで画像などにしても大丈夫です。
そしてCSSはこちら(テキストのCSSは割愛しています)
.wrapper {
position: relative;
}
.grid {
display: flex;
height: 100%;
position: absolute;
width: 100%;
}
.grid span {
border-right: 1px solid #333;
height: 100%;
width: 20%;
}
縦線はspanタグに対してborder-right
で表現しています。
ポイントは.grid span
のwidth: 20%;で、線を4本ということは5等分ということなので、100% ÷ 5 = 20%となります。
背景の線が9本ならspanタグは9個で10等分なので、100% ÷ 10 = 10%となります。
他にも縦線を引く方法はあるかも知れませんが、今回はこの方法をご紹介しました。
Brainランキング1位獲得 & 3日で500部突破 クチコミ約300件 今だけ!5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる!
(平均スコア)