HTML 入門
HTML 入門:目次
-
Webページ作成はじめの一歩
- 拡張子を表示する
- フォルダとindex.htmlを作成する
- テキストエディタ(メモ帳)で編集する
- ブラウザで表示する
- ゼミサーバにアップロードする
- Visual Studio Code を使う
- Visual Studio Code の Live Server を使う
- Web ページ閲覧方法の違いを理解する
-
HTML の基礎をマスターしよう
- HTML の雛形
- タグの基礎知識
- インデント
- コメント
-
基本的なタグをマスターしよう
- 段落を作る
- 改行する
- 見出しを設定する
- 箇条書きを作る
- 表を配置する
- 画像を配置する
- リンクを設定する
- 特殊文字を表示する
-
HTML 文書を検証しよう
- HTML 文書を準備する
- Nu HTML Checker で HTML 文書を検証する
- Visual Studio Code で HTML 文書を検証する
- コンテンツカテゴリを理解する
-
文書の構造を作ろう
- div と span を使う(ブロックボックスとインラインボックス)
- header,main,footer を使い分ける
- nav を使う
- section と article を使う
-
スタイルシートでデザインを作ろう
- CSS ファイルを準備して読み込む
- 表示を確認する
- CSS にデザインを記述する
- 複数のセレクタに適用する
- クラスを使う
- 色の設定方法を理解する
- width と height を使う
- border を使う
- padding を設定する
- margin を設定する
- 文字のスタイルを調整する
- 行間を調整する
- 背景色や背景画像を設定する
- リンクのデザインを設定する
- 表のデザインを設定する
- 図のデザインを設定する
- HTML内にスタイルを記述する
-
フォームを使ってみよう
- テキストコントロールとボタン
- テキストエリア
- チェックボックスとラジオボタン
- 選択リスト
Bootstrap によるレスポンシブ Web デザイン
- Bootstrap のサンプル
- 雛形を作る
- コンテナを配置する
- コンテンツの幅を設定する
- グリッドシステムを理解する
- 表を配置する
- ボーダーを設定する
- レスポンシブイメージを配置する
- カルーセルを配置する
- ナビバーを配置する
- カードを配置する
- ディスプレイプロパティを設定する
- リストグループを使う
- フォームを使う
テキストエディタの設定と使い方
- Visual Studio Code
- Visual Studio Code とは
- Visual Studio Code のダウンロードとインストール
- Visual Studio Code の設定
- Visual Studio Code の使い方
- Visual Studio Code のおすすめ設定
- Visual Studio Code のショートカットキー
- Visual Studio Code の便利な拡張機能
- Visual Studio Code 以外のテキストエディタ
- Atom
Google Fonts の使い方
- Google Fonts の使い方
- ページの雛形を作る
- フォントを選ぶ
- スタイルシートを読み込み,スタイルを設定する
- 複数のフォントを利用する
スマートフォンでのWebページ作成
- スマートフォンでWebページを作ってみよう
参考サイト
- 参考サイト