SBクリエイティブ

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

Mana:著者

【全国の書店員さんがオススメする本(2021年度 CPU大賞)第1位受賞!】
【前人未到、2冊連続で書店員さんから大賞に選ばれる快挙!】

圧倒的な支持!シリーズ27万部突破の大ヒット!
Web制作に必要な一歩進んだWebサイト制作の知識が一気に学べる!

—————————————————————————-
Web界隈やデザイナーに大人気!
Web関連の情報やデザインについて記事が学べる『Webクリエイターボックス』の管理人、
Manaによる渾身のHTML & CSSとWebデザインの実践知識が一気に学べる本
—————————————————————————-

ほんの一手間で劇的に変わる!
一歩進んだWebサイト制作の知識が一気に学べる!

・5つのサイトから学べる!今のWebサイトを作る最新の技術群
・自由な表現ができる!手描き、斜め、グラデーション、あらゆる装飾の作り方
・今日から使える!表とグラフ、アニメーションなど、JavaScriptライブラリ
・動画、カスタム変数、Emmet、Sass、問題解決の知識まで

WebクリエイターボックスのManaが教える
Webサイト制作の実践&旬のスキル。
思い描いているものを形にできる魔法の1行が必ず見つかる!

コードも、デザインも、時短術も、全部学べる!

●本書の対象読者
・HTMLとCSSの基礎学習までを終えた人
・Webサイト制作のワンランク上のスキルを学びたい人
・自由な装飾表現を用いてWebデザインを作りたい人
・アニメーションなど動きがあるサイトを作りたい人
・練習問題やお題に挑戦し、成果を皆と共有したい人
・効率よくコードを記述できる方法を知りたい人
・独学で困った際などの問題解決法を学びたい人

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 制作に関する質問ができるサイト

定価:2,728円(本体2,480円+10%税)

書籍情報

  • 発売日:2021年2月20日(土)
  • ISBN:978-4-8156-0614-5
  • サイズ:B5変
  • ページ数:352
  • 付録:-
  • Manaが書いたやさしい実践の学習書

    大人気ブログ「Webクリエイターボックス」の管理人、Manaが書いたWebサイト制作の実践の学習書です。ずっと役立つ情報をわかりやすく書いていたから、少し高度な内容になっても説明がやさしくスッと頭に入ってきます。

  • 5つのサイトから学べる役立つの知識

    本書は完成している5つのWebサイトを見ながら、そこで使われている1つひとつのテクニックをひも解き学んでいくスタイルです。HTMLとCSSの基礎は学んだ人たちの次のステップにピッタリの内容になっています。

  • 今日から使える最新の実践スキル

    デベロッパーツール、疑似要素、表、グラフ、JavaScriptライブラリ、動画、アニメーション、CSSフィルター、カスタム変数、Sassの知識など。Webサイト制作のあらゆる場面で役立つ最新技術の知識が身につきます。

  • 思い描いたデザインが作れる

    フォントの組み合わせ方、アイコンフォントの使い方、曲線のトリミング、斜めラインの作り方、あらゆる要素の装飾の仕方、拡大やシャドウの付け方、美しいグラデーション表現など。思い描いたデザインを自由に作る方法が学べます。

  • 練習問題やカスタマイズに挑戦できる

    いくつかの章末には練習問題やカスタマイズのお題があります。Webサイト制作を学ぶなら実際に考え、試して、手を動かしていくのが大事です。さらに挑戦して作った作例はSNS等で共有できるので皆と一緒に学んでいけます。

  • 1冊で一歩進んだ知識が身につく!

    この1冊にデザインの自由な表現方法、CSSの最新技術、動きをつける方法、時短になる記述術、独学で困った際の問題解決法など、使える知識がギュッと詰まっています。一歩進んだ実践の知識が一気に身につきます。

  • ランディングページ

  • ブログサイト

  • イベントサイト

  • ギャラリーサイト

著者紹介

著者・Mana

日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働いた。現在はWebサイト制作のインストラクターとして教育に携わっている。ブログ「Webクリエイターボックス」は2010年日本のアルファブロガーアワードを受賞。著書『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』(SBクリエイティブ)は2019年度CPU大賞 書籍部門の大賞を受賞。

関連商品のご案内

もっと見る

試し読み新着お届け

もっと見る