公開資料

---

HTML 入門

HTML入門

1. ホームページ作成はじめの一歩
   1. 学内ネットワークに接続
   2. ファイルサーバに接続
   3. index.htmlを編集し，ブラウザで確認する
2. HTMLの基礎
   1. HTML の雛形
   2. タグの基礎知識
   3. インデント
   4. コメント
3. 基礎的なタグをマスターしよう
   1. 段落を作る
   2. 改行する
   3. 見出しの設定
   4. 文字スタイルの変更（太字 | 斜体 | 文字サイズ | 文字の色 | フォント | 複数のスタイル）
   5. 箇条書き
   6. 表を配置する
   7. 画像を配置する
   8. リンクを設定する
   9. 特殊文字を表示する
4. HTML 文書を検証してみよう
   1. HTML 文書を準備する
   2. Nu HTML Checker で HTML 文書を検証する
   3. Visual Studio Code で HTML 文書を検証する
5. スタイルシート
   1. CSS ファイルを準備する
   2. CSS ファイルを読み込む
   3. 表示を確認しておこう
   4. CSS にデザインを記述する
   5. 複数のセレクタに適用する
   6. classを使う
   7. 表のデザイン
   8. 図のデザイン
   9. HTML内にスタイルを記述する
6. フォームを使ってみよう
   1. テキストコントロール
   2. テキストエリア
   3. チェックボックスとラジオボタン
   4. 選択リスト
7. 参考サイト

DIV を使ったレイアウト（参考）

1. DIV を使ったレイアウト (1)
2. DIV を使ったレイアウト (2)
3. DIV を使ったレイアウト (3)
4. DIV を使ったレイアウト (4)
5. DIV を使ったレイアウト (5)
6. DIV を使ったレイアウト (6)
7. DIV を使ったレイアウト (7)
8. DIV を使ったレイアウト (8)
9. DIV を使ったレイアウト (9)
10. DIV を使ったレイアウトサンプル (1)
11. DIV を使ったレイアウトサンプル (2)
12. DIV を使ったレイアウトサンプル (3)

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

1. Bootstrap のサンプル
2. Bootstrap でのフォームのサンプル

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

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ページを作ってみよう

---