仕切り線 ようこそ、Ａ班ＨＰ勉強会のページへ！

資料小分類

  • HTML/CSSを知る
  • Web トップ
  • ＨＴＭＬトップ
  • ＣＳＳトップ
  • 練習記録準備
  • スタイルの指定
  • 文字フォント指定
  • 文字サイズ指定
  • 文字色の指定
  • 文字位置指定
  • インデント指定
  • 背景画像
  • 画像を回り込む
  • ボーダー指定
  • 間隔・余白指定
  • 中央揃え
  • リンクの修飾
  • 対象限定スタイル
  • 外部 CSS

資料大分類

  • 資料トップへ戻る
  • 基礎編
  • HPを作ってみる
  • 白紙からページ作成
  • トップページを作成
  • サブページを作成
  • サイト管理
  • HTML/CSSを知る
  • Web ページ
  • HTML 練習
  • CSS 練習
  • レイアウト作成
  • レイアウト編集
  • 最新テクの活用
  • フォトモーション
  • フルＣＳＳテンプ基本
  • フルＣＳＳテンプ応用
  • jQuery の基本

リンク

  • サイト内検索
  • 問い合わせ
  • 参加者作品
  • ＨＰ勉強会トップ
  • Ａ班ホームページ

～間隔と余白を指定する～

基本的なボックスモデルのスタイルについての練習です。

練習するCSSプロパティ：　間隔と余白を設定する

padding　コンテンツ周囲の空き（すなわち余白）を指定する

  • 要素のコンテンツ（content）ボックスから囲み線（border）の内側までの、［パディング］領域の大きさを指定します。

使用例：

  • CSSソース： 要素にパディングを指定する
    • h1 { border : double 6px tomato;　　　　
    •   padding : 0.5em;　}
    • p { border : solid 1px;　　　　　　
    •   padding : 1em;　}

margin 　外側の余白（すなわち要素間の間隔）を指定する

  • 要素の囲み線（border）の外側の、間隔領域である「マージン」を指定します。

使用例：

  • CSSソース： 要素にマージンを指定する
    • h1 { border : double 6px tomato;　　　　　　
    •   padding : 0.5em ;
    •   margin : 1em 2em;　}
    • p { border : solid 1px;　　　　　　
    •   padding : 1em;　
    •   margin : 1em;
    • }

スタイルの設定ダイアログ：

  • 余白・間隔設定スタイル設定のダイアログ

余白の指定

Step-1：　パディングを指定していないページを作成する

➊新規ページ作成をする。

➋次のように見出しと段落を入力し、スタイルを設定します。

  • パディングを指定していない
  • CSSソース： パディングを指定していない
    • <style type="text/css">
    • <!--
    • body {
    •   background-color : rgb(255, 255, 204);
    • }
    • h1 {
    •   border : 6px double orange;
    • }
    • p {
    •   border : 1px solid;
    • }
    • -->
    • </style>

ヒントh1要素とp要素で、パディングが 0（設定されていない）なので、囲み線（border）の内側とコンテンツボックスの大きさが同じになる。

➌ブラウザで表示し、確認します。

➍ページはtest06.htmlとファイル名を付けてhtmlホルダーに保存します。

Step-2：　各要素にパディングを指定する

➎ファイルtest06.htmlを開く。

➏次のように各要素にパディングを設定する。

  • CSSソース： パディングを指定する
    • <style type="text/css">
    • <!--
    • body {
    •   background-color : rgb(255, 255, 204);
    • }
    • h1 {
    •   border : 6px double orange;
    •   padding : 0.5em;
    • }
    • p {
    •   border : 1px solid;
    •   padding : 1em;
    • }
    • -->
    • </style>
  • パディングを指定
    • パディングを指定

ヒントh1要素とp要素にそれぞれパディングが指定され、囲み線（border）の内側とコンテンツボックスの間に余白ができる。

➐ファイル名をtest06_01.html とし別名で保存する。練習を記録します。

マージン（間隔）を指定する

➊ファイルtest06_01.htmlを開く。

➋次のようにマージンの値を 0 に指定する。

  • CSSソース： マージンの値を 0 にする
    • <style type="text/css">
    • <!--
    • body {
    •   background-color : rgb(255, 255, 204);
    • }
    • h1 {
    •   border : 6px double orange;
    •   padding : 0.5em;
    •   margin : 0;
    • }
    • p {
    •   border : 1px solid;
    •   padding : 1em;
    •   margin : 0;
    • }
    • -->
    • </style>
  • マージンをZEROにする
    • マージン0

ヒントh1要素とp要素にマージン 0 が指定され、要素間の間隔が無い状態になっている。

ヒントh1要素やp要素など、HTML要素によっては最初からマージンが設定されているものもあります。それらのマージンを消すには marginプロパティの値を 0 にする必要があります。

➌次のように各要素にマージンを指定します。

  • CSS ソース： マージンの値を指定する
    • <style type="text/css">
    • <!--
    • body {
    •   background-color : rgb(255, 255, 204);
    • }
    • h1 {
    •   border : 6px double orange;
    •   padding : 0.5em;
    •   margin : 2em;
    • }
    • p {
    •   border : 1px solid;
    •   padding : 1em;
    •   margin : 1em;
    • }
    • -->
    • </style>
  • マージンを指定
    • マージンを指定

ヒントh1要素の上下左右の周囲に 2em、p要素の周囲に 1em のマージンが指定され、要素間の間隔が空いた状態になっている。

ヒント上下に隣接するマージンの値は相殺されます。上の例で、h1 要素と p 要素の間のマージンの値は、h1 要素の下 （2em） と p 要素の上 （1em） のマージンの合計 （3em） ではなく、いずれかの大きい方 （2em） のマージン値となります。

➍ファイル名をtest06_02.htmlとし、別名で保存します。練習を記録します。

⇒ 中央揃えへ進む

| |