著者紹介

内容

目次

CHAPTER 1 最初に知っておこう！Webサイトの基本と必携ツール 1-1 Webページの仕組み 1-2 HTMLの基礎 1-3 HTMLの属性 1-4 CSSの基礎 1-5 より管理しやすいCSSについて 1-6 JavaScriptの読み込みの仕方 1-7 ブラウザーによる見え方の違い 1-8 デベロッパーツールを使いこなす 1-9 次章以降で学ぶこと CHAPTER 2 「レスポンシブWebデザインとフォント」 2-1 作成するランディングページの紹介 2-2 シングルカラムのレイアウトとは 2-3 全画面背景で目を引くデザインの実現 2-4 フォントの詳しい使い方 2-5 アイコンフォントの使い方 2-6 スマートフォンでの閲覧に対応させる 2-7 ブレークポイントの詳細 2-8 表示領域にピタッと移動する方法 2-9 練習問題 2-10 カスタマイズしよう CHAPTER 3 ブログサイトで学ぶ「装飾とカラムレイアウト」 3-1 作成するブログサイトの紹介 3-2 2カラムのレイアウトを知る 3-3 異なる画面サイズの閲覧に対応させる 3-4 各要素を装飾する①（見出し・画像・ボタン） 3-5 各要素を装飾する②（箇条書きリスト・番号付きリスト） 3-6 各要素を装飾する③（引用文・ページ送り・囲み枠） 3-7 各要素の装飾④（ヘッダー・フッター・ナビゲーション・表・フォーム） 3-8 スクロールに合わせて追従させる 3-9 練習問題 3-10 カスタマイズしよう CHAPTER 4 コーポレートサイトで学ぶ「表組み、フォーム、JavaScript」 4-1 作成するコーポレートサイトの紹介 4-2 枠からはみ出す要素を作る方法 4-3 グラフでもっとわかりやすくする 4-4 画像とテキストを互い違いに表示させる 4-5 表でデータを示す 4-6 タイムラインを表示する 4-7 フォームの装飾 4-8 属性セレクター 4-9 練習問題 4-10 カスタマイズしよう CHAPTER 5 イベントサイトで学ぶ「特定ページの作り方とアニメーション」 5-1 作成するイベントサイトの紹介 5-2 CSSでページ内をスルスル動かす 5-3 ブレンドモードで画像の色を変える 5-4 カスタムプロパティ（変数）を使う 5-5 CSSでアニメーションをつける（トランジション） 5-6 CSSでアニメーションをつける（キーフレーム） 5-7 斜めのラインのデザインを作る 5-8 グラデーションで表現する 5-9 スライドメニューを設置する 5-10 練習問題 5-11 カスタマイズしよう CHAPTER 6 ギャラリーサイトで学ぶ「動画と画像の使い方」 6-1 作成するギャラリーサイトの紹介 6-2 背景に動画を設置する 6-3 画像をレスポンシブに対応させる 6-4 マルチカラムでレイアウトを作る① 6-5 マルチカラムでレイアウトを作る② 6-6 フィルターで画像の色を変える 6-7 カーソルを合わせると画像を拡大する 6-8 要素に影をつける 6-9 ライトボックスで画面いっぱいに表示する 6-10 アニメーションを加える 6-11 ダークモードに対応させる 6-12 練習問題 6-13 カスタマイズしよう CHAPTER 7 HTMLやCSSをより早く、より上手に管理できる方法 7-1 Emmetを使って素早くコーディングする 7-2 calc関数で計算式を書く 7-3 Sassを使って効率を上げる 7-4 VSCodeでSassを利用する 7-5 ネストを使いこなす（Sassの便利な使い方①） 7-6 パーシャルでファイルを分割する（Sassの便利な使い方②） 7-7 スタイルを使い回せるMixin（Sassの便利な使い方③） CHAPTER 8 サイトの投稿と問題解決 8-1 チェックリスト一覧 8-2 エラーメッセージを読み解く 8-3 制作に関する質問ができるサイト