)HTMLとCSSでWebページをつくっていて、「罫(けい)線はどうやって引くのだろう?」と思ったことはありませんか?Webページをつくっている中で、罫線(ヨコ線)を引く場面がたまにあります。この記事では、罫線の引き方からデザインまで解説をしていきます。それでは、罫線の基本的なつくり方をみていきましょう。【HTML/CSS】罫線の引き方HTML/CSSにおいて罫線の引き方は以下のように2通りあります。HTMLのhrタグを使うCSSのborderプロパティを使う罫線を引く方法が、HTMLとCSSそれぞれ用意されているのがわかります。hrタグを使う方法から見ていきます。rule(水平方向の罫線)」の略です。hrタグで罫線を引くコードは、例えば以下のように書きます。<hr>このコードを出力すると以下のようになります。何も属性をつけないと、上のようにヨコいっぱいで、立体感を出す影のついた線が表示されます。hrタグを使うときは、以下の属性を使うとよいでしょう。widthsizenoshade「width属性」は、罫線の長さを指定します。この長さに関しては、CSSのwidthプロパティでも指定することができます。width="50%">長さが何も指定しなかったときと異なっているのがわかります。上記のコードでは「%」で長さを指定しましたが、「px(ピクセル)」でも指定することができます。「50%」指定したので、デフォルトの長さの半分になりました。次に、「size属性」です。size属性は、線の太さを変えるものです。以下のように指定します。size="10">ここでは、sizeを「10」に指定したので太い線が表示されています。sizeの値は数字で入力してください。さいごに、「noshade属性」です。これを使うことで、デフォルトでついている、立体感を生む線の影をなくすことができます。noshade="">立体感を生む影がなくなったのがわかります。borderプロパティで罫線を引くつづいて、CSSのborderプロパティで罫線を引く方法について解説していきます。コードは下のように書きます。black;}罫線があらわれました。black」と書きました。1pxが「線の太さ」、solidが「実線」、blackの部分が「線の色」をあらわしています。「border-top」としましたが、「border-bottom」でも横線を引くことはできます。HTMLのブロック要素は箱のカタチをしています。border-topだと箱の上の辺、border-bottomだと箱の下の辺に線を引くということになります。罫線の色よくある罫線としては、色の薄い線をみかけます。濃い色の罫線だと目立ちすぎる上に、洗練されたイメージになりづらいためです。下のように色の薄い罫線をつくります。lightgray;}上記コードでは「lightgray(明るい灰色)」という既存の薄い色を使用しました。その他の方法として、透明度を使うことで色を薄くすることもできます。そこで出てくるのが、「rgba値」です。rが「red(赤)」、gが「green(緑)」、bが「blue(青)」、aが「alpha(透明度)」になります。0.5)」のように書きます。rgbは0~216、aは0~1で指定します。aを0に近づけるほど透明になっていきます。rbga値でコードを書くと例えば下のようになります。0.3);}出力すると以下のようになります。ちなみに、a(透明度)を指定しないと以下のようになります。罫線を引くときに薄い色にするのはおすすめです。どんな場面で罫線を引くのかここからは、どんな場面で罫線を引くのか、簡単な例を挙げながら解説していきます。結論からいうと、罫線はセクションを分けるとき、文同士を分けるときに使われます。罫線を入れることで、どこまでがひとつのまとまりか理解しやすくなるためです。auto;}セクションのかたまりの間に線を入れることで、一つ一つのセクションをしっかり区切ることができます。他には、文同士を区切る場面で使います。<p>ここにテキストが入ります。ここにテキストが入ります。class="line"></div><p>ここにテキストが入ります。ここにテキストが入ります。class="line"></div><p>ここにテキストが入ります。ここにテキストが入ります。class="line"></div><p>ここにテキストが入ります。ここにテキストが入ります。class="line"></div><p>ここにテキストが入ります。ここにテキストが入ります。7px;}上に例を挙げたように、罫線はセクションや文を分けるときに使いましょう。まとめいかがでしたでしょうか。HTMLとCSSでの罫線の引き方についての理解が深まったことでしょう。罫線の引き方としては、HTMLのhrタグを使う方法と、CSSのborderプロパティを使う方法の2種類があることがわかりました。罫線を引くときは、周りのデザインとの調和を考えて、長さや色を決めましょう。今回の知識が、Webページをつくる際に役立てば幸いです。