作成日: 2022/06/06 更新日: 2023/03/25 サイトの紹介と使い方
概要
- WEBページを作成するために、ページのデザインが重要になります。
- そして、デザインするためにレイアウトの構想が重要になります。
- レイアウトは、HTMLのタグ(要素)によって構築される領域によって行います。
- 領域は、配置する位置と大きさ(サイズ)により決定されます。
- その領域を、BOXと呼びCSSによって構築します。
WEBページの作成
- 私たちは、パソコンからインターネットを接続して情報を見るとき、通常はブラウザ(Google Chrome,Interner Explor,Microsoft Edge,FireFoxなど)を使用します。
- 情報源をサイトと呼び、サイトは多くの場合、複数のページから構成されています。
- そのページをWEBページと呼び、1ページに必ず世界で唯一のURL(住所)を持っています。
- 現実世界では、1ページはA4,B5などの用紙によって、大きさ(サイズ)が決まっていますが、WEBページにサイズの制限はありません。
- 私たちがWEBページを作成する時、通常は、空白のサイズの空間(サイズ)が用意されます。
但し、ブログやホームページ作成ソフトを使用すれば、なんらかのテーマやテンプレートによってある程度のデザインがされたWEBページが用意されます。 - しかし、その与えられたデザイン(機能を含む)を改良しようとするとき、制限によってできないことが、多くあります。
- 本サイトでは、空白のサイズの空間からWEBページを作成する方法を説明するので、制限はありません。
WEBページと親領域(BOX)
- 私たちがWEBページを作成するとき、「上部に画像を表示させたいな」とか「このボタンをクリックしたら別のページを表示させたいな」とかのデザインを行います。
- その時、どこに何を表示させるかを決めていきますが、この記事では「どこに」についての説明を行い、「何を」については内容ではなく、その領域について説明します。
- まず、「どこに」を配置で決め、領域(BOX)を決めていきますが、領域は必ず矩形(長方形)でなければなりません。
円を表示させたいときも、その円を含むための矩形領域が必要になります。 - 領域(BOX)の中に、領域(BOX)を持つことができて、領域(BOX)の親子関係を構成できます。
- 大元の親領域(BOX)はWEBページになります。
タグ(要素)の配置
- 以下の内容は、BOXの配置を参考にしていますので、詳しいことは、このサイトを参照してください。
- BOXの配置は、CSSのpositionプロパティで以下のように設定します。
- static:デフォルト値です。直前のBOXを基準にします。
- relative:直前のBOXを基準にします。top,leftプロパティによって、直前のBOXとの位置関係を設定できます。
- absolute:親BOX、親BOXがないときは、WINDOW(WEBページ)の左上を基準として、top,leftプロパティによって、BOXを配置します。
- fixed:WINDOW(WEBページ)の左上を基準として、top,leftプロパティによって、BOXを配置します。
タグ(要素)の領域(BOX)
- 以下の内容は、CSSの基本を参考にしていますので、詳しいことは、このサイトを参照してください。
- 領域(BOX)は、次の4つの要素から構成されます。
- 内容(content):HTMLタグによって、内容は異なりますが、サイズはwidthとheightで設定します。
- 枠(border):内容を囲む枠で、幅(太さ)を持ちます。
- 内側余白(padding):内容と枠の間の余白サイズです。
- 外側余白(margin):枠と他のBOXとの余白サイズです。
- 領域(BOX)のサイズは、内容、枠、内側余白、外側余白のサイズの合計になります。
- bottom,rightプロパティによって次のBOXのデフォルト位置を指定できます。
例
DIVタグの領域の設定
- DIVタグの詳細は、特定の範囲をグループ化するを参照してください。
- 以下のコードで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>
- <meta charset="UTF-8">:文字化けを防ぐために記述していますが、ブラウザやエディターの設定で思うように機能しないことがあります。
- <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>
- <div class="a01">divの領域設定の例</div>と<div class="a011">背景色の影響範囲の例</div>の2つのタグで領域を配置します。
- div "a01"の配置位置は、WEBページを親BOXになります。
- div "a011"の配置位置は、div "a01"の後位置になります。
- 配置位置は、クラス(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;
}
- .a01{}と.a011{}をクラス(class)と呼びます。
- クラス(class)は、{}内の属性によって、タグの表示形式を設定できます。
- height(高さ)とwidth(幅)によって領域のサイズを指定します。
実行結果
- 実行結果は、例の実行をクリックしてください。