BOOK Studio947
狩野祐東・狩野さやか著書

key

これから本気で学びたい人の最高の教科書
〜レスポンシブWebデザインが“当たり前”の時代の、新しいHTML・CSSの書き方ガイド〜


スマートフォン向けのWebサイトが普及し始めた数年前あたりから、HTML・CSSの書き方は大きく変わりました。使うタグやCSSの機能が大きく変わったわけではありません。スマートフォンとパソコンの両方に対応するためのコーディングをするために、それまでとは違う考え方で、ページを組む必要が出てきたのです。

本書は、HTMLやCSSの正しい書き方を学びながら、現代的なWebページをゼロから構築するのに必要な“考え方”をマスターすることに重点を置いています。レスポンシブデザインフレックスボックスも、デザインを作り込んでいく自然な流れで学ぶことができます。

初心者からプロになりたい人まで、実践的なHTML/CSSテクニック満載でお届けします。

反響多数!

本書の対象読者

  • これからWebサイト制作を学びたい初心者の方
  • 最新のHTML・CSSマークアップを知りたい経験者の方
  • “フレックスボックス使い”になりたい方

CHAPTER 1 Webサイトの仕組みを知ろう

  1. Webサイトが表示される仕組み
  2. URL
  3. Webサイトに使われるファイルの種類
  4. Webサイトのファイル・フォルダ構造
  5. Webサイトの制作環境を整えよう

CHAPTER 2 HTMLの基礎知識とマークアップの実践例

  1. HTMLとは
  2. HTMLの書式
  3. HTMLドキュメントの構造
  4. マークアップの考え方トレーニング

CHAPTER 3 CSSの基礎知識とページデザインの実践例

  1. CSSの基礎知識
  2. CSSの書式
  3. ページにCSSを適用するトレーニング

CHAPTER 4 テキストの装飾

  1. 見出しや本文のフォントサイズを調整する
  2. 読みやすい行間にする
  3. 段落のテキストをリード文だけ太字にする
  4. 表示するフォントを設定する
  5. テキストの行揃えを変更する
  6. 2行目以降を1文字下げる
  7. テキスト色を変更する
  8. 見出しにサブタイトルをつける

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

  1. テキストにリンクを追加する
  2. テキストリンクにCSSを適用する
  3. 画像を表示する
  4. 画像にリンクをつける
  5. 画像にテキストを回り込ませる

CHAPTER 6 ボックスと情報の整理

  1. インラインボックスとブロックボックス
  2. 箇条書き(リスト)のマークアップ
  3. リストを情報の整理に使う
  4. 上手な<div>の使い方
  5. CSSのボックスモデル
  6. パディング、ボーダーの設定
  7. 2つ以上のボックスを並べる
  8. ボックスのデザインを調整する

CHAPTER 7 テーブル

  1. テーブルを作成する
  2. アクセシビリティを考慮したテーブル
  3. テーブルのデザインバリエーション

CHAPTER 8 フォーム

  1. フォームとデータを送受信する仕組み
  2. さまざまなフォーム部品
  3. 標準的なフォームの例

CHAPTER 9 ページ全体のレイアウトとナビゲーション

  1. 実践的なコーディングのために知っておきたいCSSの知識
  2. シングルコラムレイアウト
  3. フレックスボックスを使ったコラムレイアウト
  4. ナビゲーションメニューを作成する

CHAPTER 10 レスポンシブWebデザインのページを作成しよう

  1. レスポンシブWebデザインとは
  2. レスポンシブWebデザインのサイトを作る

サンプル公開中