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

作成日: 2022/06/06 更新日: 2023/03/25 サイトの紹介と使い方

概要

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

WEBページの作成

  1. 私たちは、パソコンからインターネットを接続して情報を見るとき、通常はブラウザ(Google Chrome,Interner Explor,Microsoft Edge,FireFoxなど)を使用します。
  2. 情報源をサイトと呼び、サイトは多くの場合、複数のページから構成されています。
  3. そのページをWEBページと呼び、1ページに必ず世界で唯一のURL(住所)を持っています。
  4. 現実世界では、1ページは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)は、次の4つの要素から構成されます。
    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つのタグで領域を配置します。
  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. 実行結果は、例の実行をクリックしてください。

最後に

お問合せ・御要望

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