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

練習問題

  • トップ
  • 事前準備
  • フォルダー構造作成
  • ビルダーの起動
  • ビルダーの初期設定
  • 編集画面の設定
  • Web ページ
  • バージョン選択
  • ページ作成
  • ファイル保存
  • ブラウザ確認
  • HTML の基礎
  • 文字の入力
  • 見出しタグ
  • 練習１ index.html
  • 段落タグ
  • 水平線の挿入
  • 練習２ dog.html
  • 強調表示
  • イメージの配置
  • リストの挿入
  • リストの入れ子
  • 著作情報
  • 区画
  • リンクの挿入
  • ページ内リンク
  • トップページ
  • CSS の基礎
  • スタイルの指定
  • 文字フォント指定
  • 文字色の指定
  • 文字位置指定
  • 背景画像
  • 画像を回り込む
  • ボーダー指定
  • 間隔・余白指定
  • 中央揃え
  • リンクの修飾
  • 対象限定スタイル
  • トップページ装飾
  • 外部 CSS
  • レイアウト
  • １カラム
  • ２カラム
  • 参考資料
  • 参加者作品
  • 問い合わせ

～１カラムレイアウト～

基本的な スタイルについての練習です。

練習する １カラムレイアウト：　ＣＳＳレイアウト

レイアウトコンテナ　div タグによる構造化したもの。ＩＤを付ける

ＩＤスタイル　スタイルシート側で、ブロック ID にスタイルを定義

設計図

  • １カラムレイアウト設計

1カラムのレイアウト

  1. レイアウトコンテナ <div> を利用してヘッダーとコンテンツ、フッターを表示するボックスを作成し、ID を付ける。
    • 全体を <div id="main"> でグループ化し、その中に <div id="header">、<div id="content">、<div id="footer"> でのボックスを作成する。
      • HTML ソース：
        • <div id="main">
        •   <div id="header">ヘッダ</div>
        •   <div id="conts">コンテンツ</div>
        •   <div id="footer">フッタ</div>
        • </div>
  2. #main の横幅：760px、<div id="main"> のマージンを 「auto」 に指定して、全体をブラウザの中央に配置
  3. ヘッダとコンテンツの間は、<div id="conts"> のマージンでコンテンツの上下に30ピクセルの余白を入れる。

完成図

  • 完成図

１カラムレイアウトを作成する

Step-1：　１カラムレイアウトをレイアウトコンテナで構造化

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

➋ layout1.html の名前を付けて、html フォルダーに保存する。

➌ HTML ソースの <body> ～ </body> に以下のように入力する。

  • HTML ソース：
    • <body>
    • <div id="main">
    •   <div id="header">ヘッダ</div>
    •   <div id="conts">コンテンツ</div>
    •   <div id="footer">フッタ</div>
    • </div>
    • </body>

ヒントレイアウトコンテナ <div> を利用してヘッダーとコンテンツ、フッターを表示するボックスを作成する。
全体を<div id="main">でグループ化し、その中に<div id="header">、<div
id="conts">、<div id="footer">を作成する。

ヒントHTML ソースに記述する場合、太字で記入する必要なない。太字を上で使用しているのは、表示を強調する意味で使用しているだけです。以降も同じ。

  •  
  • レイアウトコンテナで構造化

Step-2：　HTML タグのスペースを初期化する

HTML タグを初期化してスペースを削除します。

➍ HTMLソースの <head> ～　</head>　部分に、次のスタイルを記述を直接入力する。

  • CSS
    • <head>
    • <meta charset="UTF-8">
    • <title>１カラムレイアウト</title>
    • <style type="text/css">
    • <!--
    • * {
    •   padding : 0px;margin : 0px ;
    • }
    • -->
    • </style>
    • </head>

ヒントユニバーサルセレクタ ［*］ を使って、全要素のスペース（余白・間隔）を初期化（ゼロに）しています。

  •  
  • 初期化

ヒント➌の画像と比べると、スペースが無くなって表示されているのが分かる。

Step-3：　メインのレイアウトを作成する

レイアウトコンテナの各ブロックをひとまとめにするメインブロック （ID="main") のＩＤスタイルを作成します。メインブロックの幅は760pxとし、外枠にはトマト色の罫線を付けます。

➎ ID #main にスタイルを設定するには、［スタイル設定］ダイアログで設定する方法と、HTML ソースのスタイル記述部分に、CSSを直接入力する方法とがある。（以下同様）。

  • #main のスタイルを［スタイル設定］ダイアログで設定する：
    • ［レイアウト］タブ
      • ［４方向］：　［マージン］「自動」
      • 　　　　　　　 ［ボーダー］「２ピクセル」「実線「トマト色」
      ［位置］タブ
      • ［配置］：　［幅］「760px」
      • 　　　　　　 ［高さ］「自動」
  • #main の CSS 記述 （下記） を HTML ソース内に直接記述する。
    • #main {
    •   margin : auto;
    •   border : 2px solid tomato;
    •   width : 760px;
    •   height : auto;
    • }
  •  
  • メインブロックのスタイル作成

ヒント幅760pxのンメインブロックが画面の中央に、罫線付きで表示される。

Step-4：　ヘッダのレイアウトを作成する

タイトルを表示するヘッダブロック (ID="header") の ID スタイルを作成する。ヘッダの背景にはバナーとして、760x100ピクセルの画像を表示します。

➏ 760x100 ピクセルの画像を用意し、img フォルダーに保存します。

  • 画像のダウンロード：　header760x100.zip へのリンク

➐ #header のスタイルを設定する。

  • #header のスタイルを ［スタイル設定］ ダイアログで設定する：
    • ［色と背景］タブ
      • ［背景画像］：　［ファイル］「参照→img/header760x100.jpg」
      ［位置］タブ
      • ［配置］：　 　　 ［高さ］「１００ピクセル」
  • #header の CSS 記述 （下記） を HTML ソース内に直接記述する。
    • #header {
    •   background-image : url (img/header76-x100.jpg);
    •   height : 100px;
    • }
  •  
  • ヘッダスタイル作成

Step-5：　コンテンツのレイアウトを作成する

コンテンツブロック (ID="conts") の ID スタイルを作成する。コンテンツの上下マージンに３０ピクセルの間隔を入れる。

➑ #conts のスタイルを設定する。

  • #conts のスタイルを ［スタイル設定］ ダイアログで設定する：
    • ［レイアウト］タブ
      • ［上方向］：　［マージン］「３０ピクセル」
      • ［下方向］：　［マージン］「３０ピクセル」
  • #conts の CSS 記述 （下記） を HTML ソース内に直接記述する。
    • #conts {
    •   margin : 30px 0;
    • }
  •  
  • コンテンツのスタイル作成

Step-6：　フッタのレイアウトを作成する

フッタブロック (ID="footer") のID スタイルを作成する。上罫線を5ピクセルの緑色の実線にする。

➒ #footer のスタイルを設定する。

  • #footer のスタイルを ［スタイル設定］ ダイアログで設定する：
    • ［レイアウト］タブ
      • ［上方向］：　［ボーダー］「５ピクセル」「実線」「緑色」
  • #footer の CSS 記述 （下記） を HTML ソース内に直接記述する。
    • #footer {
    •   border-top : 5px solid green;
    • }

Step-7：　文字の入力

仮の文字を入力していたが、実際に見出しや本文を入力します。

➓ HTML ソース部分に、下記を入力する。

  • <div id="header">ヘッダ</div> を下記で置き換える
    • <div id="header">
    •   <h1>ホームページ　タイトル</h1>
    •   <h5>サブタイトル　サブタイトル</h5>
    • </div>
  • <div id="conts">コンテンツ</div> を下記で置き換える
    • <div id="conts">
    •   <h2>コンテンツのメインタイトル</h2>
    •   <p>コンテンツ本文です。コンテンツ本文です。コンテンツ本文です。
    •       コンテンツ本文です。コンテンツ本文です。コンテンツ本文です。
    •       コンテンツ本文です。コンテンツ本文です。コンテンツ本文です。
    •       コンテンツ本文です。コンテンツ本文です。コンテンツ本文です。
    •       コンテンツ本文です。コンテンツ本文です。コンテンツ本文です。</p>
    •   <h3>コンテンツのサブタイトル</h3>
    •   <p>コンテンツ本文です。コンテンツ本文です。コンテンツ本文です。
    •       コンテンツ本文です。コンテンツ本文です。コンテンツ本文です。
    •       コンテンツ本文です。コンテンツ本文です。コンテンツ本文です。
    •       コンテンツ本文です。コンテンツ本文です。コンテンツ本文です。</p>
    •   <p>コンテンツ本文です。コンテンツ本文です。コンテンツ本文です。
    •       コンテンツ本文です。コンテンツ本文です。コンテンツ本文です。</p>
    • </div>
  • <div id="footer">フッタ</div> を下記で置き換える
    • <div id="footer">
    •   Copyright &copy; Pasobora A-Han All Rights Reserved
    • </div>
  •  
  • 文字入力

Step-8：　スタイルの設定

⓫ ページ全体のスタイルを以下のように設定する。

  • body タグ のスタイルを［スタイルの設定］ダイアログで設定する。
    • ［フォント］タブ
      • ［サイズ］：　「やや小さい」
      ［文字のレイアウト］タブ
      • ［行の高さ］：　１８ピクセル
  • body タグの CSS 記述 （下記） を HTML ソース内に直接記述する。
    • body {
    •   font-size : small ;　　　　　
    •   line-height : 18px ;
    • }

⓬ ヘッダの見出しスタイルを以下のように設定する。

  • h1 タグのスタイルを［スタイルの設定］ダイアログで設定する。
    • ［色と背景］タブ
      • ［前景色］：　「白」
      ［レイアウト］タブ
      • ［上方向］：　［パディング］「１５ピクセル」
      • ［左方向］：　［パディング］「１０ピクセル」
    h5 タグのスタイルを［スタイルの設定］ダイアログで設定する。
    • ［色と背景］タブ
      • ［前景色］：　「白」
      ［レイアウト］タブ
      • ［上方向］：　［パディング］「１５ピクセル」
      • ［左方向］：　［パディング］「２０ピクセル」
  • h1、h5 タグの CSS 記述 （下記） を HTML ソース内に直接記述する。
    • h1 { color : white ; padding-top : 15px ; padding-left : 10px ; }　　　　
    • h5 { color : white ; padding-top : 15px ; padding-left : 20px ; } 
  •  
  • ヘッダの見出しスタイルを設定

⓭ コンテンツの見出しと段落のスタイルを以下のように設定する。

  • #conts h2 タグのスタイルを［スタイルの設定］ダイアログで設定する。
    • ［色と背景］タブ
      • ［前景色］：　「白」
      • ［背景色］：　「緑」
      ［レイアウト］タブ
      • ［４方向］：　［パディング］「１０ピクセル」
      • ［下方向］：　［マージン］「１５ピクセル」
  • #conts h3 タグのスタイルを［スタイルの設定］ダイアログで設定する。
    • ［レイアウト］タブ
      • ［上方向］：　［パディング］「５ピクセル」
      • ［右方向］：　［パディング］「１０ピクセル」
      • ［下方向］：　［パディング］「５ピクセル」、［マージン］「１５ピクセル」
      • 　　　　　　　　［ボーダー］「１ピクセル」「実線」「緑色」
      • ［左方向］：　［パディング］「１０ピクセル」、
      • 　　　　　　　　［ボーダー］「１５ピクセル」「実線」「緑色」
  • #conts p タグのスタイルを［スタイルの設定］ダイアログで設定する。
    • ［レイアウト］タブ
      • ［下方向］：　［マージン］「１０ピクセル」
  • #conts h2, #conts h3, #conts p タグの CSS 記述 （下記） を HTML ソース内に直接記述する。
    • #conts h2 { color : white ;background-color : green ;
    •   padding : 10px ; margin-bottom : 15px ; }
    • #conts h3 { padding : 5px 10px ; margin-bottom : 15px ;
    •   border-bottom : 1px solid green ;border-left : 15px solid green ; }
    • #conts p { margin-bottom : 10px ; }
  •  
  • コンテンツのスタイル設定

⓮ フッタの文字列のスタイルを以下のように編集する。

  • #footer タグの編集を［スタイルの設定］ダイアログで行う。
    • ［文字のレイアウト］タブ
      • ［水平方向の配置］：　［中央揃え］
  • #footer タグの CSS 記述 （下記） を HTML ソース内に直接記述する。
    • #footer {
    •   border-top : 5px solid green ;　　<!-- 従来から設定されていた部分 -->
    •   text-align : center ;
    • }
  •  
  • フッタの文字列スタイルの設定

Step-9：　スタイルの完成

⓯ 最後に、ページがスッキリするので、body の枠線を無しにする。

  • CSS
    • #main {
    •   margin : auto;
    •   border : 2px solid tomato;
    •   width : 760px;
    •   height : auto;
    • }
  •  
  • １カラムレイアツト

⇒ ２カラムレイアウトへ進む

| |