初心者からちゃんとしたプロになる HTML+CSS標準入門 改訂2版

構成数 : 1枚

目次

■Lesson1 Webデザインの"いま"
01 「Webデザイン」のこれまでと現在
02 Webサイトは何でできている?
03 Webサイトのベースとなる技術
04 Webページの動的表現を担うJavaScript
05 Webページでのフォントの表示とWebフォント
06 レスポンシブWebデザインの制作手法
07 Webページのレイアウトとその表現手法
08 作業を効率化する技術やツール

■Lesson2 Webサイトを制作する準備
01 WebブラウザにWebサイトが表示される仕組み
02 HTMLファイルはどうやって作るの?
03 コーディングに欠かせないテキストエディタ
04 デベロッパーツールを使いこなそう
05 Webサイトの公開にはサーバーが必要

■Lesson3 HTMLとCSSの基礎
01 HTMLの基本
02 CSSの基本
03 コンテンツモデルとボックスモデル
04 Webページのセクションを作る
05 画像の配置とさまざまな単位
06 メディアクエリでスタイルを切り替える
07 リンクを作る
08 リストを作る
チャレンジしてみよう! ページをマークアップしてみよう

■Lesson4 HTMLとCSSの応用
01 Flexboxによる3カラムのレイアウト
02 背景に関するプロパティを使いこなそう
03 背景画像を使ってメインビジュアルを表示する
04 PC用グローバルナビゲーションをデザインする
05 ハンバーガーメニューを作ろう
06 フッターをデザインする
07 要素を水平方向(横方向)の中央に配置する
08 要素を垂直方向(縦方向)の中央に配置する
09 テーブルをデザインする
10 CSS Gridを使ったレイアウト
11 フォームをデザインする─仕組み編
12 フォームをデザインする─HTML編
13 フォームをデザインする─CSS編
14 簡単なアニメーションを取り入れる
チャレンジしてみよう! FlexboxとCSS Gridでレイアウトしてみよう

■Lesson5 シンプルなWebページを作る
01 制作現場のワークフロー
02 事前準備と完成形の確認
03 HTMLでマークアップしよう
04 CSSを書いてみよう
05 完成と制作のポイント

■Lesson6 シングルページのサイトを作る
01 完成形と全体構造の確認
02 HTMLでページの大枠をマークアップする
03 HTMLで各セクションを作り込む
04 CSSでモバイル用のスタイルを指定する
05 CSSでPC用のスタイルを指定する

■Lesson7 Flexboxを使ったサイトを作る
01 完成形と全体構造を確認しよう
02 HTMLでページの大枠をマークアップする
03 ページの大枠のスタイルを設定する
04 ヘッダーを作り込む(1)モバイル表示
05 ヘッダーを作り込む(2)PC表示
06 メインコンテンツを作り込む(1)
07 メインコンテンツを作り込む(2)
08 フッターを作り込む

■Lesson8 CSS Gridを取り入れる
01 全体構造をつかんで実装方法を検討しよう
02 全体共通のHTML・CSS(1)ページの大枠とCSS Grid
03 全体共通のHTML・CSS(2)ヘッダーとナビゲーション
04 全体共通のHTML・CSS(3)フッター
05 トップページ固有のHTML・CSS
06 Profileページ固有のHTML・CSS
07 Worksページ固有のHTML・CSS

用語索引