背景に縦線を引きたいけどどうすればいい？
背景に縦線を引いてあるデザインがたまにあるのですが、間隔を均等にして線を引くのをパッと出来る人は少ないと思います。
今回はその方法をご紹介します。
CSSで背景に縦線を等間隔に引く方法
それでは早速デモを見てみましょう。
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は割愛しています）
.container {
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%となります。
他にも縦線を引く方法はあるかも知れませんが、今回はこの方法をご紹介しました。
以上になります。
コーディングの時給と作業効率を上げる！
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇
今だけ！5大無料特典あり🎁
