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

HTMLでフローティングレイアウトを作成するにはどうすればよいですか?


HTMLでフローティングレイアウトを作成するには、CSSFloatを使用します。 Webサイトには、コンテンツを表示するための複数の列があります。 CSS Floatは、複数列のレイアウトを作成する方法の1つです。

フローティングレイアウトは、一般的にWebサイトのレイアウトに使用されます。これは、CSSFloatプロパティを使用して行われます。

これがフローティングレイアウトです。簡単に作成できます-

HTMLでフローティングレイアウトを作成するにはどうすればよいですか?

次のコードを実行して、上記のフローティングレイアウトをHTMLで作成してみてください

<!DOCTYPE html>
<html>
   <head>
      <style>
         div.mycontent {
            width: 100%;
            border: 1px solid green;
         }
         header, footer {
            padding: 1em;
            color: green;
            background-color: #FAFAFA;
            text-align: left;
         }
         nav {
            float: left;
            max-width: 150px;
            padding: 1em;
         }
         nav ul {
            list-style-type: none;
            padding: 0;
         }
         article {
            margin-left: 10px;
            border-left: 1px solid gray;
            padding: 1em;
            overflow: hidden;
         }
      </style>
   </head>
   <body>
      <div class="mycontent">
         <header>
            <h1>Tutorialspoint.com</h1>
            <h3>Simply Easy Learning</h3>
        </header>
        <nav>
           <ul>
              <li><a href="/tutorialslibrary.htm">Tutorials Library</a></li>
              <li><a href="/videotutorials/index.htm">Video Tutorials</a></li>
              <li><a href="/codingground.htm">Coding Ground</a></li>
              <li><a href="/tutor_connect/index.php">Tutor Connect</a></li>
              <li><a href="/online_dev_tools.htm">Tools</a></li>
           </ul>
        </nav>
        <article>
           <h1>About Us</h1>
           <p>This is demo content.</p>
           <p>This is demo content.</p>
           <p>This is demo content.</p>
           <p>This is demo content.</p>
        </article>
        <footer>Add the footer content here</footer>
    </div>
   </body>
</html>

  1. HTMLでフレックスボックスレイアウトを作成するにはどうすればよいですか?

    HTMLでフレックスボックスレイアウトを作成するには、CSSFloatを使用します。 Webサイトには、コンテンツを表示するための複数の列があります。 CSS Floatは、複数列のレイアウトを作成する方法の1つです。 CSS3で導入されたフレックスボックスレイアウト。このレイアウトは、画面サイズを調整し、複数のディスプレイデバイスで正しく表示されるようにするのに役立ちます。コンテンツのマージンが折りたたまれても、フレックスボックスは折りたたまれません。画面サイズに合わせて調整します。 例 以下はフレックスボックスレイアウトを使用しない場合です <!DOCTYPE html>

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

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