HTML 入門

HTML 入門：目次

1. Webページ作成はじめの一歩
   1. 拡張子を表示する
   2. フォルダとindex.htmlを作成する
   3. テキストエディタ（メモ帳）で編集する
   4. ブラウザで表示する
   5. ゼミサーバにアップロードする
   6. Visual Studio Code を使う
   7. Visual Studio Code の Live Server を使う
   8. Web ページ閲覧方法の違いを理解する
2. HTML の基礎をマスターしよう
   1. HTML の雛形
   2. タグの基礎知識
   3. インデント
   4. コメント
3. 基本的なタグをマスターしよう
   1. 段落を作る
   2. 改行する
   3. 見出しを設定する
   4. 箇条書きを作る
   5. 表を配置する
   6. 画像を配置する
   7. リンクを設定する
   8. 特殊文字を表示する
4. HTML 文書を検証しよう
   1. HTML 文書を準備する
   2. Nu HTML Checker で HTML 文書を検証する
   3. Visual Studio Code で HTML 文書を検証する
   4. コンテンツカテゴリを理解する
5. 文書の構造を作ろう
   1. div と span を使う（ブロックボックスとインラインボックス）
   2. header，main，footer を使い分ける
   3. nav を使う
   4. section と article を使う
6. スタイルシートでデザインを作ろう
   1. CSS ファイルを準備して読み込む
   2. 表示を確認する
   3. CSS にデザインを記述する
   4. 複数のセレクタに適用する
   5. クラスを使う
   6. 色の設定方法を理解する
   7. width と height を使う
   8. border を使う
   9. padding を設定する
   10. margin を設定する
   11. 文字のスタイルを調整する
   12. 行間を調整する
   13. 背景色や背景画像を設定する
   14. リンクのデザインを設定する
   15. 表のデザインを設定する
   16. 図のデザインを設定する
   17. HTML内にスタイルを記述する
7. フォームを使ってみよう
   1. テキストコントロールとボタン
   2. テキストエリア
   3. チェックボックスとラジオボタン
   4. 選択リスト

Bootstrap によるレスポンシブ Web デザイン

1. Bootstrap のサンプル
2. 雛形を作る
3. コンテナを配置する
4. コンテンツの幅を設定する
5. グリッドシステムを理解する
6. 表を配置する
7. ボーダーを設定する
8. レスポンシブイメージを配置する
9. カルーセルを配置する
10. ナビバーを配置する
11. カードを配置する
12. ディスプレイプロパティを設定する
13. リストグループを使う
14. フォームを使う

テキストエディタの設定と使い方

1. Visual Studio Code
   1. Visual Studio Code とは
   2. Visual Studio Code のダウンロードとインストール
   3. Visual Studio Code の設定
   4. Visual Studio Code の使い方（フォルダを開く | インテリセンス | 検索 | マルチカーソル | 矩形選択 | 折りたたみ）
   5. Visual Studio Code のおすすめ設定
   6. Visual Studio Code のショートカットキー
   7. Visual Studio Code の便利な拡張機能
   8. Visual Studio Code 以外のテキストエディタ
2. Atom

Google Fonts の使い方

1. Google Fonts の使い方
   1. ページの雛形を作る
   2. フォントを選ぶ
   3. スタイルシートを読み込み，スタイルを設定する
   4. 複数のフォントを利用する

スマートフォンでのWebページ作成

1. スマートフォンでWebページを作ってみよう

参考サイト

1. 参考サイト