一生使えるWebデザインの本気の入門書！ 11刷突破のベストセラーが最新情報にアップデート！ これからはじめる人、一気に学びたい人へ 一生使えるWebデザインのテクニック集！ 絶対に外せない！ レイアウト4つの原則とレスポンシブWebデザイン 今日から使える！ 配色の基本と、実例デザインの配色見本集 ユーザーの心を動かす！ 写真と図版の使い方、タイポグラフィの選び方 フレックスボックス、CSSグリッド、インタラクション、マーケティングの知識まで この一冊でWebデザイナーに必須の基礎知識が網羅できる！ ＜本書の対象読者＞ ●これからWebデザインを学びたい初心者の方 ●Webサイト制作に自信が持てない方 ●1冊でWebデザイナーの基礎知識を網羅して学びたい方 CONTENTS ----------------------------- Chapter 01 Webデザインの基本 Chapter 02 レイアウト Chapter 03 配色 Chapter 04 写真と図版 Chapter 05 タイポグラフィ Chapter 06 HTML5とCSS3 Chapter 07 インタラクション Chapter 08 運用とマーケティング

作り手や運営側の「作りたい」サイトをユーザーに押しつけてはいませんか?本書では、情報デザイン設計の第一線で活躍する著者が、ユーザー視点に立った「本当に使いやすい」Webサイトを、○×形式でわかりやすく解説しています。 1 レイアウト・インターフェース(ファーストビューを意識しすぎて視認性が悪いすし詰めデザイン デザインばかりを優先して視線移動を無視した情報配置 ほか) 2 コンテンツ編集・設計(リピートユーザーにとって使い勝手が悪いメニュー構成 表現にこだわり過ぎてわかりにくい一覧メニュー ほか) 3 ユーザビリティ(初心者が元のページに戻りにくい新規ウィンドウ表示 機能を最大限に利用しきれないグルーバルナビ ほか) 4 サイト設計・マーケティング戦略(知りたい要素が直感的に見つけにくい表組み 要点が伝わりにくくユーザーを疲れさせる記事構成 ほか)

PhotoshopやIllustratorでのデータの正しい作り方、納品するときの指示方法など、Webデザイナーとして"やるべきこと"と"やってはいけないこと"をまとめた、Webデザインの新しいルールブック。 INTRODUCTION Webサイトをデザインするということ 1 Webデザインの基本的なルール 2 コーディングに困るデザインデータとは 3 わかりやすい納品データの作り方 4 Photoshopの上手な使い方 5 Illustratorの上手な使い方

初心者向けデザインシリーズ「デザインの学校」から、「これからはじめる　Illustratorの本」が2022年の最新版に対応してリニューアルしました。「作例を作りながら学べる」「短期間で基本操作を習得できる」「大きな文字と画面で読みやすい」といった特徴はそのままに，最新バージョンでの操作に対応。現場のプロも利用する機能をわかりやすく学習することができます。「わかりやすいIllustratorの本はないかな？」「なるべく早くIllustratorをマスターしたい！」という皆さんに，最適な入門書です。 ■index Chapter1　イラストを描こう Chapter2　ロゴをつくろう Chapter3　名刺をつくろう Chapter4　地図をつくろう Chapter5　ポストカードをつくろう Chapter6　SNSのヘッダー画像をつくろう ■Chapter1　イラストを描こう 01 準備をしよう 02 四角形を描こう 03 円を描こう 04 星を描こう 05 自由な線を描こう 06 手書き風の線を描こう 07 色をつけよう 08 線を設定しよう 09 ドキュメントを保存しよう ■Chapter2　ロゴをつくろう 01 図形を変形しよう 02 図形を回転・反転しよう 03 グラデーションをつけよう 04 移動・複製しよう 05 文字を入力しよう 06 文字を図形にしよう 07 グループ化しよう ■Chapter3　名刺をつくろう 01 名刺の枠をつくろう 02 定規を設定しよう 03 ロゴを別のファイルからコピーしよう 04 ロゴを配置しよう 05 装飾を描こう 06 文字を入力しよう 07 整列させよう ■Chapter4　地図をつくろう 01 下絵を配置しよう 02 直線を描こう 03 曲線を描こう 04 折れ線を描こう 05 直線と曲線を組み合わせよう 06 線路を描こう 07 アイコンを配置しよう 08 マップを型抜きしよう ■Chapter5　ポストカードをつくろう 01 別名で保存しよう 02 パターンをつくろう 03 リボン風のタイトルを描こう 04 エリア内に文章を流し込もう 05 写真を図形で型抜きしよう ■Chapter6　SNSのヘッダー画像をつくろう 01 新規ドキュメントを作成しよう 02 背景を描こう 03 イラストを描こう 04 イラストを複製しよう 05 イラストを一括編集しよう 06 再配色で色を変更してみよう 07 装飾を描こう 08 文字に影をつけよう 09 Web 用に保存しよう

体系的に学ぶHTMLとCSSの仕様と実践 フロントエンドエンジニアはじめ、Web制作に関わっている人のためのHTML5／CSS3ガイドブックです。 HTMLとCSSの最新仕様を整理するとともに、現時点でどのポイントに留意して制作を進めていけばよいか、制作の現場で必要不可欠な情報をまとめました。 簡潔にして詳細な、制作現場に必携の1冊となっています。 Chapter 1 HTML Chapter 2 Webの作成とメタデータ Chapter 3 コンテンツのマークアップ Chapter 4 CSSの適用 Chapter 5 ボックスのレイアウト Chapter 6 フレキシブルボックスレイアウト Chapter 7 グリッドレイアウト Chapter 8 テーブル Chapter 9 テキスト Chapter 10 エンベディッド・コンテンツ Chapter 11 フォーム Chapter 12 特殊効果

3色だけでおしゃれに決まる新発想の配色本。配色が苦手でも、センスに自信がなくても。たった“3色”でおしゃれな配色が完成する配色アイデアを多数収録。おしゃれな色の組み合わせがわからない、たくさんの色があると色選びに悩む、見栄えのよく、バランスよく配色がまとまらない・・・、そんな悩みを解決し、デザインに役立つ配色本です。

『世界一わかりやすいIllustrator 操作とデザインの教科書』は、Illustratorをマスターする教科書としては個人だけでなく、PCスクールや専門学校、大学の教科書としても数多く採用されており、おかげさまで定番の一冊となりました。本書は、最新のIllustrator 2020に対応して内容を更新した改訂3版です。対応バージョンはIllustrator 2020。本書では、アプリケーションの基本をきちんとマスターできるように、覚えておかないといけない機能、使い方を飽きさせないように短いセンテンスで解説していき、全部で15のレッスンを用意してます。全ページをマスターしたらアプリケーションに関しての基本的な操作は理解できるようになります。基本操作を覚えておけば、プロの現場に出ても、さまざまな要求に応えることができます。学習に必要なサンプルファイルはダウンロードサービスで入手できます。 はじめに 本書の使い方 レッスンファイルのダウンロード Lesson 01　Illustratorの基本 011 1-1 Illustratorの基礎知識 1-2 ファイルの作成・保存 1-3 Illustratorの基本操作 Lesson 02　図形を描く 2-1 四角を描く 2-2 円を描く 2-3 多角形を描く 2-4 星形を描く 練習問題 Lesson 03　線を描く 3-1 直線を描く 3-2 曲線を描く 練習問題 Lesson 04　フリーハンドで描く 4-1 フリーハンド系ツールの概要 4-2 鉛筆ツールで描く 4-3 ブラシで描く 4-4 塗りブラシツールと消しゴムツール 4-5 パスの単純化 練習問題 Lesson 05　オブジェクトの変形 5-1 オブジェクトの選択 5-2 オブジェクトの変形 5-3 アンカーポイントとハンドルの操作 練習問題 Lesson 06　オブジェクトの編集 6-1 レイヤーを使う 6-2 オブジェクトの複製 6-3 きれいに整列させる 6-4 複数オブジェクトの扱い 練習問題 Lesson 07　オブジェクトの合成 7-1 パスファインダーパネルによる合成 7-2 シェイプ形成ツールによる合成 7-3 複合パスで穴を開ける 7-4 クリッピングマスク 練習問題 Lesson 08　色の設定 8-1 色を設定する 8-2 グラデーションを使う 8-3 パターンを使う 8-4 アピアランスパネル 8-5 オブジェクトを再配色 練習問題 Lesson 09　線の設定 9-1 線を設定する 9-2 線幅ツールを使う 9-3 ブラシの適用 9-4 線を変形する便利な機能 練習問題 Lesson 10　文字を扱う 10-1 文字を入力する 10-2 文字を編集する 10-3 文字のレイアウト 10-4 段落スタイル 練習問題 Lesson 11　透明の設定 11-1 オブジェクトの不透明度 11-2 フェードアウト 11-3 描画モード 練習問題 Lesson 12　リアルなデザインのための機能 12-1 3D効果で立体感を出す 12-2 グラデーションメッシュ 12-3 画像トレース 12-4 遠近グリッド 12-5 シンボル 練習問題 Lesson 13　表やグラフを描く 13-1 表を描く 13-2 グラフを描く 13-3 特殊なグラフを描く 練習問題 Lesson 14　高度な変形 14-1 効果メニューによる変形 14-2 エンベロープ 14-3 ブレンド 14-4 類似オブジェクトの一括選択とグローバル編集 練習問題 Lesson 15　出力データの作成 15-1 画像の配置 15-2 印刷用データの作成 15-3 Web素材データの作成 索引

SNSで大人気！ 上司のいないデザイナーのためのオンライン上司・上司ニシグチが 新米デザイナーの作品を赤ペン添削します。 クライアントの意図を読み解くアドバイスやデザイン的な改善ポイントを、 上司と部下の会話でわかりやすく解説。 頼りになる上司がいれば、 あなたのデザイン力もぐんぐん伸びること、間違いなしです！

体験のデザインって、こういうことか！8ステップではじめるWebのUXデザイン！ 体験のデザインって、こういうことか！ 8ステップではじめるWebのUXデザイン！ 本書は、実際に大手デジタルマーケティング会社でUXデザインを実践してきた執筆陣が、 Web制作者が知っておくべき、UXデザインの「基本」から 「ユーザビリティ評価」「プロトタイピング」「構造化シナリオ」「ユーザー調査」 「カスタマージャーニーマップ」「ユーザーモデリング」「組織導入」までを、 8つの章に分けて解説していきます。 実際に導入するためのテクニックや大小2つのプロジェクトのモデルケースを収録し、 理想論でなくあくまで現実的、実践的な方法を一冊にまとめました。 また、本書は想定読者として「白石由香」というWebデザイナーのペルソナを作り、 彼女に向けて書かれているので、臨場感をもって読み進めることができるはずです。 さらに、テンプレートもダウンロードできるので、理解するだけでなく、 すぐに試すこともできます。まさに、UXデザインの「現場叩き上げ」の教科書です。 ◎読者対象： Webに関わる企画・開発者、ディレクター、プロデューサー、デザイナー、エンジニア ◎特典： テンプレートがダウンロードできる ◎収録内容： 1章　UXデザインとは? 2章　ユーザビリティ評価からはじめる 3章　プロトタイピングで設計を練りあげる 4章　ペルソナから画面までをシナリオで繋ぐ 5章　ユーザー調査を行う 6章　カスタマージャーニーマップで顧客体験を可視化する 7章　共感ペルソナによるユーザーモデリング 8章　UXデザインを組織に導入する 1章　UXデザインとは? 1-1　UXデザインの理想と現実のギャップ 1-2　UX、UXデザインとは? 1-3　UXデザインを仕事で行うときの現実 1-4　そんな中どうUXデザインをやるべく攻めるか? 1-5　UX デザインを学習し、実践していく 2章　ユーザビリティ評価からはじめる ユーザビリティとは? 2-1　Webではユーザビリティ評価のチャンスは多い 2-2　Webの現場でのユーザビリティ評価とは? 2-3　ユーザビリティ評価の方法 2-4　ユーザビリティ評価の実施手順 2-5　ユーザーを呼んでこない「専門家評価」 2-6　便利なユーザビリティ評価手法のいろいろ 仕事として実施するための機会の作り方 3章　プロトタイピングで設計を練りあげる プロトタイピングとは? 3-1　プロトタイピングの種類 3-2　ワイヤーフレームを評価する 3-3　ペーパープロトタイピング 3-4　プロトタイピングを実施する際の注意点 3-5　プロトタイピングツール 仕事として実施するための機会の作り方 4章　ペルソナから画面までをシナリオで繋ぐ 構造化シナリオ法とは? 4-1　ペルソナがユーザー目線を教えてくれる 4-2　当事者の思い込みから逃れるための構造化シナリオ法 4-3　価値のシナリオ 4-4　行動のシナリオ 4-5　操作のシナリオ 4-6　シナリオを考える練習 4-7　構造化シナリオ法のツールキット 4-8　シナリオは誰かに読んでもらい客観性を保つ 仕事として実施するための機会の作り方 5章　ユーザー調査を行う ユーザー調査とは? 5-1　データ収集を行う 5-2　ユーザーに「弟子入り」してインタビューを行う 5-3　データ収集の練習 5-4　データ分析を行う 5-5　親和図法について 5-6　親和図法による分析の練習 5-7　データ分析のツールキット 仕事として実施するための機会の作り方 6章　カスタマージャーニーマップで顧客体験を可視化する カスタマージャーニーマップとは? 6-1　カスタマージャーニーマップが求められるわけ 6-2　カスタマージャーニーのための調査 6-3　カスタマージャーニーを作ってみる 6-4　“現状の姿”を課題解決するカスタマージャーニー 6-5　カスタマージャーニーマップのツールキット 仕事として実施するための機会の作り方 7章　共感ペルソナによるユーザーモデリング 7-1　プロジェクトメンバーの目線を揃える 7-2　ペルソナとは? 7-3　最終段階：ユーザーに共感できるか 8章　UXデザインを組織に導入する 8-1　UX デザインへの組織的な取り組み 8-2　UXデザインステージ 8-3　ステークホルダーマップ 8-4　UXデザイン導入シナリオ

これからPhotoshop操作を学びたい初心者向けの学習書として好評の「これからはじめるPhotoshopの本」の、2020年最新版が登場です。写真の補正やトリミングはもちろんのこと、写真の合成や加工、ポストカードの作成まで、Photoshopの基本的な操作をひととおり学ぶことができます。サンプルファイルもついているので、実際に試しながら学習を進めることができます。大きくて見やすい誌面も魅力的。Photoshopを始めてみたいと思ったときの、最初の本としておすすめの1冊です！ Visual Index 本書の特徴 本書で作る作例 サンプルファイルの利用～DVDの場合 サンプルファイルの利用～ダウンロードの場合 Photoshopの体験版インストール ●第1章 Photoshopの基本操作を知ろう Visual Index 01 Photoshopを起動・終了しよう 02 ファイルを開こう 03 Photoshopのツールを選ぼう 04 パネルを操作しよう 05 画面を拡大・縮小しよう 06 操作を取り消そう 07 ファイルを保存しよう ●第2章 写真を補正しよう Visual Index 01 写真の明るさを補正しよう 02 写真の色味を補正しよう 03 写真の彩度を補正しよう 04 写真をモノクロに補正しよう ●第3章 写真を加工しよう Visual Index 01 写真の一部を切り抜こう 02 写真の余分な要素を削除しよう 03 写真に写っているものをコピーしよう 04 写真の特定の色をガラリと変えよう 05 写真を油絵のように加工しよう ●第4章 写真の一部を選択して補正しよう Visual Index 01 暗い部分を明るく補正しよう 02 色域を指定して補正しよう 03 人物の肌をなめらかに補正しよう 04 特定のレイヤーを選んで補正しよう ●第5章 写真を合成しよう Visual Index 01 合成用の素材を切り抜こう～人物編 02 合成用の素材を切り抜こう～マカロン編 03 切り抜いた画像を配置しよう 04 人物とマカロンを馴染ませよう 05 背景と人物を馴染ませよう ●第6章 ポストカードを作ろう Visual Index 01 画像素材を用意しよう 02 ポストカードのベースを作ろう 03 黒板の画像を配置しよう 04 カフェのロゴを作ろう 05 ポストカードの見出しを作ろう 06 ポストカードに本文を入力しよう 07 かんたんな地図を作成しよう 08 作ったポストカードを自宅で印刷しよう

「ものづくりの視点」に帰って 人の心を動した、三ツ星ポートフォリオ拝見 人の心を動す三ツ星ポートフォリオ企画「基本編」 人の心を動かす三ツ星ポートフォリオ企画「実践編」 人の心を動かす三ツ星ポートフォリオ企画「文章編」 人の心を動かす三ツ星ポートフォリオ企画「知識編」

Webデザインの作業フェーズ・業務シーンごとに、 「Adobe Photoshop」と「Adobe Illustrator」の 便利な使いこなし方やノウハウを解説する本です。 Webにまつわるビジュアルをより魅力的なものにするために、 あるいはWeb制作を効率的に行うために必要となるテクニックを 目的に沿って作例を用いながら解説します。 Webデザイン初心者、Webデザインに活動範囲を 広げたいと考えているグラフィックデザイナーはもちろん、 簡単な素材の制作や写真加工を行う必要があるプログラマーや コーダーにとっても有益な内容です。 Adobe Creative Cloud 2020/2019対応。 ※教材データはインターネットからダウンロードする必要があります。 【CONTENTS】 ●CHAPTER 1 Webデザイン+Photoshop+Illustratorの基礎知識 印刷物のデザインとは違ったセオリーやルールなど、 Webデザインの基礎知識について解説! ●CHAPTER 2 ワイヤーフレーム制作で使えるテクニック Webページに要素をどう配置するのかを表した大枠(ラフレイアウト)である 「ワイヤーフレーム」制作の際に役立つテクニックについて解説! ●CHAPTER 3 画像処理に使えるテクニック 印刷物のデザイン時にも活用できる基本的な画像の補正や加工から、 Webの機能を盛り込んだ表現まで幅広く解説! ●CHAPTER 4 パーツ制作で使えるテクニック アイコンやロゴ、囲み罫、背景パターン、バナーといった Webページを構成するパーツを効率よく制作する方法を解説! ●CHAPTER 5 カンプ制作で使えるテクニック 補正や加工を施した画像や、作成したパーツを組み合わせて デザインカンプとして仕上げる際に必要なテクニックを解説! ●CHAPTER 6 コーディン向けに使えるテクニック 編集・作成した画像、パーツ、デザインカンプなどをWebページに適した形式や、 コーディングに適した状態で書き出す際のテクニックについて解説!

ロゴ&マークのつくり方。 : 大黒大悟/梅原真/木下謙一/青木克憲/秋山具義/山野英之/山﨑晴太郎/小杉幸一/木住野彰悟/川上恵莉子/水野学/村上要×佐藤可士和ほか

★言語の基本学習からサイト作成と管理までを1冊にまとめた入門書！★ webサイト制作者を目指す人が必ず習得しなければならない言語「HTMLとCSS」の記述と、サイト制作の基礎知識から公開・管理方法までを15レッスンで解説。HTMLパートはコーディングの基本から画像とリンク、リストとナビゲーション、テーブルおよびフォームのマークアップ方法を、CSSパートでは文字のスタイリングからレイアウト手法までを丁寧に解説。ダウンロードした実習ファイルに記述することで、細かくステップ分けした各単元の内容を手を動かしながら学びます。 専門学校の教壇に立つ著者陣が実際の講義内容を体系立て、さらに学校実施のテストと同等の練習問題を各レッスンの章末に用意した、HTMLとCSSの教科書です。最新エディタ「Visual Studio Code」に対応の改訂版。 Lesson01 wwwやwebサイト制作の基本を理解しよう 1-1 webサイトが表示される仕組み 1-2 webサイト制作のキーワード 1-3 webサイトに使用される言語 1-4 コーディングに必要なアプリケーション 1-5 webサイトに使用される画像 1-6 エディタの使い方を学ぶ lesson01─ 練習問題 Lesson02 HTMLコーディングの基本を学ぼう 2-1 HTMLとは 2-2 マークアップとは 2-3 タグと要素と属性 2-4 head要素とbody要素 2-5 head要素の中に入る要素 2-6 webサイトを構成するファイルの管理 2-7 HTMLファイルを作成して保存する 2-8 webサイトの全体像を見てみる lesson02─ 練習問題 Lesson03 画像表示とリンクをマークアップしよう 3-1 画像を表示する 3-2 リンクを設定する 3-3 パスを指定する lesson03─ 練習問題 Lesson04 リストとナビゲーションをマークアップしよう 4-1 順不同リストを作る 4-2 順序付きリストを作る 4-3 定義リストを作る 4-4 リストでナビゲーションを作る lesson04─ 練習問題 Lesson05 表組みをマークアップしよう 5-1 シンプルな表組みを作る 5-2 セルを結合する 5-3 より高度な表組みを作る lesson05─ 練習問題 Lesson06 フォームをマークアップしよう 6-1 フォームの基本を身につける 6-2 入力形式に合わせたフォームパーツを作る 6-3 お問い合わせフォームを作る lesson06─ 練習問題 Lesson07 CSSコーディングの基本を学ぼう 7-1 CSSとは 7-2 CSSの基本ルールを身につける 7-3 HTMLにCSSを組み込む3つの方法 7-4 よく使うセレクタを知る 7-5 特殊なセレクタ「疑似クラス」と「疑似要素」 lesson07─ 練習問題 Lesson08 見出しや段落をスタイリングしよう 8-1 文字サイズを調整する 8-2 行間を調整する 8-3 書体を指定する 8-4 文字の色を指定する 8-5 見出しを背景色で装飾する 8-6 見出しを線で装飾する 8-7 見出しの先頭を装飾する 8-8 段落のスタイルを整える lesson08─ 練習問題 Lesson09 CSSレイアウトの基本を学ぼう 9-1 ボックスモデルを理解する 9-2 余白を調整する 9-3 ボックスサイズ（幅・高さ・余白）を計算する 9-4 webサイトの基本レイアウト lesson09─ 練習問題 Lesson10 ページ全体をレイアウトしてみよう 10-1 4つのwebレイアウトパターン 10-2 段組みでレイアウトする 10-3 自由に要素を配置する 10-4 要素を回り込ませる 10-5 要素の横・縦方向の位置を指定してレイアウトする lesson10─ 練習問題 Lesson11 リストとナビゲーションをスタイリングしよう 11-1 リストの装飾について学ぶ 11-2 ナビゲーションを装飾する 11-3 グローバルナビゲーションを作る 11-4 パンくずリストを作る lesson11─ 練習問題 Lesson12 表をスタイリングしよう 12-1 表の装飾について学ぶ 12-2 横線・縦線のみの表を作る 12-3 さまざまな装飾の表を作る lesson12─ 練習問題 Lesson13 フォームをスタイリングしよう 13-1 フォームの装飾について学ぶ 13-2 使いやすい装飾を施す 13-3 ボタンをデザインする lesson13─ 練習問題 Lesson14 webサイト制作を実践してみよう 14-1 コーディングの準備をする 14-2 トップページのHTMLを記述する 14-3 トップページのCSSを記述する 14-4 コース紹介ページを作る 14-5 アクセスページを作る 14-6 レスポンシブデザインにする Lesson15 webサイトを公開しよう 15-1 サーバーとドメインを準備する 15-2 FTPソフトでアップロードする 15-3 webサイトのデータをチェックする 15-4 webサイトを管理する

絶対フォント感を身につける。 : 総合編・明朝体編にゴシック体編を追加した決定版!

デザインが作れない。操作手順がわからない。現場を知らない。センスがない。 デザインが作れない。操作手順がわからない。現場を知らない。センスがない。 手を動かすから身につく プロの技が一気に学べる！ 【効率的に学習】 操作手順、デザインの考え方 画像、テキストといった素材 さらには「ai」「psd」といった完成データまで、 学習する上で役立つ情報が「全部」そろっています！ 役立つテクニック92Recipes 基本 レイアウト 写真 配色 タイポグラフィ ロゴ イラスト 実践テクニック あらゆるデザインが作れるようになる！ Chapter01 デザインの基本 Chapter02 レイアウト Chapter03 写真 Chapter04 配色 Chapter05 タイポグラフィ Chapter06 ロゴ、イラスト Chapter07 デザインの基本 Chapter07 デザインの実践

フレキシブルボックスレイアウトを使ったレスポンシブWebデザインの本格的レイアウトテクニックを習得！ 本書は、マルチデバイスに対応したWebサイトをステップ・バイ・ステップで作成し、最新標準のHTML+CSSをマスターすることを目的とした書籍です。 Webページ制作を取り巻く環境は、ここ数年で大きく変化しています。 スマートフォンやタブレットといったモバイルデバイスからのアクセスがPCを凌駕し、それとともにWebページのデザインも１段組みをベースとしたシンプルなものが求められるようになっています。 そこで、本書では古いブラウザに縛られた時代には使い切ることができなかった機能をふんだんに活用し、今どきのWebページをシンプルなステップで形にしていく方法をまとめました。 サンプルサイトの制作工程を6ステップに分け、 CHAPTER1　下準備 CHAPTER2　トップページの作成 - コンテンツ編 CHAPTER3　トップページの作成 - ナビゲーション編 CHAPTER4　コンテンツページの作成 CHAPTER5　記事一覧ページの作成 CHAPTER6　アレンジ と順に進めていくことで、基本からアレンジの方法まで、効率よくマスターできるカリキュラムとなっています。 本書サポートサイトから学習用のファイルをダウンロードできますので、それを使って学習することができます。 「HTML5は2014年に正式勧告がリリースされ、２年が経とうとしていますが、まもなくHTML5.1の勧告もリリースされる予定です。CSSはさまざまな機能がCSS3やCSS4の規格として採り入れられ、策定作業が進められています。 同時に、OSレベルでのサポートの打ち切りなどにより、ブラウザの世代交代も強制的に進んでおり、主要ブラウザは最新のHTML+CSSをフルにサポートした状態になっています。 こうした現状をあらためてみると、 そろそろHTML5+CSS3の真価を発揮させてもいい時期 になったのではないでしょうか。」（著者「はじめに」より） 巻末にはHTMLとCSSのリファレンスも用意し、学習中に適宜参照できるようになっています。 これからWebページ制作を学びはじめる方にも、最新のHTML+CSSに興味がある方にも、これからのWebページ制作に求められるスキルやテクニックをまとめた１冊として、役立てていただければ幸いです。 CHAPTER1　下準備 1-1　１段組みをベースとしたページを最新のHTML/CSSで作成する 　　1-1-1　１段組みをベースとしたWeb ページとは 　　　　レスポンシブWeb デザイン 　　　　セマンティクス 　　1-1-2　最新のHTML/CSS 　　　　古いブラウザのサポートについて 1-2　構築するページとサイト 　　1-2-1　Webサイトの構造 　　1-2-2　ページの構造と作成手順 　　1-2-3　ページの配色 1-3　Webページのベースを用意する 　　1-3-1　HTMLファイルに記述する設定 　　1-3-2　CSSファイルに記述する設定 　　　　HTML/CSSの編集に使用するテキストエディタ 　　　　ページの表示確認に使用するブラウザ 　　　　さまざまな画面サイズでの表示を簡単に確認する方法 CHAPTER2　トップページの作成　-　コンテンツ編 2-1　ヒーローイメージ 　　2-1-1　画像に重ねるテキストを表示する 　　2-1-2　Webフォントで表示して字間を調整する 　　2-1-3　ブラウザ画面いっぱいに画像を表示する 　　2-1-4　SVGでロゴ画像を表示する 　　2-1-5　リンクボタンを表示する 2-2　概要（アイコン＋テキスト） 　　2-2-1　概要のテキストを表示する 　　2-2-2　アイコンを表示する 　　2-2-3　３つの概要を横に並べる 2-3　概要（画像＋テキスト） 　　2-3-1　画像とテキストを表示する 　　2-3-2　画像とテキストを横に並べてレイアウトする 2-4　概要（画像＋テキスト：逆配置） 　　2-4-1　コンテンツCをベースに新しいブロックを作成する 　　2-4-2　画像の横幅を固定して並び順を変更する CHAPTER3　トップページの作成　-　ナビゲーション編 3-1　サイト情報 　　3-1-1　サイト情報を表示する 　　3-1-2　フッターのデザインを指定する 3-2　フッターメニュー 　　3-2-1　フッターメニューを作成する 　　3-2-2　３つのメニューを横に並べる 3-3　コピーライト 　　3-3-1　コピーライトを表示する 　　3-3-2　フッター内のパーツのレイアウトを調整する 3-4　SNSメニュー 　　3-4-1　SNSメニューを表示する 　　3-4-2　SNSメニューのデザインを指定する 3-5　ヘッダーのサイト名 3-6　ナビゲーションメニュー 　　3-6-1　ナビゲーションメニューを作成する 　　3-6-2　大きい画面ではナビゲーションメニューを横に並べる 3-7　トグルボタン 　　3-7-1　トグルボタンを作成する 　　3-7-2　トグルボタンでナビゲーションメニューを開閉する CHAPTER4　コンテンツページの作成 4-1コンテンツページ 　　4-1-1　コンテンツページを作成する 　　4-1-2　記事のデザインを指定する 　　4-1-3　パンくずリストを表示する 4-2アバウトページ 　　4-2-1　アバウトページを作成する 　　4-2-2　画像と沿革を表示する 4-3お問い合わせページ 　　4-3-1　お問い合わせページを作成する 　　4-3-2　地図を表示する CHAPTER5　記事一覧ページの作成 5-1　カード型（画像＋テキストを上下に配置） 　　5-1-1　記事一覧Aのページを作成する 　　5-1-2　記事の概要を表示する 　　5-1-3　ブラウザ画面の横幅に応じて概要を横に並べて表示する 5-2　カード型（画像＋テキストを左右に配置） 5-3　サムネイル型（画像＋テキストを重ねて配置） CHAPTER6　アレンジ 6-1　ヘッダーの色をアレンジする 6-2　ヘッダーとヒーローイメージを一体化したデザインにする 6-3　ヘッダーを画面上部に固定する 6-4　関連記事メニューを追加する 6-5　メタデータを記述する 6-6　ページの基本色をアレンジする APPENDIX HTMLリファレンス 　　HTMLの基本文法 　　HTMLの基本設定 　　メタデータ 　　セクション 　　コンテンツ CSSリファレンス 　　CSSの基本文法 　　セレクタ 　　メディアクエリ ボックスモデル 　　ボックスの基本設定 　　ボックスの種類 　　フレキシブルボックスレイアウト 　　ポジションレイアウト 　　ボックス内のコンテンツのデザイン 　　単位 　　色の値 　　変数 最適化 主要デバイスの画面サイズ 古いブラウザ用の設定

学生やWebデザイナー向けのjQuery入門書。難度順の全30レッスンで、さまざまな動作サンプルを作りながら学べる構成。 作って身につく・仕組みがわかる30レッスン！ 本書は、HTMLとCSSの知識はあってもJavaScriptやjQueryには触れたことがない初心者を対象にした、Web制作向けのjQuery学習書です。全30LESSONを通して、jQueryの基礎知識と基本文法の学習から始めて、実際に動作サンプルを作りながら、jQueryのしくみと使い方を学んでいきます。 各LESSONは、考え方や設計を説明する「講義」と、実際にコードを書いて作っていく「実習」で構成。メニューやナビゲーション、UIパーツなど、Webサイトでよく使われているサンプル作例を自分で作りながら、「使える」知識がきちんと身につきます。 サンプル作例は小さなパーツから始めて、少しずつ複合的なパーツを作っていく難度順なので、プログラミングになじみのない初心者でも挫折せずに進められます。Web制作者を目指す人や、スキルアップしたいWebデザイナーのためのjQuery教科書としておすすめの1冊です！ Introduction レッスンを始める前に Chapter01 jQueryの基礎知識 LESSON01 jQueryの概要 LESSON02 jQueryの導入 Chapter 02 jQueryの文法 LESSON03 jQueryの文法 LESSON04 JavaScriptの基本 Chapter 03 jQueryのサンプル制作：Level 1 LESSON05 トグルメニュー LESSON06 アラートボックス LESSON07 ビューアー LESSON08 タブ Chapter 04 jQueryのサンプル制作：Level 2 LESSON09 ドロップダウンメニュー LESSON10 フローティングメニュー LESSON11 lightBox風モーダルウインドウ LESSON12 画像のキャプション表示 LESSON13 ツールチップ Chapter 05 jQueryのサンプル制作：Level 3 LESSON14 ボックスの高さを合わせる LESSON15 文字サイズの変更 LESSON16 パララックス効果 LESSON17 フィルタリング LESSON18 テーブルセルのハイライト LESSON19 アコーディオンパネル LESSON20 スムーススクロール Chapter 06 jQueryのサンプル制作：Level 4 LESSON21 バナーのランダム表示 LESSON22 フォームのバリデーション LESSON23 スライドメニュー LESSON24 スクロールによるヘッダーのリサイズ LESSON25 ブラウザ上部に固定されるヘッダー LESSON26 メニューのハイライト Chapter 07 jQueryのサンプル制作：Level 5 LESSON27 スライドショー（横スクロール） LESSON28 スライドショー（フェードイン／アウト） LESSON29 画像のズーム LESSON30 カウントアップゲーム ［補講］ プラグインの利用 索引