直線上に配置
メニューを開く

資料小分類

  • サブページ作成
  • はじめに
  • ページを複製する
  • 見出しを設定する
  • 見出しにスタイル
  • 表を作成する
  • 表に文字を入力
  • 表を中央に配置
  • 行や列の挿入削除
  • 箇条書きを作成
  • 画像を回り込む
  • 画像にフレーム
  • ページにリンク
  • ページ内にリンク
  • 自由ページの活用

資料大分類

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

リンク

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

サブページ作成 ~ 見出しを設定する ~

見出しは、サブページの内容が分かるようにつける表題ですが、それぞれのサブページにこれを挿入します。

ヒント見出し
見出しには 6 種類あり、[見出し1]が最上位レベル、[見出し6]が最下位レベルになります。一般的に、文字は太字で、上位レベルの方が大きく表示されます。

見出しを作成する

サブページを開く

➊複製したページstudy.htmlを開きます。

見出しを作成する

➋見出しを挿入する場所をクリックします。

  • サブページを開いて、見出しを挿入する場所を指定
    • 見出しの挿入位置を指示
    • ➊サブページ study.html を開く。
    • ➋見出しを挿入する箇所をクリックする。ここでは「~ご笑覧ください」の後ろをクリックし、[Tab]キーを押す。

➌ 見出し1の段落を作成する

  • メニューの[挿入]→[段落]→[見出し1]をクリックします。
    • 見出し1段落を挿入
  • ▶新しい段落が見出し1で作成される。

ガイド上記による方法の他に、[Ctrl]+? キーなどでもレベルを指定し入力できます。
? にはレベルを示す数字(1~6)を使います。見出し1の場合は、[Ctrl] + [1] です。
この方法で [Ctrl]+[0]を指定すると、標準の段落を指定することになります。

➍見出し文字を入力します。

  • 段落に見出し文字を入力する
    • 見出し文字の入力
    • ❹作成された段落に見出しを入力する。ここでは、以下のサブページページに、それぞれの見出し文字を入力する。
      • study.html    HP勉強会
      • hobby.html   趣味の世界
      • plaza.html    自由広場
      • oths.html     その他諸々

➎トップページで記述されていた文章とその段落を削除します。

  • 「シニア~」の文章と段落を削除する
    • 文章の削除
    • ➎トップページで記述されていた文章を削除する。「シニア~」の文章をドラッグし、[Delete]キーを押して削除する。[Backspace] キーで段落も削除する。
  • 続いて「参加者一覧へ戻る」も削除します。

トップ画像のレイアウトコンテナを削除する

➏トップ画像の写真の上で右クリックします。

➐[レイアウトコンテナ→レイアウトコンテナの削除]をクリックします。

  • トップ画像のレイアウトコンテナを削除する
    • レイアウトコンテナの削除
    • ➏トップ画像の写真の上で右クリックする。
    • ➐コンテクストメニューから[レイアウトコンテナ→レイアウトコンテナの削除]を選択する。
  • トップ画像のレイアウトコンテナ(と画像)が削除され、完成
    • 完成図

➑[上書き保存]します。

他のサブページについても、以上の操作を繰り返します。

設定された HTML

  • HTML を表示してスタイルの設定を確認する。
  • HTML(変更・追加部分は赤色)
    • <!DOCTYPE html>
    • <html lang="ja">
    • <head>
    • <title>HP勉強会</title>
    • <link rel="stylesheet" href="../styles/style01.css" type="text/css" >
    • </head>
    • <body>
    • <div id="main">
    •   <div><img src="../imgs/logo1.gif" (省略) alt="My PC Life "></div>
    •   <div><a href="../top.html"><img src="../imgs/button1.gif alt="トップページ"></a> (省略)</div>
    •   <div id="conts">
    •       <h1>HP勉強会</h1>
    •   </div>
    •   <div id="footer">
    •     <hr>
    •     Copyright&copy;2014 Autumn My PC Life All Rights Reserved.
    •   </div>
    • </div>
    • </body>
    • </html>

ヒント見出しは<hx>~</hx>タグで指定されます。x にはレベルを示す数字(1~6)を使います。

合計4つのページで見出しが作成され、トップの文章や、トップ画像とそのレイアウトコンテナが削除されたら、次は見出しのスタイルに進みます。

直線上に配置

| |