ゼロからわかるシリーズゼロからわかる
HTML & CSS 超入門
[HTML5 & CSS3対応版]

[表紙]ゼロからわかる HTM

B5判/192ページ/CD1枚

定価(本体1,980円+税)

ISBN 978-4-7741-9371-7

電子版
  • 電子化の予定があります

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

本書はwebサイトを制作してみたいが,何からはじめたらよいか分からない初心者を対象にwebサイト制作の流れや,webサイト制作に必要な基礎知識をわかりやすい言葉で解説しています。本書に掲載しているサンプルを作成することでHTMLの記述方法や,CSSを使ったスタイルの定義など,webサイト制作に必要な基本操作が体験しながら学べます。

こんな方におすすめ

  • HTMLとCSSをマスターしたい人

目次

CHAPTER 1 webページの制作

  • 1-1 webページとHTML
  • 1-1-1 webページとwebサイト
  • 1-1-2 HTMLとは
  • 1-1-3 HTMLを確認する
  • 1-2 webサイトの制作
  • 1-2-1 webサイト制作の流れ
  • 1-2-2 webサイトの制作に必要なもの
  • 1-3 制作の準備
  • 1-3-1 Windows版Bracketsのインストール
  • 1-3-2 macOS版Bracketsのインストール
  • 1-3-3 Brackets拡張機能のインストール
  • 1-3-4 Windows版Google Chromeのインストール
  • 1-3-5 macOS版Google Chromeのインストール
  • 練習問題

CHAPTER 2 HTMLの基礎知識

  • 2-1 HTML文書の作成
  • 2-1-1 HTML文書とは
  • 2-1-2 Bracketsの起動
  • 2-1-3 新規ファイルの作成と保存
  • 2-2 ソースコードの入力
  • 2-2-1 基本のソースコードの入力
  • 2-2-2 文書情報の入力
  • 2-3 基本の要素と記述のルール
  • 2-3-1 基本要素の入力
  • 2-3-2 要素(element)とタグ(tag)
  • 2-3-3 要素記述時のルール
  • 2-3-4 属性(Attributes)の追加
  • 2-4 HTML文書の閲覧
  • 2-4-1 表示の確認
  • 練習問題

CHAPTER 3 よく使う要素の設定

  • 3-1 文字データの準備
  • 3-1-1 原稿の挿入
  • 3-2 見出し・リスト・段落要素の設定
  • 3-2-1 見出しをあらわすh1,h2,h3,h4,h5,h6要素の設定
  • 3-2-2 リストをあらわすul要素、ol要素、項目をあらわすli要素の設定
  • 3-2-3 段落をあらわすp要素の設定
  • 3-3 テキストに関連した要素の設定
  • 3-3-1 改行をあらわすbr要素の設定
  • 3-3-2 空要素について
  • 3-3-3 重要性をあらわすstrong要素、強調をあらわすem要素の設定
  • 3-3-4 要素の親子関係
  • 3-3-5 警告や著作権など細則をあらわすsmall要素の設定
  • 3-3-6 コメントの入力
  • 練習問題

CHAPTER 4 画像の表示とリンクの設定

  • 4-1 画像の表示
  • 4-1-1 使用できる画像の種類
  • 4-1-2 画像をあらわすimg要素の設定
  • 4-2 リンクの設定
  • 4-2-1 リンクをあらわすa要素の設定
  • 4-2-2 相対パスと絶対パス
  • 4-2-3 ファイルのURLの記述方法
  • 練習問題

CHAPTER 5 内容の組み立てと正しいコードの記述

  • 5-1 内容を組み立てるための要素
  • 5-1-1 内容を組み立てるための要素
  • 5-1-2 内容を組み立てる要素の設定
  • 5-2 要素の区別
  • 5-2-1 要素を区別する方法
  • 5-2-2 要素とカテゴリー
  • 5-2-3 コンテンツ・モデルとは
  • 練習問題

CHAPTER 6 HTMLファイルの複製と編集

  • 6-1 HTMLファイルの複製
  • 6-1-1 テンプレートの作成
  • 6-2 テンプレートを利用したファイルの作成
  • 6-2-1 新しいHTMLファイルの作成
  • 6-2-2 HTML文書([fruit.html]ファイル)の編集
  • 6-2-3 内容を区別するための要素の設定
  • 練習問題

CHAPTER 7 表の作成とビデオの表示

  • 7-1 表の作成
  • 7-1-1 表をあらわすtable要素の設定
  • 7-1-2 HTML文書([about.html]ファイル)の編集
  • 7-2 ビデオの表示
  • 7-2-1 ビデオを挿入するvideo要素の設定
  • 7-2-2 動画共有サイトのビデオを利用するには(参考)
  • 練習問題

CHAPTER 8 CSSの基礎知識

  • 8-1 CSSの基礎知識
  • 8-1-1 CSSとは
  • 8-1-2 スタイルの記述場所
  • 8-2 スタイルの記述方法
  • 8-2-1 スタイルの基本書式
  • 8-2-2 セレクタの記述方法
  • 8-3 CSSファイルの作成とスタイルの記述
  • 8-3-1 CSSファイルの作成
  • 8-3-2 スタイルの記述
  • 8-4 CSSファイルの関連付け
  • 8-4-1 ファイルの関連付けをあらわすlink要素
  • 8-4-2 link要素によるCSSファイルの関連付け
  • 8-4-3 スタイルが反映されない時の対処方法
  • 練習問題

CHAPTER 9 文字のスタイルの記述

  • 9-1 フォントのスタイル
  • 9-1-1 フォントに関するプロパティ
  • 9-1-2 フォントに関するスタイルの設定
  • 9-2 テキストのスタイル
  • 9-2-1 テキストに関するプロパティ
  • 9-2-2 テキストに関するスタイルの設定
  • 9-3 テキストのカラーと透明度のスタイル
  • 9-3-1 カラーに関するプロパティ
  • 9-3-2 カラーの記述方法について
  • 9-3-3 テキストのカラーに関するスタイルの設定
  • 練習問題

CHAPTER 10 背景やボーダーのスタイルの記述

  • 10-1 背景とボーダーのスタイル
  • 10-1-1 ボーダーに関するプロパティ
  • 10-1-2 背景に関するプロパティ
  • 10-1-3 ボーダーと背景に関するスタイルの設定
  • 10-2 ボックスのスタイル
  • 10-2-1 ボックスについて
  • 10-2-2 ボックスに関するプロパティ
  • 10-2-3 プロパティの簡略化
  • 10-2-4 ボックスに関するスタイルの設定
  • 10-3 ほかのファイルの関連付け
  • 10-3-1 CSSファイルの関連付け
  • 練習問題

CHAPTER 11 見栄えを整えるスタイルの記述

  • 11-1 テーブルのスタイル
  • 11-1-1 テーブルに関するプロパティ
  • 11-1-2 テーブルにスタイルを設定する
  • 11-2 フレキシブルボックスレイアウトのスタイル
  • 11-2-1 フレキシブルボックスレイアウトとは
  • 11-2-2 フレキシブルボックスレイアウトに関するプロパティ
  • 11-2-3 フレキシブルボックスレイアウトに関するスタイルの設定
  • 11-3 リストやナビゲーションのスタイル
  • 11-3-1 リストに関するプロパティ
  • 11-3-2 ナビゲーションに関するスタイル
  • 11-3-3 トランジションに関するプロパティ
  • 11-3-4 リストとナビゲーションに関するスタイルの設定
  • 練習問題

著者プロフィール

太木裕子(おおきひろこ)

京都造形芸術大学 准教授
1989年よりトレーナーとして活動。様々なコースのトレーナーをつとめつつ,ライターとしてOSやアプリケーションの解説本を多数執筆する。現在は京都造形芸術大学でグラフィックデザインやUIデザイン,色彩学などの研究を行っている。