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

資料小分類

  • トップページ作成
  • はじめに
  • 白紙ページを作成
  • ページタイトル設定
  • 個人名と戻り入力
  • 名前を付けて保存
  • 背景に色を付ける
  • レイアウトコンテナ
  • タイトルロゴ作成
  • 写真の挿入
  • 写真の切り抜き
  • ボタンの作成
  • 画像垂直隙間の調整
  • 文章を入力
  • コピーライト入力
  • 水平線を挿入
  • 文字サイズと色の変更
  • ブラウザーで確認
  • CSSファイル作成
  • フォントの種類設定
  • 全体を中央に配置
  • 背景に画像を設定
  • コンテナに背景色
  • コンテナに余白
  • フッターの中央配置
  • トップリンク設定
  • 勉強会リンク設定
  • 構文エラー対応

資料大分類

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

リンク

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

トップページ作成 ~ 個人名と戻り文字入力 ~

新しく作成するページには個人名を入力します。また、一覧への戻りの文字を入力しリンク設定します。これらは、集合研修での作成品を一つのサイトから全員が見れるようにするために必要です。

個人名と戻り文字を入力する

➊タイトルの付いた白紙のページを[ページ編集]画面で開き、クリックします。

  • ▶カーソルが白紙ページ左上でブリンクします。

➋ナビメニューの[文字の挿入]をクリックし、個人名を入力します。

  • 個人名の入力
    • 個人名の入力
    • ➊タイトルが付いた白紙のページを開いて、[ページ編集]画面にすると、ページ左上でカーソルが点滅する。
    • ➋ナビメニューの[文字の入力]をクリックすると、入力できる領域がフォーカスされるので、そこに個人の名前を入力する。

➌再度ナビメニューの[文字の入力]をクリックし、文字を入力します。

  • 「戻る」文字入力
    • 戻る文字の入力
    • 名前入力後、再度ナビメニューの[文字の入力]をクリックする。
    • 次の段落に文字が入力できるようにフォーカスが表示されるので、「参加者一覧へ戻る」と入力する。

「戻り」文字にリンクを設定する

❹入力した「参加者一覧へ戻る」にリンクを設定する

  • 入力した「参加者一覧へ戻る」をドラッグして選択し、[リンクの挿入]をクリックする
    • リンクの挿入の起動
  • ▼[リンク作成]ウィザードが起動する

❺リンク作成ウィザードで「戻り」のリンクを設定する

  • [リンク作成]ウィザード
    • リンク作成ウィザード
    • [ページや URL へのリンクを作成する]をクリックし、
    • [次へ]をクリックする
  • [リンク作成]ウィザード(文字列、画像ファイルの設定)]
    • リンク作成ウィザード
    • そのまま[次へ]をクリックする
  • [リンク作成ウィザード(ページや URL へのリンク作成)]
    • リンク作成ウィザード
    • 「リンク先」ボックスに 「../index.html」と入力し、[完了]をクリック

❻ページ編集画面に戻るので、[上書き保存]する。

HTML ソース

  • HTML ソースを表示する。
  • HTML(変更・追加分を太字と赤色にて表示)
    • <!DOCTYPE html>
    • <html lang="ja">
    • <head>
    • <meta charset="UTF-8">
    • <title>GUYさんのパソコンライフ</title>
    • </head>
    • <body>
    • <p>GUY</p>
    • <p><a href="../index.html">参加者一覧へ戻る</a></p>
    • </body>
    • </html>
  • 解説
    • <body> ~ </body> 本体に、二つの段落 <p> ~ </p> が入った。二つ目の段落文字「参加者一覧へ戻る」にはアンカー <a> ~ </a> が設定され、リンク先のページのURL が直接入力された。

次に、ページにファイル名を付けて保存します。

直線上に配置

| |