ga-04-13

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

13.レイアウトの基本

目   次

1.文字及びボックスのセンタリング

2.外側余白(margin)と内側余白(padding)

3.inlineとblockとinline-block

4.1カラムレイアウト(シンプルレイアウト)

5.2カラムレイアウト(サイドナビ付レイアウト)



  1.文字及びボックスのセンタリング

文字とボックスのセンタリングは、レイアウトにとって欠かせないものです。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     センタリングのサンプル
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
   <div class="box">
          <p>これはセンタリングのサンプルです</p>
   </div>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
    センタリングのサンプル 
--====================================*/
.box {
  height: 80px;
  width:600px;
  max-width: 100%;
  margin: 0 auto;
  background: darkblue;
}
.box p {
  line-height: 80px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
}
        
ワンポイント

ボックス内のテキストは1行に限り、ボックスの高さ[height]と行の高さ[line-height]を同じにすることによって縦のセンタリングができる。  

ワンポイント

[margin: 0 auto]は、上部余白と下部余白は0で、左右の余白は均等という意味。よって、ボックスはセンタリングされる。  

ワンポイント

[text-align: center]は、テキスト及び画像をセンタリングする。  



  

外側余白(margin)と内側余白(padding)は画面を見やすくするために重要な役割を持っています。しかし、ホームページを作成していく中で、何回も悩むのが余白が思った通り取れないという問題です。

A.外側余白(margin)を理解するための前提知識が必要です。それは、h1~h6タグ及び Pタグは、初期設定値として上下に1em(1文字分)の余白(margin)を持っているので上下余白を考えるとき考慮する必要があります。又、上下余白(margin)が重なるときは大きい方が選択されます。

【サンプル画像】

画像

B.外側余白(margin)と内側余白(padding)を設定したサンプルで説明します。下図の青字の矢印が外側余白(margin)で、赤字の矢印が内側余白(padding)です。下図では、枠線や背景色を付けているので分かり易いのですが、無くなると外側余白か内側余白かが分かり難くなります。又、日本語のブランクが悪戯して改行をしている場合があります。

【サンプル画像】

画像

          
【サンプル コード】
HTMLコード
<!DOCTYPE html>
<html>
<!--====================================
    外部余白と内部余白
=====================================-->
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" 
          href="style-1.css" 
          type="text/css">
</head>
<body>

<div class="box">
  
    <p class="content1">
      paddingの値を1つだけ(0px)指定した場合:<br>
      上下左右に0pxの内部余白<br>
      margin(18px 50px 18px 50px)=<br>
      (上、右、下、左)の外部余白
    </p>

    <p class="content2">
      paddingの値を2つ(18px 50px)指定した場合:<br>
      上下に最初の値18px、左右に次の値50pxの内部余白<br>
      margin(18px 50px 18px 50px)
    </p>

    <p class="content3">
      paddingの値を3つ(20px 20px 30px)指定した場合:<br>
      ひとつめの値20pxが上に、ふたつめの値20pxが左右に<br>
      最後の値30pxが下に内部余白<br>
      margin(18px 50px 18px 50px)
    </p>

    <p class="content4">
      paddingの値を4つ(70px 0px 0px 0px)指定した場合:<br>
      ひとつめの値が上に<br>
      ふたつめから時計回りに指定した値の内部余白<br>
      margin(36px 50px 18px 50px)
    </p>

</div>

</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
      外部余白と内部余白
--====================================*/

p.content1 {
  width:300px;
  background-color:yellow; 
  border-style: solid; 
  border-color: gray;
  padding: 0px;
  margin:18px 50px 18px 50px;
}

p.content2 {
  width:300px;
  background-color:yellow; 
  border-style: solid; 
  border-color: gray;
  padding: 18px 50px;
  margin:18px 50px 18px 50px;
}
p.content3 {
  width:300px;
  background-color:yellow; 
  border-style: solid; 
  border-color: gray;
  padding: 20px 20px 30px;
  margin:18px 50px 18px 50px;
}
p.content4 {
  width:300px;
  background-color:yellow; 
  border-style: solid; 
  border-color: gray;
  padding: 50px 0px 0px 0px;
  margin:36px 50px 18px 50px;
}
.box {
     width: 500px;
     height: auto;
     margin: 0 auto;
     background-color: ivory;
     border: 2px solid darkblue;
        
  
  3.blockとinlineとinline-block

A.block、inline、inline-blockの比較
block、inline、inline-blockは、displayプロパティの取ることのできる値です。「divタグ、pタブはblock」、「spanタグ、aタグはinline」というようにタグごとにdisplayプロパティの初期値は決まっています。ほとんどのタグはblockもしくはinlineが初期値となっています。inline-blockは、blockとinlineの中間の性質をもっています。
block、inline、inline-blockは、改行、並び方、余白の指定、幅・高さの指定、テキストの中央設定が各々違います。この違いを理解しておくことは、ホームページのレイアウト作成にとって大切です。

【block、inline、inline-blockの比較表】

画像

B.inline-blockのサンプル(ナビゲーション)
inline-blockは、block要素を横並びにしたいときに良く用いられます。当ホームページのメインナビゲーションで使っています。簡単な横並びのナビゲーションをサンプルとして作成しました。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
   inline-blockのサンプル
     ナビゲーション アイテムの横並び
=====================================-->
<html>
<head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <nav class="navi">
        <ul class="navi-list">
            <li class="navi-item">ホーム</li>
            <li class="navi-item">内容1</li>
            <li class="navi-item">内容2</li>
        </ul>
    </nav>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
    inline-blockのサンプル
     ナビゲーション アイテムの横並び
--====================================*/
.navi {
  font-size: 18px;
  width: auto;
}
.navi-list {
  text-align: center;
}
.navi-item {
  display: inline-block;
  padding: 5px 10px;
  margin: 10px;
  width:80px;
  color: white;
  font-weight: bold;
  background-color: darkblue;
}
        
ワンポイント

ナビアイテムに「display: inline-block」を指定することによってナビアイテムが横並びになる。

  
  5.1カラムレイアウト(シンプルレイアウト)

当サイトが使っている「1カラムレイアウト」を紹介します。サイドナビ付きのレイアウトと比較して良い点は、携帯およびタブレットを意識したレスポンシブ対応が取りやすいことにあります。開発途中でも全画面表示と縮小画面表示を見ながらホームページ作成を行っています。
又、1ページに深く掘り下げた内容を記述できるので、閲覧者が長く滞在してくれることが期待できます。

【1カラムレイアウト 概観図】

画像

  
  5.2カラムレイアウト(サイドナビ付レイアウト)

閲覧者は目次(サイドナビ)を見ながら内容を見ていくので、目次から興味を持った項目に飛んでくれることが期待できます。

【2カラムレイアウト 概観図】

画像

 back
pagetop
 next

構造と見た目を分ける

レイアウトの基本

レスポンシブ
Webデザイン

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken