書籍概要

たった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）

正誤表

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

（2019年3月5日最終更新）

P.88　リスト4-22の5行目と7行目

誤 

<span>（必須）</span>
正 

<strong>（必須）</strong>

（以下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行が不要でした。

商品一覧