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

HTMLで水平線を作成してスタイルを設定する方法

Webページのフローを作成するときに、コンテンツを視覚的に区別できる部分に分割する方法を見つけたい場合があります。この記事では、HTMLの水平方向のルールと、それをマークアップに配置して、視覚的にWebページをより魅力的でユーザーフレンドリーにする方法について学習します。

<hr> HTML要素は、CSSを使用して他のHTML要素と同じようにスタイルを設定できます。慣例では、自己終了タグ（

）ではなく非終了タグ（
）になりますが、マークアップはどちらの方法でも同じように読み取られます。これは、ワイドレベルのブラウザをサポートするブロックレベルの要素として表示され、Webページのトピックの変化を示します。

CSSを試して、CSSが何をするのかを確認するのが最善だと思います。次のコードサンドボックスは、HTML

要素の装飾に使用されるCSSを含む非常に基本的なHTMLページを示しています。 

<!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>

よくやった！これで、

を使用して見栄えの良いサイトを構築するために必要なツールが手に入りました。


  1. HTMLで非表示のコメントを作成するにはどうすればよいですか？

    HTMLで非表示のコメントを作成するには、で終了します。中に入るものは何でも隠されています。これらのコメントは、コードを再度参照する必要がある場合に役立ちます。これにより、コードを簡単に理解できます。 コメントは自分へのメモと見なすことができます。これはHTMLコードも非表示にするため、ブラウザには表示されません。 例 次のコードを実行して、HTMLの非表示のコメントについて学習することができます <!DOCTYPE html> <html> <head> <title>HTML Comments</title> </

  2. HTMLで参考文献を作成するにはどうすればよいですか？

    参考文献は、参照されている本のリストが記載されているセクションです。 HTMLを使用すると、参考文献を簡単に作成できます。そのために、タグを使用して本を一覧表示し、を使用して作品のタイトルを追加します。 タグは、曲、絵画、映画などの作品のタイトルを追加するためにも使用されます。引用を示し、タグ内にあるものはすべて作品のタイトルを表します。 例 HTMLで参考文献を追加する方法を見てみましょう <!DOCTYPE html> <html>    <head>       <title>B