HTML-レイアウト

Webページのレイアウトは、Webサイトの外観を良くするために非常に重要です。見栄えの良いウェブサイトのレイアウトを設計するには、かなりの時間がかかります。

現在、現代のすべてのWebサイトはCSSおよびJavaScriptベースのフレームワークを使用してレスポンシブでダイナミックなWebサイトを作成していますが、シンプルなHTMLテーブルまたは部門タグを他のフォーマットタグと組み合わせて使用することで、優れたレイアウトを作成できます。この章では、純粋なHTMLとその属性を使用して、Webページのシンプルだが機能するレイアウトを作成する方法の例をいくつか示します。

HTMLレイアウト-テーブルの使用

レイアウトを作成する最も簡単で一般的な方法は、HTML <table>タグを使用することです。これらのテーブルは列と行に配置されているため、好きな方法でこれらの行と列を利用できます。

例

たとえば、次のHTMLレイアウトの例は、3行2列のテーブルを使用して実現されていますが、ヘッダーとフッターの列は、colspan属性を使用して両方の列にまたがっています-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout using Tables</title>
   </head>

   <body>
      <table width = "100%" border = "0">

         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>This is Web Page Main title</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50">
               <b>Main Menu</b><br/>
               HTML<br/>
               PHP<br/>
               PERL...
            </td>

            <td bgcolor = "#eee" width = "100" height = "200">
               Technical and Managerial Tutorials
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © 2007 finddevguides.com
               </center>
            </td>
         </tr>

      </table>
   </body>

</html>

これは、次の結果を生成します-

複数列レイアウト-テーブルの使用

Webページを設計して、Webコンテンツを複数のページに配置できます。コンテンツを中央の列に保持し、左の列を使用してメニューを使用し、右の列を使用して広告やその他のものを配置できます。このレイアウトは、当社のウェブサイトfinddevguides.comにあるものと非常に似ています。

例

ここに3列のレイアウトを作成する例があります-

<!DOCTYPE html>
<html>

   <head>
      <title>Three Column HTML Layout</title>
   </head>

   <body>
      <table width = "100%" border = "0">

         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>Main Menu</b><br/>
               HTML<br/>
               PHP<br/>
               PERL...
            </td>

            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               Technical and Managerial Tutorials
            </td>

            <td bgcolor = "#aaa" width = "20%">
               <b>Right Menu</b><br/>
               HTML<br/>
               PHP<br/>
               PERL...
            </td>
         </tr>

      <table>
   </body>

</html>

これは、次の結果を生成します-