書籍概要

たった1日で基本が身に付く!

たった1日で基本が身に付く!
HTML&CSS超入門

著者
発売日
更新日

概要

HTMLとCSSが1日で学べるように,初心者に必要な知識を凝縮しました。HTML&CSSの学習では,手を動かすこと,が一番の近道です。本書ではWebサイトを実際に作りながら,HTMLの基本構造から基本的なタグ,CSSによるフロートレイアウト・ポジションレイアウトまでを学んでいきます。また,今後の必須スキルであるレスポンシブ対応までしっかり解説。この1冊で,今後スキルを高めていくうえでベースとなる知識が身に付きます。

※最新のHTML5に対応

こんな方におすすめ

  • HTML&CSSをこれから学びたい人
  • HTML&CSSを再入門したい人

目次

CHAPTER 1 Webサイト作成の準備をしよう

  • SECTION 01 Webサイトの基本的な仕組みを理解しよう
  • SECTION 02 Webサイト作成の流れを把握しよう
  • SECTION 03 Webサイト作成に必要なものを知ろう
  • SECTION 04 制作環境を整えよう
  • SECTION 05 ファイルの拡張子を表示しよう

CHAPTER 2 HTMLの基本を学ぼう

  • SECTION 01 HTMLってなんだろう?
  • SECTION 02 HTMLの基本構造を学ぼう
  • SECTION 03 HTMLを書いてみよう
  • SECTION 04 サイト構造とパスを理解しよう
  • SECTION 05 HTMLのバージョンによる書式の違いを確認しよう

CHAPTER 3 HTMLでテンプレートページを作成しよう

  • SECTION 01 Webページの骨組みを作成しよう
  • SECTION 02 セマンティックWebを意識して書こう
  • SECTION 03 ヘッダーを作成しよう
  • SECTION 04 メインエリアを作成しよう
  • SECTION 05 フッターを作成しよう

CHAPTER 4 HTMLで個別ぺージを作成しよう

  • SECTION 01 トップページを作成しよう
  • SECTION 02 店舗紹介ページを作成しよう
  • SECTION 03 アクセスページを作成しよう
  • SECTION 04 お問い合わせページを作成しよう

CHAPTER 5 CSSの基本を学ぼう

  • SECTION 01 CSSの概要を知ろう
  • SECTION 02 CSSをHTMLに適用する3種類の方法を知ろう
  • SECTION 03 セレクタの種類を知ろう
  • SECTION 04 スタイルの継承を理解しよう
  • SECTION 05 スタイルの競合を理解しよう
  • SECTION 06 ボックスモデルを押さえておこう
  • SECTION 07 色の指定方法を知ろう
  • SECTION 08 テキストやフォントに関するプロパティを知ろう

CHAPTER 6 段組みレイアウトに挑戦しよう

  • SECTION 01 段組みレイアウトを知ろう
  • SECTION 02 ブロックレベル要素とインライン要素の性質を知ろう
  • SECTION 03 フロートレイアウトの基本を学ぼう
  • SECTION 04 ポジションレイアウトの基本を学ぼう

CHAPTER 7 CSSでWebページをデザインしよう

  • SECTION 01 ページ共通のスタイルを指定しよう
  • SECTION 02 ヘッダーをデザインしよう
  • SECTION 03 フッターをデザインしよう
  • SECTION 04 メインエリアをデザインしよう
  • SECTION 05 トップページをデザインしよう
  • SECTION 06 店舗紹介ページをデザインしよう
  • SECTION 07 お問い合わせページをデザインしよう

CHAPTER 8 Webサイトを公開しよう

  • SECTION 01 スマートフォンに対応させよう
  • SECTION 02 Webサイトを公開しよう

サポート

ダウンロード

(2017年7月20日更新)

本書のサンプルファイルをダウンロードできます。

サンプルファイルのご利用方法は本書P.003,「サンプルファイルのダウンロード」をご覧ください。

なお,サンプルファイルの一部に不備がありましたので,サンプルファイルを修正しました。2017年7月19日以前にダウンロードされた方は,お手数ですが再度ダウンロードし直してください。

ダウンロード
サンプルファイル(htmlcss_sample_0720.zip)

正誤表

本書の以下の部分に誤りがありました。ここに訂正するとともに,ご迷惑をおかけしたことを深くお詫び申し上げます。

(2018年4月23日最終更新)

P.97 リスト5-12 最終行

.hightlight
.highlight

P.98 図5-6の下の本文 3行目

hightlight
highlight

(以下2017年7月20日更新)

P.182 リスト7-38


.lead2 {
  line-height: 2em;
  text-align: center;
}
.box {
  width: 300px;
  margin-right: 20px;
  float: left;
}
.box:last-child { /* 最後の.box */
  margin-right: 0;
}


.box {
  width: 300px;
  margin-right: 20px;
  float: left;
}
.box:last-child { /* 最後の.box */
  margin-right: 0;
}

最初の4行が不要でした。

商品一覧