【HTML/CSS】横棒を一線引きたい

html css プログラミング

横棒を一本だけ引く方法は、HTMLを使う方法とCSSを使う方法があります。

hrタグを使う

HTML の <hr> 要素は、段落レベルの要素間において、テーマの意味的な区切りを表します。例えば、話の場面の切り替えや、節内での話題の転換などです。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/hr

こちらは、HTMLのタグで水平線を引くため、ただデザイン目的で線を引くのではなく、意味的に区切る際に使います。

CSSで引く

<div class="hr"></div>
.hr {
        border: 4px solid red;
        width: '100%',
      }

デザインとして、水平線を引くなら、上記のように記述することで水平線を引けます。空の要素をつくるのが嫌であれば、疑似要素を使用してください。
注意点としては、表示される線は枠線の上下がくっついているので、4pxと指定すると、上下合わせて8pxの高さの水平線が表示されることです。

コメント

タイトルとURLをコピーしました