仕切り線 ようこそ、A班HP勉強会のページへ!

資料小分類

  • HTML/CSSを知る
  • Webトップ
  • HTMLトップ
  • 文字の入力
  • 見出しタグ
  • 練習1
  • 段落タグ
  • 水平線の挿入
  • 練習2
  • 強調表示
  • イメージの配置
  • リストの挿入
  • リストの入れ子
  • 著作情報
  • 区画
  • リンクの挿入
  • ページ内リンク
  • 他サイトへリンク
  • メールへリンク
  • ページ間リンク
  • 練習作品記録
  • CSSトップ

資料大分類

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

リンク

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

~リストの入れ子~

基本的なHTMLタグについての練習です。階層のある箇条書きを作ります。

リスト(箇条書き)の一部の項目を一つ下のレベルに設定する

➊HTMLの新規作成で、結果の図で示されるようにリストの中にリストを作ります。

  • リスト(箇条書き)の複数の項目を入力したあとで、ある項目を 1つ下のレベルにします。
  • リストの入れ子の前
  • リストの入れ子の結果

ヒントHTMLソースを見ると、<li>(リスト項目)の下に<ul> ~ </ul>ができているのが分かる。

  • リストの入れ子のHTMLソース

➌ファイル名han01.htmlでhtmlフォルダーに保存します。

➍新規作成したページhan01.htmlを練習記録に登録します。

  • 具体的方法は、練習を記録するを参照します。
  • ここでは、文字列を「リストの入れ子(階層)(han01.html)」としリンクを挿入します。

練習3: リストを追加する

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

➋以下の通り第三班のリストを追加するが、その方法はHTMLソースに直接入力して行うものとします。

  • リストの追加練習

➌ページのタイトルを[各班のメンバー2]とします。

➍完成したページは、ファイル名han02.htmlでhtmlフォルダーに保存します。

➎名前を付けて保存したページhan02.htmlを練習記録に登録します。

  • 具体的方法は、練習を記録するを参照します。
  • 文字列「各班のメンバー2(han02.html)」を新たに一覧に追加しリンクを挿入します。

ヒント行頭に何も表示しない箇条書き(リスト)を作る
ビルダーを使う場合:
  [挿入→リスト→指定して挿入→マークなし]で作ります。
スタイルシートを使う場合:
  <ul> を<ul style="list-style-type : none;">と記述します。

⇒ 著作情報へ進む


| |