【改訂新版】書きながら覚えるHTML＆CSS入門ワークブック

書籍の概要

この本の概要

本書は，コーダー，フロントエンジニアを目指す人向けのHTMLとCSSのコーディング独習書です。

業界を目指すためにはコーディングは必須です。ホームページ時代のタグの記述方法ではなく，これからWeb業界を歩んで行く人たちに正しいコードの書き方，より現在の業界水準にあった正しいコードの書き方が求められています。

実際にコードを書くことで覚えられるようにサンプルをダウンロードで提供します。

こんな方におすすめ

  • HTMLとCSSをイチから学びたい人
  • 本を読むだけじゃなく，実際に手を動かして覚えたい人
  • 最新のWeb標準に沿ったコーディングを学びたい初心者
  • エディタを使いながら，実践的にスキルを身につけたい人
  • プロが使う基本スキルを，わかりやすく学びたい人

本書のサンプル

本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。

サンプル画像1

サンプル画像2

サンプル画像3

サンプル画像4

サンプル画像5

目次

Chapter1　HTMLとCSSを学ぶ準備

  • Lesson1　HTMLとCSSの役割と関係
  • Lesson2　パソコンの設定をする

Chapter2　HTMLとCSSの基本の書き方

  • Lesson1　HTMLの基本
  • Lesson2　CSSの基本
  • Column　なによりも強い !important

Chapter3　テキストとセクショニング

  • Lesson1　テキストのマークアップ
  • Lesson2　テキストのスタイルとWebフォント
  • Column　ウェブフォントのメリットとデメリット
  • Lesson3　リンクの指定とCSS
  • Lesson4　リストと説明リスト
  • Lesson5　区分コンテンツと汎用コンテナ

Chapter4　画像と動画と埋め込み要素

  • Lesson1　画像を表示させる
  • Lesson2　動画を表示させる
  • Lesson3　iframeとメディアの埋め込み

Chapter5　ボックスとスタイル

  • Lesson1　2種類のボックスとボックスモデル
  • Lesson2　ボックスのスペースとボーダー
  • Lesson3　ボックスの背景
  • Lesson4　ボックスのサイズと表示

Chapter6　Fleboxを使ったレイアウト

  • Lesson1　Flexboxレイアウトの基本
  • Lesson2　Flexboxを使ったレイアウト
  • Additional Notes　floatを使った要素の回り込み

Chapter7　Gridを使ったレイアウト

  • Lesson1　Gridレイアウトの基本
  • Lesson2　Gridアイテムのコントロール

Chapter8　positionを使ったレイアウト

  • Lesson1　positionプロパティの使い方
  • Lesson2　z-indexを使った重なり順
  • Lesson3　sticky

Chapter9　テーブル（ 表）

  • Lesson1　表組みをマークアップする
  • Lesson2　セルの結合
  • Column　正しいHTMLとアクセシビリティ

Chapter10　フォーム

  • Lesson1　フォームの仕組み
  • Lesson2　いろいろなinput要素
  • Lesson3　その他のフォーム要素

Chapter11　レスポンシブデザイン

  • Lesson1　レスポンシブデザインとviewport
  • Lesson2　メディアクエリーの使い方
  • Lesson3　画像のレスポンシブ対応

著者プロフィール

松竹えり（まつたけえり）

Web制作全般に携わった後，フロントエンドエンジニアに転向。コーポレートサイト，CMS，Webアプリケーションなど多岐にわたる実装経験を持つ。

フリーランスとして17年間活動し，現在は夫と共にエンジニアリング会社 driveshaft Inc. を経営しながら，Whatever Co. のCo-creatorとして在籍。

フロントエンド開発やディレクションを軸に，執筆・登壇など多方面で活躍。

driveshaft Inc.　https://www.driveshaft.co.jp/

Whatever Co. 　https://whatever.co/