HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのhr要素で水平線を作成し、CSSでスタイリングする方法

Webページを構築していると、コンテンツを視覚的に区切って、読みやすく整理したい場面が出てきます。この記事では、HTMLの水平線（hr要素）について解説し、マークアップに組み込んでページをより魅力的でユーザーフレンドリーにする方法を学びます。

hr要素の基本

<hr>要素は、他のHTML要素とまったく同じようにCSSでスタイリングできます。記述の慣例としては、自己終了タグ（<hr />)ではなく、閉じタグのない形式（<hr>）で書くのが一般的ですが、どちらの書き方でもブラウザは同じように解釈します。hr要素はブロックレベル要素として表示され、主要なブラウザすべてで幅広くサポートされており、ページ内での話題やセクションの転換点を示す役割を持ちます。

CSSでスタイリングしてみよう

CSSが実際にどんな効果をもたらすのかは、自分の手で試してみるのが一番の近道です。以下のコードサンプルは、<hr>要素を装飾するためのCSSを適用した、ごくシンプルなHTMLページの例です。二重線や点線のスタイル、疑似要素（::after）を使った装飾など、さまざまな表現方法を確認できます。

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>hr</title>
       <link
           href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400;700&display=swap"
           rel="stylesheet"
       />
       <style>
           body {
               font-family: 'Roboto Mono';
           }
           nav {
               display: flex;
               flex-flow: row wrap;
               justify-content: space-between;
               width: 100%;
               height: 50px;
               margin-left: 20px;
           }
           nav > div {
               display: flex;
               justify-content: space-around;
               align-items: center;
               width: 40%;
           }
 
           nav > div > a {
               text-decoration: none;
               color: black;
           }
 
           nav > a {
               text-decoration: none;
               font-variant: small-caps;
               align-self: center;
           }
 
           hr {
               border: none;
               border-top: 5px double black;
               color: #333;
               overflow: visible;
               text-align: center;
               height: 5px;
           }
 
           hr::after {
               content: '😀😀😀😀';
               padding: 0 4px;
               position: relative;
               top: -18px;
               background: #fff;
           }
          
           section {
               width: 100%;
               display: flex;
               align-items: center;
               margin: 0 auto;
           }
 
           section > div {
               width: 50%;
               display: flex;
               justify-content: center;
           }
           section > h1 {
               width: 50%;
               text-align: center;
           }
           section > div > img {
               height: 350px;
               object-fit:cover;
           }
 
           #diff-style-hr {
               border: none;
               border-top: 3px dotted black;color: #333;
               overflow:visible;
               text-align: center;
               height: 5px;
           }
 
           #diff-style-hr::after {
               content: "";
               padding: 0;
              
           }
           .lower-container {
               display: flex;
               flex-flow: row wrap;
           }
           .lower-main {
               display: flex;
               flex-direction: column;
               width: 40%;
               margin: 0 auto;
           }
           h4 {
              align-self: flex-start;
           }
       </style>
   </head>
   <body>
       <nav>
           <a href="#">
               <div>
                   Logo Goes Here
               </div>
           </a>
           <div>
               <a href="">
                   About Us
               </a>
               <a href="">
                   Services
               </a>
               <a href="">
                   Contact Us
               </a>
               <a href="">
                   Login
               </a>
           </div>
       </nav>
       <hr />
       <main>
           <section>
               <div>
                   <img src="https://images.unsplash.com/photo-1516259762381-22954d7d3ad2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2266&q=80" alt="code"/>
               </div>
               <h1>I'm a business name</h1>
           </section>
           <hr id="diff-style-hr">
           <div class="lower-container">
               <section class="lower-main">
                   <h4>I'm a headline</h4>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
               </section>
               <section class="lower-main">
                   <h4>I'm a headline</h4>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
               </section>
               <section class="lower-main">
                   <h4>I'm a headline</h4>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
               </section>
               <section class="lower-main">
                   <h4>I'm a headline</h4>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
                   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p>
               </section>
           </div>
          
       </main>
   </body>
</html>

まとめ

お疲れさまでした！これで<hr>要素を使いこなして、見栄えの良いサイトを構築するための基礎知識が身につきました。線の太さや種類（実線・点線・二重線）を変えたり、疑似要素と組み合わせたりすることで、サイトのデザインに合わせた多彩な水平線を表現できるので、ぜひいろいろなスタイルを試してみてください。

  1. HTMLで非表示のコメントを作成する方法

    HTMLで非表示のコメントを作成するには、<!-- を記述してコメントを開始し、--> で閉じます。このタグの間に書かれた内容はすべてブラウザ上では非表示になります。コメント機能は、後からコードを見直したり修正したりする必要がある開発者にとって非常に便利です。適切なコメントを残しておくことで、コードの意図や構造を簡単に理解できるようになります。コメントは「自分自身へのメモ」と捉えることもできます。同時に、HTMLコードを一時的に無効化したい場合にも活用でき、コメントアウトされた部分はブラウザに一切表示されません。サンプルコード以下のコードを実行して、HTMLにおける非表示コメントの

  2. HTMLで参考文献（Bibliography）を作成する方法

    参考文献（Bibliography）とは、執筆時に参照した書籍や資料の一覧をまとめて記載するセクションのことです。HTMLを使えば、こうした参考文献リストを簡単に作成できます。具体的には、<ol>タグで書籍を番号付きリストとして列挙し、<cite>タグで作品のタイトルをマークアップします。 <cite>タグは、書籍のタイトルだけでなく、楽曲、絵画、映画など、さまざまな作品のタイトルを示す際にも使用できます。このタグは「引用」を意味しており、タグ内に記述した内容はすべて作品のタイトルとして扱われます。 サンプルコード それでは、実際にHTMLで参考文献リスト