見出し画像
Photo by chiyoizmo

【入門】htmlとCSSでボーダーラインを作る（忘備録）

mmm

サイトでよく見かけるボーダーライン

↑こういうやつ。これを作ります。


⚠️注意：このnoteを書いている人も初学者のため、間違った内容を含む可能性があります。また、一部コードはChatGPTによって生成されています。

htmlのタグについて

<hr>を使う方法

まず、シンプルに線を引くだけならhtmlだけで
<hr>
このタグでできるみたいです。
hrは、Horizontal Rule（水平方向の罫線）という言葉の略らしいです。
このタグは、罫線が区切りを表している時のみ使います。
だから、区切りなどではなく、デザインとして罫線が欲しいなどの場合には次に紹介する方法でやります。

<div>を使う方法

<div>は何の意味も持たないタグです。（意味を持たないからこそ役に立つ）
デザインで罫線が必要な場合、区切りとしての罫線じゃない場合はdivを使って罫線を作ります。
もちろんこのままだと何も表示されないので、cssを使って罫線を作ります。

CSSについて

<hr>に対するcss

詳しく調べてないのでなんともいえないですが、HTML5以降 <hr>に直接color（何色の罫線にするか）やwidth(幅をどうするか)を属性によって変え（CSSじゃないですよ）、見た目の装飾をすることが非推奨になったみたいです。

<!--非推奨になったやり方-->
<hr color="#fff" width="〇〇px">

<!--CSSで色や幅を変更するのはOK-->
<hr class="border">

そのため、見た目としてすでにあるデフォルトのborderを1度消して、再度デザインしなおすのが主流だそう（チャットGPT曰くなので完全には信用できないけど）。「デフォルトの見た目のままでも良いじゃん」と思った方も、そのデフォルトの見た目は使う端末によって変わるので、できればcssで0から整えたいところですね。

hr {
    border: none;               /* デフォルトの境界線を削除 */
    border-top: 2px solid black; /* 上部に2pxの黒線を引く */
    width: 50%;                 /* 線の幅を50%に設定 */
    margin: 20px auto;          /* 上下に20pxの余白、中央寄せ */
    opacity: 0.8;               /* 透明度を80%に設定 */
}

<div>に対するcss

基本的には、<hr>に対するcssと同じで、border-topで線を引き、カスタマイズをしていきます。上のcssの border:none; が無いバージョンだと思ってもらえたら良いと思います！（たぶん）

.custom-line {
    border-top: 2px solid black;  /* 2ピクセルの黒い線を上端に引く */
    width: 50%;                   /* 幅を50%に設定 */
    margin: 20px auto;            /* 上下に20pxの余白を取り、中央に配置 */
}

<hr> vs <div> 使い分けなど

ここまでの説明を聞くと、<div>を使った方がわざわざデフォルトのborderを消す必要が無く、良いやり方のように感じるかもしれません。
でもあくまでも、htmlは意味の説明のため、cssは見た目の変更のために使います。罫線が区切りを表している場合はきちんと<hr>で書いた方が良いみたいです。

ちなみに、htmlは「意味の説明のため」と書きましたが、これをちゃんとすることにより、

  • ロボットでもサイトの構造（どこに何があるか）が分かるようになる。

  • 目の不自由な方でも使いやすいサイトになる

  • その結果SEO的に良いサイトになる？

といった効果が期待できるかもしれません。構造を表すhtmlタグはdivよりも積極的に使っていきたいですね。

borderプロパティについて

<hr>も<div>も罫線の見た目やデザインを装飾するときには、cssのborderプロパティを使用するみたいなので、ついでにborderについても書いておきます。
とは公式のドキュメントが分かりやすすぎるので、それの下位互換だと思ってください。
公式ドキュメントはこちら👇

borderプロパティに設定できる値3つ

borderプロパティに設定できる値は、幅（線の太さはどれくらい？）と種類（どんな線を引く？）と色（何色の線を引く？）です。書く順番は重要ではなく、どの順番でも正しく認識してくれます。ただ、多くの人が①幅→②種類→③色の順番で書くので、これが読みやすくオススメです。

例：

div{
    border-top: 1px solid black;
    /*要素の上方向に：　1pxの太さで solidという種類の線を 黒色で書く*/
}

ここで、幅と色はイメージ付きやすいと思うので、種類に関して、どんな種類があるのかだけ書いて今日は終わりにします。

borderで指定できる線の種類

  • solid …よくある普通の線。1本の実線。1番使うやつ。

  • dashed …破線　- - - - - - - ←こういうやつ

  • dotted …点線　・・・・・・←こういうやつ

  • double …二重線

  • inset …内側向きに影が付く　へこんでるように見える？

  • outset …外側向きに影が付く　でっぱってるように見える？

  • groove, ridge …いつ使うねんって感じの線。説明が難しいので、実際に使ってみるのがオススメ

まとめ

htmlとcssを使って罫線を引く方法でした。

💡今日勉強になったこと：
・同じ罫線でも、その役割をしっかりと考えてタグを選ばないといけない
・htmlのデフォルトの見た目は、見る人の環境によって違うため、そのままにせずcssを使って整えることが大切

以上で終わりです。最後まで読んでいただき、ありがとうございました！
よければ、スキ！やシェア、コメントなどお待ちしております！
雑記のため、本当に気が向いたらでいいので、フォローもお待ちしております！🙇‍♂️

いいなと思ったら応援しよう！