More than 3 years have passed since last update.

HTML/CSSで縦線を入れる方法

Last updated at 2021-03-02Posted at 2021-03-02

HTML

<div class="line-left">
   <p>HELLO</p>
</div>

縦線をつけたい要素を親要素で囲む必要があります。今回はdivで囲んでみました。

.line-left {
    border-left: 3px solid red;
}

border-left：　太さ　種類　色；
このように、border-leftプロパティを使うことでHELLOの左側に縦線が付きます。

HELLOと線の距離を離したいなら、

CSS

.line-left {
    border-left: 3px solid red;
    padding-left: 10px;
}

このように、padding-leftプロパティを入れることで間隔をあけることができます。
ぜひやってみてください！