よくわかるHTML5+CSS3の教科書【第3版】

  • 著作者名:大藤幹
    • 書籍:3,024円
    • 電子版:3,024円
  • B5変:336ページ
  • ISBN:978-4-8399-6547-1
  • 発売日:2018年12月03日
  • 備考:入門
  • mixiチェック
  • このエントリーをはてなブックマークに追加

内容紹介

いちばんわかりやすいHTML+CSSの教科書が、最新トピックをカバー!

************************************************************
---
すらすら読めて、「わかった」を積み重ねる。
「Webの知識がこれから必要」で、「将来にわたって長く使える基礎力をつけたい」人のためのHTML5+CSS3本。
---

本書は、“楽しみながら学べる”HTMLとCSSの入門書です。2018/10現在で最新バージョンのHTML5.2(2017/12勧告)とCSS3をベースとした内容となっています。

本書では、読者が“楽しみながら学べる”ということを実現するために、本書の全体的な構成を工夫しています。先にHTMLを学習してからそれを前提としてCSSを学ぶ、という流れにしてしまうと、前半はHTMLのタグを覚えていくだけの退屈な内容になってしまうからです。

そこで本書では、HTMLをひととおり学習してからCSSへと進むという構成ではなく、HTMLとCSSを少しずつ同時進行させる構成にしてあります。このような進め方にすると、覚えた内容をすぐにブラウザでの表示結果として確認できるため、少しずつできるようになっていく感覚を積み重ねながら、退屈せずに学習を進めることができます。

“楽しみながら学べる”といっても、本書の解説は、表面的に「ページが作れればそれでいい」というものではありません。仕様にしっかりと準拠した使い方で、正しく、かつアクセシビリティに配慮したページを作れるように、サンプルを組み立てています。


まず1章、2章では、インターネットやHTML、CSSについての基本的な解説をしながら、少しだけHTML/CSSを使ってみて、これからの学習にむけての準備をします。

3章では、HTMLやCSSを正しく使うために必要な「カタい文法」の話を学習して、基礎を固めます。

4章からは、いよいよページを作っていきます。4章でページ全体の枠組みを作り、5章でテキストや色の指定について学びます。

6章ではセレクタについて詳しく学習し、CSSでの細かな指定ができるようにします。

7章では画像や動画、音声、背景といったページ内の構造について、8章ではナビゲーション、9章ではフォームやテーブルについての設定方法を学びます。

10章では、ここまで登場していない要素についての設定方法や、配置のテクニックを学びます。第3版では、スマートフォン(スマホ)画面への対応について、詳しい解説を追加しました。

11章を、フレキシブルボックスレイアウトとグリッドレイアウトについて解説する章に変更しました(第3版での変更)。これら2つレイアウト方法の基礎になる部分を身に付けられるようにやさしく解説します。

最後の12章では、それまで学習したことをベースに、1つのページを制作していきます。スマホ、タブレット、PCそれぞれのレイアウトの作り分けを行います(第3版での変更)。ページの制作を、流れで実際に行ってみることで、本書の学習の仕上げを行うことができます。

本書を、これからHTMLとCSSを覚える人が“楽しみながら学ぶ”ための入門書としてご活用いただけましたら幸いです。


■第2版からの変更点

・ 第2版は、2014年3月段階の情報に基づき執筆されました。第3版では、2018年9月段階での情報に基づいて執筆しています。
・ 仕様の変化に応じて、解説やコードを追加・変更・削除しています。ただし、本書の解説の範囲から外れている仕様の内容については説明がないものもあります。
・ HTMLは2017年12月に勧告されたHTML5.2に変更しています。
・ CSSはCSS2.1およびCSS3より、現時点で安定して使用できると判断した内容を使っています。
・ 10章にて、スマートフォンへの対応を解説する節を追加しました。
・ 11章を、フレキシブルボックスレイアウトとグリッドレイアウトについて解説する章に変更しました。
・ 12章にて、ページをスマートフォン、タブレット、PCそれぞれに対応させる内容に変更しました。
************************************************************ "

商品を選択する

フォーマット 価格 備考
書籍 3,024
PDF 3,024 ※ご購入後、「マイページ」からファイルをダウンロードしてください。
※ご購入された電子書籍には、購入者情報、および暗号化したコードが埋め込まれております。
※購入者の個人的な利用目的以外での電子書籍の複製を禁じております。無断で複製・掲載および販売を行った場合、法律により罰せられる可能性もございますので、ご遠慮ください。

電子書籍フォーマットについて

  

備考

大藤 幹(おおふじ みき)

1級ウェブデザイン技能士。大学卒業後、複数のソフトハウスに勤務し、CADアプリケーション、航空関連システム、医療関連システム、マルチメディアタイトルなどの開発に携わる。1996年よりWebの基本技術に関する書籍の執筆を開始し、2000年に独立。
その後、ウェブコンテンツJIS(JIS X 8341-3)ワーキング・グループ主査、情報通信アクセス協議会・ウェブアクセシビリティ作業部会委員、ウェブデザイン技能検定特別委員、技能五輪全国大会ウェブデザイン職種競技委員などを務める。現在の主な業務は、Webデザインに関連する書籍の執筆のほか、全国各地での講演・セミナー講師など。2015年3月より名古屋在住。
著書は『HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 Ver2.0対応版』『Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻』『世界の「最先端」事例に学ぶ CSSプロフェッショナル・スタイル』(マイナビ)、『TECHNICAL MASTERはじめてのHTML+CSS HTML5対応』『詳解HTML5.1&HTML4.01&XHTML1.0辞典』『詳解HTML&CSS&JavaScript辞典』(秀和システム)、『10日でおぼえる CSS/CSS3入門教室』(翔泳社)、『わかりやすい「WAI-ARIA 1.0」 仕様解説書』(Kindle用電子書籍)など50冊を超える。 "

関連ページ

目次

Chapter 1 はじめる準備
Chapter 1-1 インターネットとサーバーについて
  インターネットの仕組み
  「インターネットにWebページを公開する」とは
  Webページを入れる場所に注意
Chapter 1-2 本書で使用するソフトウェアについて
  テキストエディタ
  ブラウザ
  FTPクライアント
Chapter 2 オリエンテーション
Chapter 2-1 HTMLの役割、CSSの役割
  HTMLってどんなモノ?
  CSSってどんなモノ?
Chapter 2-2 HTMLのタグをつけてみよう
  テキストを「大見出し」と「段落」に分ける
  タグを英語にする
  さらにタグを短くする
  ページ全体の枠組みを作る
Chapter 2-3 CSSを使ってみよう!
  CSSファイルを読み込ませる
  読み込ませたCSSの内容を確認する
  CSSを書き換えてみる
Chapter 3 文法的なカタい話
Chapter 3-1 HTMLのタグを正しくつける意味
  CSSを独立させるメリット
  HTMLのタグを正しくつけるメリット
  正しいHTMLは万能データ
Chapter 3-2 HTMLの基礎知識
  HTMLの専門用語
  属性とは?
  半角スペース・改行・タブの表示
  特別な書き方が必要となる文字
  コメントの書き方
Chapter 3-3 HTMLのバージョンについて
  HTML4.01とXHTML1.0
  HTML5
  COLUMN 大文字と小文字の区別
Chapter 3-4 CSSの基礎知識
  CSSの専門用語
  書き方のルール
  コメントの書き方
Chapter 3-5 CSSのバージョンについて
  現在使用されているのはCSS2.1とCSS3の一部
Chapter 4 ページ全体の枠組み
Chapter 4-1 HTMLの全体構造
  <!DOCTYPE html>
  html要素
  COLUMN HTML4.01とXHTML1.0のDOCTYPE宣言
  head要素とbody要素
  title要素
  meta要素
Chapter 4-2 CSSの組み込み方
  link要素
  COLUMN CSSファイルの文字コードの指定方法
  style要素
  style属性
  COLUMN CSSの中にさらに別のCSSを読み込む
Chapter 4-3 グローバル属性
 使用頻度の高いグローバル属性
  id属性
  class属性
  title属性
  lang属性
  id属性
Chapter 4-4 背景を指定する(1)
  background-colorプロパティ
  background-imageプロパティ
  COLUMN 背景画像のURLについて
  background-repeatプロパティ
Chapter 5 テキスト
Chapter 5-1 テキスト関連の要素
  要素の分類
従来のブロックレベル要素に該当する要素
  従来のインライン要素に該当する要素(1)
  従来のインライン要素に該当する要素(2)
  リンク
  COLUMN ページ内の特定の場所にリンクする
  ルビ
Chapter 5-2 色の指定方法
  色の値の指定形式
  色に関連するプロパティ
Chapter 5-3 テキスト関連のプロパティ
  フォント関連プロパティ
  COLUMN 値の継承について
  フォント関連の値をまとめて指定する
  テキスト関連プロパティ
  縦書き用プロパティ
Chapter 6 CSSの適用先の指定方法
Chapter 6-1 よく使う主要なセレクタ
  タイプセレクタ
  ユニバーサルセレクタ
  クラスセレクタ
  IDセレクタ
  疑似クラス
  結合子
Chapter 6-2 その他のセレクタ
  属性セレクタ
  その他の疑似クラス
  疑似要素
  その他の結合子
Chapter 6-3 セレクタの組み合わせ方
  セレクタの基本単位
Chapter 6-4 指定が競合した場合の優先順位
  優先順位の決定方法
  COLUMN「 !important」はユーザースタイルシートでも使用できる
  セレクタからの優先度の計算方法
Chapter 7 ページ内の構造
Chapter 7-1 基本構造を示す要素
 セクションについて
  見出しでセクションの範囲と階層を判断するためのルール
 セクションをあらわす要素
基本構造を示すその他の要素
  main要素
  header要素
  footer要素
  address要素
Chapter 7-2 画像・動画・音声関連要素
 画像
  img要素
  alt属性について
 動画と音声
  video要素とaudio要素
  source要素117
Chapter 7-3 ボックス関連プロパティ
 ボックスとは?
  ボックスの構造
  ボックスの初期状態
 マージン
  marginプロパティの指定方法
  マージンが隣接している場合の注意
 パディング
 ボーダー
  ボーダーの線種の初期値に注意
  ボーダーの表示例
 幅と高さ
  パーセンテージで高さを指定する場合の注意
  COLUMN widthとheightの発音
 角を丸くする
Chapter 7-4 背景を指定する(2)
 背景画像の表示位置を指定する
  表示位置の基準
  背景画像の表示例
 背景画像をウィンドウに固定する
  背景画像の固定の表示例
  COLUMN 数値が0のときは単位を省略できる
 背景画像の表示サイズを変更する
 複数の背景画像を指定する
 背景関連プロパティの一括指定
  backgroundの値を指定する際の注意事項
Chapter 7-5 配置方法を指定するプロパティ
 フロートの基本
  フロートの解除
 フロートによる2段組みレイアウト
  段にする範囲をグループ化する
floatプロパティを指定する
  段にしないところの段組みを解除する
 フロートによる3段組みレイアウト(1)
 フロートによる3段組みレイアウト(2)
  2段組みの中に2段組みをつくる
  段の高さを揃える
 相対配置と絶対配置
  相対配置と絶対配置の表示例
  COLUMN 絶対配置による段組み
 インライン要素の縦位置の指定
  インライン要素の「ディセンダ」に注意
  vertical-alignプロパティ
  COLUMN 文字コードを指定しているのに文字化けする!?
Chapter 8 ナビゲーション
Chapter 8-1 ナビゲーションに関連する要素172
 ナビゲーションのセクション
 リスト関連の要素
  3種類のリスト要素
  ul要素とol要素の子要素
 用語説明型のリスト
  COLUMN dl要素はもともとは「定義リスト」だった!?
Chapter 8-2 リスト関連のプロパティ ・
 行頭記号を変える
 行頭記号を画像にする
 行頭記号の表示位置を設定する
 リスト関連プロパティの一括指定
Chapter 8-3 表示形式を変えるプロパティ
 表示形式を変更する
  displayプロパティの使用例
 見えない状態にする
  visibilityプロパティの使用例
 はみ出る部分の表示方法を設定
Chapter 8-4 ナビゲーションの作り方
 ナビゲーションのマークアップ
 リストの項目を横に並べる
 リンクの範囲を確認する
 リンクの範囲を拡張する
 表示を調整する
 カーソルが上にあるときの処理
Chapter 9 フォームとテーブル
Chapter 9-1 フォーム関連の要素
 フォーム全体を囲む要素
 入力欄やボタンを生成する要素
  input要素の使用例
  COLUMN 仕様上はもっと多くの部品が用意されている!?
 複数行のテキスト用の入力欄
 要素内容をラベルとして表示するボタン
 メニューを構成する要素
 フォーム部品とテキストを関連づける要素
  label要素の使い方
 フォーム部品などをグループ化する要素
Chapter 9-2 フォーム関連のプロパティ
 リサイズ可能にする
 ボックスに影をつける
 アウトライン
Chapter 9-3 テーブル関連の要素
 テーブルを構成する要素
  table要素
  th要素とtd要素
  セルを連結させる
  テーブルにキャプションをつける
  表の横列をグループ化する
Chapter 9-4 テーブル関連のプロパティ
 隣接するボーダーを1本の線にする
 キャプションをテーブルの下に表示させる
Chapter 10 その他の機能とテクニック
Chapter 10-1 その他の要素
 主題の変わり目
 追加と削除
 スクリプト ・
  スクリプトが動作しない環境向けには
 インラインフレーム
Chapter 10-2 その他のプロパティ
 width・heightプロパティの適用範囲の変更
 コンテンツの追加
 引用符の設定
Chapter 10-3 clearfix について
 フロートで不都合なこと
  フロートを指定した要素は親要素からはみ出す
clearプロパティを使用した場合の不都合
 フロートの不都合を解消する(1)
 フロートの不都合を解消する(2)
  clearfixの原型
  現在のclearfixのコード
Chapter 10-4 メディアクエリー
 メディアクエリーとは?
  CSS3での拡張点
 メディアクエリーの書き方
  出力媒体の指定
 @mediaについて
Chapter 10-5 スマートフォンの画面に対応させる
 Webページが小さく表示される理由とその対処法
  同じサンプルをスマートフォンで表示させるとどうなるか
  スマートフォンでは幅980ピクセル分が縮小表示される
  縮小しないで実サイズで表示させる方法
 出力先に合わせて異なるサイズの画像を表示させる方法
  スマートフォンでの画像表示の確認
  ピクセル密度に合った画像だけを読み込ませる方法
  ピクセル密度ではなく画像サイズを指定する方法
  COLUMN sizes属性の指定方法

この商品を買った人はこんな商品も買っています


最近チェックした商品

Tポイント利用手続き

         Tポイント利用手続きに関する同意事項

                                株式会社マイナビ出版

株式会社マイナビ出版が提供するマイナビBOOKSにおいてTポイントご利用続きをされる方は、以下に掲げるお客様の個人情報の取り扱いについてご確認の上、ご同意下さい。

マイナビBOOKSにおいてTポイントサービスをご利用いただいた場合に、当社から、次に掲げる<提供情報>を、<提供目的>のためにカルチュア・コンビニエンス・クラブ株式会社(以下「CCC」といいます)へ提供します。

  <提供目的>:CCCの定める個人情報保護方針及びマイナビBOOKSにおけるT会員規約第4条に定める利用目的で利用するためTポイントサービスを利用するため
  <提供情報>:
   1)お客様が【マイナビBOOKS】の正当な利用者であるという情報
   2)ポイント数・利用日
   3)その他、Tポイントサービスを利用するにあたり必要な情報

  <提供方法>: 電磁的記録媒体の送付またはデータ通信による。ただし、提供するデータについては暗号化を施すものとする。

なお、CCCに提供された、以下の情報の利用については、CCCの定める個人情報保護方針及びT会員規約 に沿って取り扱われます。
上記の情報提供の停止をご希望される場合には、【マイナビBOOKS】におけるTポイント利用手続きの解除を実施していただく必要があります。
Tポイント利用手続きの解除、およびTポイントサービスにおける個人情報に関するお問い合わせ先は、以下のとおりです。
お客様お問い合わせ先:Tサイト(http://qa.tsite.jp/faq/show/22612)

 なお、Tポイント利用手続きの解除が完了しますと、マイナビBOOKSにおけるTポイントサービスをご利用いただけなくなりますので、予めご了承ください。

Tポイント利用手続きを行いますか?