HTML-01.レイアウト-領域の構成と要素の配置

作成日: 2022/06/06 更新日: 2023/03/25 サイトの紹介と使い方
< HTML-01.レイアウト-領域の構成と要素の配置 >
  1. 概要
    1. WEBページの作成
    2. WEBページと親領域（BOX)
  2. タグ（要素）の配置
  3. タグ（要素）の領域（BOX）
  4. 例
    1. DIVタグの領域の設定
  5. 最後に
  6. お問合せ・御要望

概要

  1. WEBページを作成するために、ページのデザインが重要になります。
  2. そして、デザインするためにレイアウトの構想が重要になります。
  3. レイアウトは、HTMLのタグ（要素）によって構築される領域によって行います。
  4. 領域は、配置する位置と大きさ（サイズ）により決定されます。
  5. その領域を、BOXと呼びCSSによって構築します。

WEBページの作成

  1. 私たちは、パソコンからインターネットを接続して情報を見るとき、通常はブラウザ（Google Chrome,Interner Explor,Microsoft Edge,FireFoxなど）を使用します。
  2. 情報源をサイトと呼び、サイトは多くの場合、複数のページから構成されています。
  3. そのページをWEBページと呼び、１ページに必ず世界で唯一のURL（住所）を持っています。
  4. 現実世界では、１ページはA4,B5などの用紙によって、大きさ（サイズ）が決まっていますが、WEBページにサイズの制限はありません。
  5. 私たちがWEBページを作成する時、通常は、空白のサイズの空間（サイズ）が用意されます。
    但し、ブログやホームページ作成ソフトを使用すれば、なんらかのテーマやテンプレートによってある程度のデザインがされたWEBページが用意されます。
  6. しかし、その与えられたデザイン（機能を含む）を改良しようとするとき、制限によってできないことが、多くあります。
  7. 本サイトでは、空白のサイズの空間からWEBページを作成する方法を説明するので、制限はありません。

WEBページと親領域（BOX)

  1. 私たちがWEBページを作成するとき、「上部に画像を表示させたいな」とか「このボタンをクリックしたら別のページを表示させたいな」とかのデザインを行います。
  2. その時、どこに何を表示させるかを決めていきますが、この記事では「どこに」についての説明を行い、「何を」については内容ではなく、その領域について説明します。
  3. まず、「どこに」を配置で決め、領域（BOX)を決めていきますが、領域は必ず矩形（長方形）でなければなりません。
    円を表示させたいときも、その円を含むための矩形領域が必要になります。
  4. 領域（BOX）の中に、領域（BOX）を持つことができて、領域（BOX）の親子関係を構成できます。
  5. 大元の親領域（BOX）はWEBページになります。

タグ（要素）の配置

  1. 以下の内容は、BOXの配置を参考にしていますので、詳しいことは、このサイトを参照してください。
  2. BOXの配置は、CSSのpositionプロパティで以下のように設定します。
    1. static:デフォルト値です。直前のBOXを基準にします。
    2. relative:直前のBOXを基準にします。top,leftプロパティによって、直前のBOXとの位置関係を設定できます。
    3. absolute:親BOX、親BOXがないときは、WINDOW(WEBページ)の左上を基準として、top,leftプロパティによって、BOXを配置します。
    4. fixed:WINDOW(WEBページ)の左上を基準として、top,leftプロパティによって、BOXを配置します。

タグ（要素）の領域（BOX）

  1. 以下の内容は、CSSの基本を参考にしていますので、詳しいことは、このサイトを参照してください。
  2. 領域（BOX）は、次の４つの要素から構成されます。
    1. 内容（content）:HTMLタグによって、内容は異なりますが、サイズはwidthとheightで設定します。
    2. 枠（border）:内容を囲む枠で、幅（太さ）を持ちます。
    3. 内側余白（padding）:内容と枠の間の余白サイズです。
    4. 外側余白（margin）:枠と他のBOXとの余白サイズです。
  3. 領域（BOX）のサイズは、内容、枠、内側余白、外側余白のサイズの合計になります。
  4. bottom,rightプロパティによって次のBOXのデフォルト位置を指定できます。

例

DIVタグの領域の設定

  1. DIVタグの詳細は、特定の範囲をグループ化するを参照してください。
  2. 以下のコードでDIVタグの領域の例を設定します。
HTMLファイル
<html>
    <head>
	<meta charset="UTF-8">
        <link rel="stylesheet" href="https://aidendo-pilot.com/htmltest/a01/index.css" type="text/css">
    </head>

    <body>
        <div class="a01">divの領域設定の例</div>
        <div class="a011">背景色の影響範囲の例</div>
    </body>
</html>
  1. <meta charset="UTF-8">：文字化けを防ぐために記述していますが、ブラウザやエディターの設定で思うように機能しないことがあります。
  2. <link rel="stylesheet" href="https://aidendo-pilot.com/htmltest/a01/index.css" type="text/css">：外部のCSSファイルをLINKします。
    下のコードのように<head></head>ブロック内に、<style></style>を使って、記述することもできます。
<head>
	<meta charset="UTF-8">
        <style>
            .a01{
	        height:	100px;
	        width:	400px;
            }
        </style>
    </head>
  1. <div class="a01">divの領域設定の例</div>と<div class="a011">背景色の影響範囲の例</div>の２つのタグで領域を配置します。
  2. div "a01"の配置位置は、WEBページを親BOXになります。
  3. div "a011"の配置位置は、div "a01"の後位置になります。
  4. 配置位置は、クラス（class）"a01"、"a011"で何も指定していないので、デフォルト位置になります。
CSSファイル
.a01{
	height:			100px;
	width:			400px;
	color:			red;
	background-color:	blue;
	border-width:		3px;
	border-color:		black;
	border-style:		solid;
	padding:		20px;
	margin:			40px;
	bottom:			30px;
}

.a011{
	height:			100px;
	width:			400px;
	color:			red;
	background-color:	blue;
	background-clip:	content-box;
	border-width:		3px;
	border-color:		black;
	border-style:		solid;
	padding:		20px;
	margin:			40px;
}
  1. .a01{}と.a011{}をクラス（class）と呼びます。
  2. クラス（class）は、{}内の属性によって、タグの表示形式を設定できます。
  3. height（高さ）とwidth（幅）によって領域のサイズを指定します。
実行結果
  1. 実行結果は、例の実行をクリックしてください。

最後に

お問合せ・御要望

お問合せ
タイトルとURLをコピーしました