レイアウトを構成するためのタグ

7.レイアウトを構成するためのタグ

要素とは

<div>や<span>などのタグで構成されるものを「要素」と呼んでいます。
レイアウトをする上で重要になってくるのは要素の性質です。
性質を知らなければレイアウトを組み立てて行くことが出来ませんので、とりあえずは基本的なものだけでも覚えてしまいましょう。

ブロック要素とインライン要素

ブロック要素というのは続けて記述しても横に重なりません。
インライン要素というのは続けて記述すると横並びに重なっていきます。
インラインブロック要素は上記２つの特徴を併せ持ちます。
その他にも様々な違いがありますが、まずはこの基本を覚えて下さい。

■ブロック要素 … 横幅は最大になり横には重なりません

DIV

■インライン要素 … マージン指定での隙間は作れず場合によっては重なります
SPANSPANSPAN

■インラインブロック要素 … 横幅は内容の量に依存し横に並びます

DIV

これを見て分かる通り、レイアウトに向いている要素は「ブロック」「インラインブロック」になります。
※インライン要素は文字の装飾に使う用途には最適です。

要素の中に要素を入れて配置する

ロゴ

ここにページの紹介文

ヘッダー部分でよく使う手法として、要素の中に要素を縦横の位置を指定して配置します。
例えば会社ロゴを左上に配置する際に使われますので覚えておきましょう。

						<style type="text/css">
.base {
  background-color: #fff09e;
  height: 80px;
  position: relative;
}
.box1 {
  background-color: #4cb5e8;
  width: 100px;
  height: 40px;
  position: absolute;
  top: 15px;
  left: 10px;
}
.box2 {
  position: absolute;
  top: 5px;
  right: 10px;
}
</style>

<div class="base">
  <div class="box1">ロゴ</div>
  <div class="box2">ここにページの紹介文</div>
</div>
						
					

まず土台となるベースに「position:relative」を指定します。
この指定が無い場合はベースがbodyになってしまうので忘れないようにして下さい。
そしてその中に配置するものを「position:absolute」に指定して移動出来るようにします。
要素の場所は、上下が「top/bottom」、左右が「left/right」で指定します。

要素を並べて配置する

これはグローバルメニューでよく使われる手法になります。

						<style type="text/css">
.base {
  text-align: center;
  font-size: 0px;
  margin-bottom: 10px;
}
.base li {
  width: 200px;
  background-color: #eee;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 0 3px;
}
.base li a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #333;
}
</style>

<ul class="base">
  <li><a href="index.html">ホーム</a></li>
  <li><a href="products.html">製品紹介</a></li>
  <li><a href="company.html">会社概要</a></li>
  <li><a href="contact.html">お問い合わせ</a></li>
</ul>
						
					

インライン要素同士の間にはHTMLコード内の改行も文字として反映されてしまいますので隙間が空いてしまいます。
この隙間を無くすために「font-size:0px」を設定して文字の隙間を無くすようにしています。
しかしそのままでは中の文字も見えなくなってしまいますので、<a>タグ内のフォントは大きくしています。

次は「8.全て組み合わせてページにしてみる」です。

「6.基本的なページ構造」へ戻る

レイアウトを構成するためのタグ～無料ホームページの作り方～

無料ホームページの作り方
弊社では「自分で作成してみたい！」という方も応援しています

7.レイアウトを構成するためのタグ

要素とは

ブロック要素とインライン要素

要素の中に要素を入れて配置する

要素を並べて配置する

無料ホームページの作り方弊社では「自分で作成してみたい！」という方も応援しています

7.レイアウトを構成するためのタグ

要素とは

ブロック要素とインライン要素

要素の中に要素を入れて配置する

要素を並べて配置する

無料ホームページの作り方
弊社では「自分で作成してみたい！」という方も応援しています