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

資料小分類

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

資料大分類

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

リンク

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

トップページ作成 ~ 白紙ページを作成 ~

それでは、まず 白紙ページを作成します。

白紙のページを作成する

➊ナビバーの [新規作成] ボタンをクリックします。

  • ナビバーの[新規作成]ボタンをクリックする
    • 新規作成ボタンをクリックする
    •  
    •  
    •  
    • ▼ページ作成方法の選択をする[新規作成]ダイアログが表示される。

➋[白紙から作成する]をクリックします。

  • [新規作成]ダイアログで[白紙から作成する]をクリックする
    • [白紙から作成]を選択する
  • 白紙のページが作成された
    • 白紙のページのタイトル
    • 白紙ページが作成された。タイトルバーを見ると、ファイル名は newpage1.html、ページタイトルが[無題]であることと、[標準モード]であることがわかる。
    • ページタイトルは次のページタイトル設定で入力する。

ヒント2つの編集モード : 標準モード vs. どこでも配置モード

  • 編集モード
  • 標準モード
  • どこでも配置モード
  • 操作の特徴
  • 文字や画像などの要素は、ページのカーソル位置に挿入されます。
  • 文字や画像などの要素は、ドラッグして自由に位置を変えられます。
    要素どうしを重ね合わせることもできます。
  • ブラウザーで表示した場合の特徴及び制約
  • 文字や画像の中央揃えや右揃えができます。
    ブラウザのウィンドウの横幅に合わせて、文字や画像が自動的に折り返され、ページの体裁が自動的に調整されます。
  • 文字や画像の中央揃えや右揃えはできません。
    ブラウザのウィンドウの横幅を狭めても、幅を変更した文字や画像の折り返しは行われません。
    このモードで作成したページは、文字や画像がブラウザの表示画面の左上を基点とした絶対座標で配置されています。

HTML ソース

  • 作成したばかりの白紙ページの HTML ソースを表示する。(丸囲み数字は無い)
  • HTML
    • <!DOCTYPE html>       ①
    • <html lang="ja">      ②
    • <head>               ③
    • <meta charset="UTF-8">      ④
    • <title></title>            ⑤
    • </head>             ③’
    • <body></body>         ⑥⑥
    • </html>           ②’
  • 解説 :基本的な構造タグ
    • ①文書宣言:当ページはHTML5 形式のページであることを宣言している。
    • ②<html> ~ </html> : HTML ファイルの開始と終了を示すタグ。ここでは当ページは「日本語(lang="ja")」で記述されていることも示す。
    • ③<head> ~ </head> : ヘッダ情報を指定するタグ。当HTMLファイルに関する指定などが記述される部分。記述内容は本文には表示されない。
    • ④<meta> : 当HTML ファイルについての情報を記述するタグ。ここではブラウザが当ページを読む時の文字エンコードは UTF-8 を使うこと、などが宣言されている。
    • ⑤<title> ~ </title> : ページタイトルを記述するタグ。現時点ではページタイトルが未入力で、[無題]となって表示される。
    • ⑥<body> ~ </body> : 本文の開始と終了を表すタグ。ここに入力された内容がブラウザにて表示される。

次にページタイトルを設定します。

直線上に配置

| |