目次

表紙
本書について
はじめに
目次
本書の読み方
サンプルファイル／特典について
Chapter1 Webサイト制作の流れを知ろう
Lesson1 Webサイト制作を始める前に知っておきたいこと
Lesson2 Web制作で出てくる言葉との向き合い方
Lesson3 ブラウザーについて知っておこう
Lesson4 Webサイトの目的を考えよう
Chapter2 いまのWebデザインの基本とトレンドを知ろう
Lesson1 本書で制作するWebサイトの構成
Lesson2 Webページの設計図、ワイヤーフレームについて知ろう
Lesson3 Webサイトのデザインの方向性を決めよう
Lesson4 Webページが表示される仕組みを覚えておこう
Lesson5 フォルダとファイルの基本を知ろう
Lesson6 学習に必要なソフトウェアを準備しよう
Chapter3 サイトを形づくるHTMLの基本を学ぼう
Lesson1 HTMLの基本的なルールを知ろう
Lesson2 h1タグで見出しを作ろう
Lesson3 pタグとbrタグで改行と段落を作ろう
Lesson4 blockquoteタグとqタグで引用しよう
Lesson5 strongタグとemタグでテキストに強弱を付けよう
Lesson6 imgタグとfigureタグで画像を表示させよう
Lesson7 aタグでリンクを貼ろう
Lesson8 pictureタグで表示する画像を変えよう
Lesson9 tableタグでシンプルな表を作ろう
Lesson10 formタグでフォームを作ろう
Lesson11 Webページのヘッダーのブロックを作ろう
Lesson12 Webページのナビゲーションのブロックを作ろう
Lesson13 Webページのメインコンテンツのブロックを作ろう
Lesson14 Webページの記事のエリアを作ろう
Lesson15 Webページの補足情報や関連情報のブロックを作ろう
Lesson16 Webページのフッターのブロックを作ろう
Lesson17 そのほか知っておくと便利なタグ
Lesson18 読みやすいコードの書き方を知ろう
Chapter4 サイトを装飾するCSSの基本を学ぼう
Lesson1 CSSの役割とHTMLとの関係を知ろう
Lesson2 CSSファイルを作ってみよう
Lesson3 文字を装飾してみよう
Lesson4 背景をスタイリングしてみよう
Lesson5 表をスタイリングしてみよう
Lesson6 線をスタイリングしてみよう
Lesson7 余白を作ってみよう
Lesson8 箇条書きマーカーをスタイリングしてみよう
Lesson9 リンクテキストをスタイリングしてみよう
Lesson10 ボタンをスタイリングしてみよう
Lesson11 CSSでボタンのレイアウトを整えよう
Lesson12 画像を枠にあわせて表示しよう
Lesson13 画像にエフェクトを適用しよう
Lesson14 タイトルとメニューだけ固定しよう
Lesson15 フレックスボックスレイアウトで要素を並べよう
Lesson16 グリッドレイアウトで要素を整然と配置しよう
Lesson17 レスポンシブに対応させよう
Lesson18 CSSアニメーションの基本を知ろう
Lesson19 いろいろなセレクタを使ってみよう
Chapter5 シンプルかわいいポートフォリオサイトを作ろう
Lesson1 まずはこれから作るサイトを知ろう
Lesson2 最初の準備をしよう
Lesson3 HTMLでページの枠組みを作ろう
Lesson4 HTMLでヘッダーとメインの枠組みを作ろう
Lesson5 「About」と「Profile」の中身を作ろう
Lesson6 「Works」のセクションを作ろう
Lesson7 「News」のセクションを作ろう
Lesson8 「Contact」のセクションを作ろう
Lesson9 フッターを作ろう
Lesson10 CSSでページ全体の共通部分を作ろう
Lesson11 CSSネストを使おう
Lesson12 ヘッダーのナビゲーションを見やすく横並びにしよう
Lesson13 「About」セクションをデザインしよう
Lesson14 「Profile」セクションをデザインしよう
Lesson15 「Works」セクションをデザインしよう
Lesson16 「News」セクションをデザインしよう
Lesson17 「Contact」セクションをデザインしよう
Lesson18 フッターをデザインしてサイトを完成させよう
Lesson19 アクセシビリティを考えよう
Chapter6 華やかなショッピングサイトを作ろう
Lesson1 まずはこれから作る複数カラムのサイトを知ろう
Lesson2 サイト全体に共通するCSSを設定しよう
Lesson3 複数のCSSファイルを効率よく扱おう
Lesson4 Webサイトの枠組み部分を作ろう
Lesson5 ヘッダーのタイトルロゴとナビゲーションを作ろう
Lesson6 フッターを作ろう
Lesson7 トップページのメインエリアの余白と表示領域を設定しよう
Lesson8 メイン部分を組み立てよう
Lesson9 商品一覧セクションの枠組みを作ろう
Lesson10 商品一覧のお知らせを作ろう
Lesson11 「商品一覧」を作ろう
Lesson12 カード型コンテンツをスタイリングしよう
Lesson13 商品一覧をグリッドレイアウトにしよう
Lesson14 サイドバーのメニューを作ろう
Lesson15 Photogramセクションを作ろう
索引
奥付