練習問題

• トップ

• 事前準備

• フォルダー構造作成

• ビルダーの起動

• ビルダーの初期設定

• 編集画面の設定

• Web ページ

• バージョン選択

• ページ作成

• ファイル保存

• ブラウザ確認

• HTML の基礎

• 文字の入力

• 見出しタグ

• 練習１ index.html

• 段落タグ

• 水平線の挿入

• 練習２ dog.html

• 強調表示

• イメージの配置

• リストの挿入

• リストの入れ子

• 住所・著作情報

• 区画

• リンクの挿入

• ページ内リンク

• トップページ

• CSS の基礎

• スタイルの指定

• 文字フォント指定

• 文字色の指定

• 文字位置指定

• 背景画像

• 画像を回り込む

• ボーダー指定

• 間隔・余白指定

• 中央揃え

• リンクの修飾

• 対象限定スタイル

• トップページ装飾

• 外部 CSS

• レイアウト

• １カラム

• ２カラム

• 参考資料

• 参加者作品

• 問い合わせ

～リストの挿入～

基本的な HTML タグについての練習です。

練習する HTML 要素：　リスト

• ul 要素：
  • <ul>
  •   <li>リスト項目１</li>
  •   <li>リスト項目２</li>
  • </ul>
• ul 要素は箇条書きの項目リストを指定します。各項目を並べる順番は重要な意味を持ちません。リストの項目は、li 要素で指定します。

---

• ol 要素：
  • <ol 属性="値">
  •   <li>リスト項目１</li>
  •   <li>リスト項目２</li>
  • </ol>
• ol 要素は順序付きの項目リストを示します。項目を並べる順番に意味がある場合に使用します。リストの項目は、li 要素で指定します。
• type 属性は、「1、a、A、i、I　のいずれか」 で行頭に表示する番号の種類を指定します。省略時の既定値は「1」。start 属性では、最初の項目の開始番号を変更できます。指定しない場合は 1 から始まります。

---

• li 要素：
  • <li 属性="値">［リスト項目１］</li>
  • <li 属性="値">［リスト項目２］</li>
• ol 要素や ul 要素の子要素として、リスト内の各項目を指定します。li 要素の終了タグは、次に li 要素が続く場合、もしくはその li 要素が親要素内の最後のコンテンツである場合に省略可能です。
• 親要素が ol 要素の場合、li 要素は順序を表す value 属性を持ちます。value 属性では、行頭番号の数字を整数により指定することが可能です。

リストの挿入

Step-1：　番号なしのリスト（箇条書き）を挿入する

➊ ［練習２ dog.html］ で作成し保存した、html フォルダーの dog.html ファイルを開きます。

➋ 次のように番号無しのリスト （箇条書き） を挿入します。

• 
•  
• 

• HTML ソース：
• 

➌ 上書き保存します。

Step-2：　番号なしリスト　⇔　番号付リストの変更

➍ 番号なしリストから番号付リストに変更してみます。

• 
•  
• 

➎ 番号付リストを番号なしリストに戻し、上書き保存します。

⇒ リストの入れ子へ進む