Web界隈やデザイナーに大人気! 【4年連続、売上第1位！】 【全国の書店員がオススメする本(2019年度 CPU大賞)第1位!】 ずっと、一番売れているHTML本! 大反響! 32刷突破！ 読者の圧倒的な支持！シリーズ35万部突破の大ヒット! 全国の書店員がオススメする本(CPU大賞)第1位! 2019-2022年、年間売上 第1位!※ Web制作に必要な知識がすべて身につく! ※日販売上げランキング: HTML関連書籍 ---------------------------------------------------------------------------- Web界隈やデザイナーに大人気！ Web関連の情報やデザインについて記事が学べる『Webクリエイターボックス』の管理人、 Manaによる渾身のHTML & CSSとWebデザインが学べる本 ---------------------------------------------------------------------------- 今のWebサイトの作り方が一気に学べる！ ・知識ゼロから体系的に学べる！HTMLとCSSの基本 ・最新の技術に対応！レスポンシブ、Flexbox、CSSグリッド ・手を動かしながら学べる！プロの現場で役立つテクニック ・コードの知識からデザインのことまで1冊ですべて学べる！ WebクリエイターボックスのManaが教える Webサイト制作の定番＆旬のスキル。 この1冊で必要なことがすべて学べる！ コードもデザインも全部学べる！ ●本書の対象読者 ・これからWebサイトを作り始める初心者 ・HTMLとCSSを基本から学びたい人 ・美しいデザインのWebサイトを作りたい人 ・Webの最新技術を学びたい人 Web界隈やデザイナーに大人気! CHAPTER 1 最初に知っておこう！Webサイトの基本 1-1 よいWebデザインとは 1-2 様々な種類のWebサイト 1-3 ユーザビリティとは 1-4 Webサイトの仕組み 1-5 デバイスの種類 1-6 ブラウザーの種類 1-7 制作の流れ 1-8 制作をはじめる前に CHAPTER 2 Webの基本構造を作る！HTMLの基本 2-1 HTMLとは 2-2 HTMLファイルを作ろう 2-3 HTMLファイルの骨組み 2-4 HTMLの基本の書き方を身につけよう 2-5 見出しをつけよう 2-6 文章を表示しよう 2-7 画像を挿入しよう 2-8 リンクをはろう 2-9 リストを表示しよう 2-10 表を作ろう 2-11 フォームを作ろう 2-12 より使いやすいフォームにしよう 2-13 ブロック要素でグループ分けをしよう 2-14 よく使うHTMLタグ一覧 CHAPTER 3 Webのデザインを作る！CSSの基本 3-1 CSSとは 3-2 CSSを適用させる方法 3-3 CSSファイルを作ろう 3-4 CSSの基本の書き方を身につけよう 3-5 文字や文章を装飾しよう 3-6 Webフォントを使おう 3-7 色をつけよう 3-8 背景を彩ろう 3-9 幅と高さを指定しよう 3-10 余白を調整しよう 3-11 線を引こう 3-12 リストを装飾しよう 3-13 クラスとIDを使った指定方法 3-14 レイアウトを組もう 3-15 デフォルトCSSをリセットしよう 3-16 よく使うCSSプロパティ一覧 CHAPTER 4 フルスクリーンのWebサイトを制作する 4-1 フルスクリーンとは 4-2 フルスクリーンページの制作の流れ 4-3 「head」を記述しよう 4-4 「header」部分を作ろう 4-5 コンテンツ部分を作成しよう 4-6 ファビコンを用意しよう 4-7 フルスクリーンページのカスタマイズ例 CHAPTER 5 ２カラムのWebサイトを制作する 5-1 ２カラムのレイアウトとは 5-2 ２カラムページの制作の流れ 5-3 ページ全体の見出しを作成しよう 5-4 フッター部分を作成しよう 5-5 横並びの設定をしよう 5-6 メインエリアを作ろう 5-7 サイドバーを作ろう 5-8 レスポンシブに対応させよう 5-9 カラムページのカスタマイズ例 CHAPTER 6 タイル型のWebサイトを制作する 6-1 タイル型レイアウトとは 6-2 タイル型レイアウトの制作の流れ 6-3 ページ上部の紹介文を作成しよう 6-4 タイル型レイアウトを設定しよう 6-5 レスポンシブに対応させよう 6-6 タイル型レイアウトのカスタマイズ例 CHAPTER 7 外部メディアを利用する 7-1 お問い合わせページの制作の流れ 7-2 フォームを設置しよう 7-3 地図を表示しよう 7-4 Facebookプラグインを挿入しよう 7-5 Twitterプラグインを挿入しよう 7-6 YouTube動画を挿入しよう 7-7 レスポンシブに対応させよう 7-8 OGPの設定をしよう 7-9 外部メディアのカスタマイズ例

4万人が学んだベストセラーが、5年ぶりの大改訂！ 小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版！ 第2版ではPCだけでなくスマホやタブレットにも対応したサイトが完成します。 ソースコードは現在のトレンドに合わせ、解説もいっそう丁寧にわかりやすくなりました。 これからWeb制作を始める人にも、HTML/CSSを学び直したい人にもおすすめの、充実の内容です！ 最新HTML5.2準拠。Windows/Mac対応 chapter01 Webサイト制作を始める前に 01 Webサイトとその構成要素 02 Webブラウザの機能と種類 03 Webサイトを公開するまで 04 制作に使うソフトのインストール chapter02 HTMLの基礎 01 HTMLはWebページを制作するための言語 02 HTMLの基本的な書式 03 親子、子孫、兄弟 ～HTMLの階層関係 chapter03 制作の準備と基本のHTML 01 Webサイト制作の準備 02 すべてのHTMLで共通するタグ chapter04 見出し、段落、リスト 01 見出しテキスト 02 テキストの段落 03 ナビゲーションの設置 04 番号なしリスト（非序列リスト） chapter05 リンクと画像の挿入 01 サイト内リンクと相対パス 02 外部サイトへのリンクと絶対パス 03 画像の表示 04 キーボードで入力しにくい文字の表示 05 ページの部分ごとに要素をまとめる 06 class属性 07 コメント文 chapter06 2ページ目以降を効率的に作成する 01 index.html以外のファイルの作成 02 段落にテキストと画像を含める 03 テキストを太字にする・改行する 04 id属性と特定の場所へのリンク 05 テーブル（表） 06 番号付きリスト（序列リスト） 07 CSS適用を考えた要素のグループ化 chapter07 CSSの基礎 01 HTMLの「見た目」を整えるCSS 02 CSSの基本的な書式 03 主なセレクタと書き方 04 CSSを書く場所 05 CSSファイルを作成する 06 HTMLファイルとCSSファイルを関連付ける chapter08 CSSでページのスタイルを調整 01 背景色の設定 02 テキスト色、フォントサイズの設定 03 マージン、ボーダー、パディング 04 行間の調整 05 リンクテキスト色の変更 06 コンテンツの行揃え 07 ブロック表示／インライン表示の変更 08 背景画像の指定 09 スタイルを上書きする 10 繰り返さない背景画像 11 ページの最大幅の設定 12 ページに固有のスタイルを適用 chapter09 フロートとテーブルのスタイル 01 テキストの回り込み 02 テーブルの整形 03 フレックスボックスで2コラムレイアウト 04 access.htmlのスタイルを作成しよう chapter10 フォームの作成 01 フォームの基礎知識 02 お問い合わせページの概要 03 フォーム全体の親要素 04 プルダウンメニュー 05 ラジオボタンとチェックボックス 06 テキストフィールド 07 テキストエリア 08 送信ボタン 09 ラベル 10 フォームのスタイルと属性セレクタ chapter11 モバイル端末に対応する 01 レスポンシブデザイン 02 ビューポートの設定 03 画像をレスポンシブデザインに対応させる 04 メディアクエリとブレイクポイント 05 ページ全体とナビゲーションのモバイル対応 06 コラムレイアウトの調整 07 フォームの調整 chapter12 Webサイトの公開 01 Webサイト公開までの準備 02 Webサーバーに接続 03 ファイルのアップロード 04 Webサイトの最終確認

＜コンセプト＞PC＆モバイルサイトデザインの基礎力とHTML・CSSコーディングの知識が1冊で同時に身につく！ ウェブ制作を仕事にするならHTMLとCSSを学ぶことから始めますが、本書は体系立てた文法学習よりも、まずは「コーディングとはどのような作業なのか」を理解できる初学者向け入門書です。架空のカフェのショップ紹介＆ネットショップサイトをチュートリアル形式で作成しながら、基本的なHTML要素／CSSの基本構造（セレクタ、プロパティ、値）を学ぶことができ、レイアウトのテクニックやデザイン（Webデザイン＆レスポンシブデザイン）の基本も身につきます。 ＜本書のポイント＞ ・チュートリアル学習では、PC版だけでなくウェブ制作の現場でニーズの高いモバイルサイトのデザインがしっかり学べます ・定番となったflexbox、displayを使ったレイアウト手法の基礎から実践まで丁寧に解説します ・「フルスクリーン」「フレックスボックス」「シングルカラム」「2カラム」「グリッド」の5種類のレイアウトパターンを学習できます ・横スクロールするレイアウト、アニメーションで拡大するボタンなど動きのあるサイトづくりも体験できます ・「動画コンテンツページ」「ネットショップページ」も制作します ＜綴じ込み特典つき＞ 付録①デザインのバリエーションが学べる！「レスポンシブデザインのネタ帖」 付録②インターン、就転職に役立つ！「ポートフォリオ用アレンジのネタ帖」 Chapter 1　知っておきたいサイトとデザインのきほん知識 1-1 ウェブサイトのしくみについて知ろう 1-2 サイト制作のフローとウェブデザイン 1-3 コーディングについて知っておくべきこと 1-4 ウェブページのパーツやレイアウトについて知ろう 1-5 ウェブデザインで知っておくべきこと Chapter 2　サイト制作の前に準備しておくこと 2-1 制作環境を整えよう 2-2 Google Chromeのインストールと使い方 2-3 Visual Studio Codeのインストールと使い方 2-4 入力したコードをブラウザで確認する方法 2-5 実習用サンプルサイトを見てみよう Chapter 3　知っておきたいHTMLのきほんと書き方 3-1 HTMLのきほん知識 3-2 サンプルサイト共通のHTMLを書いてみよう 3-3 見やすいコードとコメントの書き方 Chapter 4　知っておきたいCSSのきほんと書き方 4-1 CSSのきほん知識 4-2 CSSを書いてみよう＜ページの基本設定を記述する＞ 4-3 CSSを書いてみよう 4-4 ウェブフォントを指定してみよう Chapter 5　知っておきたいレスポンシブデザインのきほんと書き方 5-1 レスポンシブデザインのきほん知識 5-2 モバイルサイト用のCSSを書いてみよう 5-3 ハンバーガーメニューを作成しよう 5-4 モバイル用フッターのレイアウトを調整しよう Chapter 6　フルスクリーンレイアウトを制作する 6-1 フルスクリーンレイアウト制作で学ぶこと 6-2 フルスクリーンレイアウトのHTMLを書いてみよう 6-3 フルスクリーンレイアウトのCSSを書いてみよう 6-4 フルスクリーンレイアウトのモバイル用CSSを書いてみよう Chapter 7　フレックスボックスレイアウトを制作す 7-1 フレックスボックスレイアウト制作で学ぶこと 7-2 フレックスボックスレイアウトのHTMLを書いてみよう 7-3 フレックスボックスレイアウトのCSSを書いてみよう 7-4 フレックスボックスレイアウトのモバイル用CSSを書いてみよう Chapter 8　シングルカラムで動画コンテンツページを制作する 8-1 シングルカラムレイアウト制作で学で学ぶこと 8-2 シングルカラムレイアウトのHTMLを書いてみよう 8-3 シングルカラムレイアウトのCSSを書いてみよう 8-4 シングルカラムレイアウトのモバイル用CSSを書いてみよう Chapter 9　グリッドで格子状レイアウトを制作する 9-1 グリッドレイアウト制作で学ぶこと 9-2 グリッドレイアウトのHTMLを書いてみよう 9-3 グリッドレイアウトのCSSを書いてみよう 9-4 グリッドレイアウトのモバイル用CSSを書いてみよう Chapter 10　2カラムでショップページを制作する 10-1 2カラムレイアウト制作で学ぶこと 10-2 2カラムレイアウトのHTMLを書いてみよう 10-3 ECサイトへリンクするページのHTMLを書いてみよう 10-4 2カラムレイアウトのCSSを書いてみよう 10-5 2カラムレイアウトのモバイル用CSSを書いてみよう Chapter 11 Googleマップ付きの問い合わせページを制作する 11-1 問い合わせページ制作で学ぶこと 11-2 問い合わせページのHTMLを書いてみよう 11-3 問い合わせページのCSSを書いてみよう 11-4 問い合わせページのモバイル用CSSを書いてみよう Appendix オリジナルのポートフォリオサイトに改変してみよう デザインのバリエーションが学べる！「レスポンシブデザインのネタ帖」 インターン、就転職に役立つ！「ポートフォリオ用アレンジのネタ帖」

Webサイト制作の初学者に最適の1冊目！作りながら楽しく基本を学べる入門書が登場です。豊富なイラスト・図解で理解を助けます。 Webサイト制作をこれから学ぶ人へ送る “1冊目”に最適の入門書！【学びをサポートする4大特典つき】 本書は手を動かしてWebサイトを作りながら HTML/CSSとWebデザインの基本を楽しく学べる入門書です。 初学者が1冊目に読む本としてふさわしい内容を盛り込んでいるため、 これを読めば必要な基礎知識がひととおり身につきます。 制作できるサイトは計4種。 初歩的な内容から少しずつレベルアップしていき、 Flexboxレイアウト・CSSグリッドレイアウト・ レスポンシブデザイン・CSSアニメーションも作れるようになります。 またコーディングの知識だけではなく、 学習を続ける上での学び方のコツやポイントも紹介。 知識ゼロからスタートした人でも、1冊を読み終えるころには 自ら学習を深めていけるようになるでしょう。 ■わかりやすい！楽しい！ポイント ・やさしく要点をおさえた解説 ・手を動かして作ることを重視した構成 ・おしゃれでバリエーション豊かなサンプルサイト ・豊富な図解とイラスト、キャラクターによるガイド ・重要ポイントの理解を助ける補足動画 ■こんな方におすすめ！ ・Webサイト制作をゼロから学びたい初心者 ・1冊目の入門書を探している人 ・Web制作の仕事を目指している人 ■学習をサポート！嬉しい4大特典つき （※翔泳社サイトにて無料のID登録とダウンロードの必要があります） 1.サンプルサイトのXDデータ - 画像の切り出しや色/数値抽出の練習用に - デザインファイルの作り方の参考に 2.特典PDF：Webサイトの公開方法 - 最後に必要な公開作業の手順も解説！ - レンタルサーバー/ドメインについてやFTPソフトの使い方 3.制作に役立つおすすめサイト集 - 実際のしごとで使っているサイトを厳選！ - Webデザイン編/コーディング編と合計、約50サイトを紹介 4.初学者必携のチートシート - 横において学習すると学びやすい！ - Flexboxレイアウト/CSSグリッドレイアウト/CSSのショートハンド/キーボード入力サポートの4種 Part1：HTMLを書いてみよう 01章　ウォーミングアップをしよう 02章　HTMLのきほんを学ぼう Part2：SNSリンク集を作ってみよう 03章　CSSのきほんを学ぼう 04章　SNSリンク集のCSSを書いてみよう Part3：2カラムページを作ってみよう 05章　ブログサイトのHTMLを書いてみよう 06章　ブログサイトのCSSを書いてみよう Part4：1カラムページを作ってみよう 07章　Web招待状サイトのHTMLを書いてみよう 08章　Web招待状サイトのCSSを書いてみよう 09章　CSSアニメーションをつけてみよう 10章　レスポンシブウェブデザインに対応させよう Part5：複数ページのサイトを作ってみよう 11章　制作の流れとWebデザインのきほん 12章　レストランサイトのCSSを書こう（モバイル） 13章　レストランサイトのCSSを書こう（PC） 14章　参考サイトの活用方法を学ぼう 15章　Webサイトを公開する準備をしよう

入門書のベストセラーが最新トレンドに対応 累計10万部のベストセラーが、現代のトレンドに対応して大改訂！ 1つのストーリーに沿ってWebサイト作りとHTML&CSSの基本がスラスラ学べる、入門書の決定版！ 第3版では現代のトレンドにあわせて制作するサイトを一新。PC・モバイル端末に対応したサイト作りの全手順を、図入りでとことん丁寧に解説しています。 これからWeb制作を始める人にも、HTML・CSSを学び直したい人にもおすすめの、充実の内容です！ 最新のHTML Living Standardに準拠。Windows/Mac対応。 Chapter01 Webサイト制作を始める前に 01 Webサイトとその構成要素 02 Webブラウザの機能と種類 03 Webサイトを公開するまで 04 制作に使うアプリのインストール Chapter02 HTMLの基礎 01 HTMLはWebページを制作するための言語 02 HTMLの基本的な書式 03 親子、子孫、兄弟 ～HTMLの階層関係 Chapter03 制作の準備と基本のHTML 01 Webサイト制作の準備 02 すべてのページに共通するHTMLタグ Chapter04 テキストの表示 01 見出し 02 段落 03 番号なしリスト（非序列リスト） 04 要素のグループ化 05 コメント文 06 ヘッダーにナビゲーションを設置 07 キーボードで入力しにくい文字の表示 08 テーブル（表） Chapter05 リンクと画像の挿入 01 サイト内リンクと相対パス 02 外部サイトへのリンクと絶対パス 03 ページ内リンク 04 画像の挿入 05 画像＋リンク Chapter06 CSSの基礎 01 HTMLの「見た目」を整えるCSS 02 CSSの基本的な書式 03 主なセレクタと書き方 04 CSSを書く場所 05 CSSファイルの作成とHTMLとの関連付け Chapter07 テキストのスタイル、背景色、ボックスモデル 01 CSSのコメント 02 ページ全体のフォントやテキストの設定 03 個別のテキストのスタイル変更 04 リンクテキストのスタイル 05 テキストと画像の行揃え 06 背景色の設定 07 ボックスモデル① マージンとパディング 08 ボックスモデル② ボーダー 09 メインコンテンツを中央揃えに 10 画像の伸縮 Chapter08 スタイルの上書き、フレックスボックス、テーブルの整形 01 スタイルの上書き 02 繰り返す背景画像 03 デフォルトCSSの調整 ～リストの「・」をなくす 04 ナビゲーションを横に並べる 05 繰り返さない背景画像 06 背景画像の表示方法を調整 07 テーブルの整形 Chapter09 2ページ目以降のHTMLとグリッドレイアウト 01 ホームページ以外のファイルを作成 02 各ページにヒーロー画像を表示する 03 番号付きリスト ～アクセスページのHTMLを編集 04 メニューページのHTMLを編集 05 メニューページのスタイルを設定 Chapter10 フォームを使うページの作成 01 フォームの基礎知識 02 お問い合わせページの概要 03 フォーム全体の親要素 04 セレクトリスト 05 ラジオボタンとチェックボックス 06 テキストフィールド 07 テキストエリア 08 送信ボタン 09 ラベル 10 フォームのスタイル 11 送信ボタンのスタイル Chapter11 モバイル端末に対応する 01 レスポンシブデザイン 02 ビューポートの設定 03 メディアクエリとブレイクポイント 04 ナビゲーションを調整 05 メインコンテンツの左右にスペースを作る 06 ホームページのヒーロー画像のサイズを調整 07 メニューページの列数を変更 Chapter12 Webサイトを公開する 01 Webサイト公開までの準備 02 Webサーバーに接続 03 ファイルのアップロード 04 Webサイトの最終確認

デザインでない人のための、デザインの定番基本書。待望の第4版！ デザインの「4つの基本原則」。これを知るだけで、あなたのデザインはずっとぐっと、良くなります。 プロではなくても、読みやすいデザイン、伝わるプレゼン資料、わかりやすいレイアウトを作りたい。 そんなあなたのための、デザインの基本書です。 ●本書の対象読者 仕事で、学習で、「デザイン」や「レイアウト」をしなければならない場面は、多々あります。 本書は、プロではないし、デザインの学習に割ける時間はあまりないものの、自分の作るページや制作物を見栄え良くする方法を知りたい、という人のための本です。 ●本書の特徴 1.デザインの「4つの基本原則」がわかる 近接、整列、反復、コントラスト……デザインの4つの基本原則として知られるこれらを最初に提示したのは本書です。良い例、悪い例を挙げて、具体的に原則を解説していきます。 2.作例を多数解説 基本原則を適用して、名刺、チラシ、パンフレット、広告などをデザインする際のテクニックを解説しています。考え方だけでなく、どのように原則を使っていけば良いかが、よくわかるでしょう。 3.活字を用いたデザインを解説 文字および活字は、デザインにおいて大きな役割を担っています。コミュニケーションを強化するための、タイポグラフィの基本からアレンジまで、解説します。 4.日本語版での追加項目 日本語版での追加項目として、日本語を使ったデザインでの「4つの基本原則」の適用方法を、名刺、フライヤー、ウェブなどの作例を用いて解説しています。 『この本がデザイン学校の4年間の代わりになる、と言うつもりはありません。また、この小さな本を読めば、自動的に優れたデザイナーになれる、と言うつもりもありません。しかし、あなたがページを見る目は確実に変わるでしょう。この本の基本原則に従えば、あなたの作品が、もっとプロらしく、組織化され、一体化され、おもしろくなることを保証します。』（著者「まえがき」より） 第1版発売から18年ずっと売れ続けているロングセラー、待望の【第4版】の登場です。 　　はじめに　──Is this book for you? Part1：Design Principles［デザインの原則］ Chapter 1　イントロダクション 　　ジョシュアツリーの悟り 　　4つの基本原則 Chapter 2　近接 　　近接のまとめ 　　　　基本目的 　　　　実現方法 　　　　避けること Chapter 3　整列 　　整列のまとめ 　　　　基本目的 　　　　実現方法 　　　　避けること Chapter 4　反復 　　反復のまとめ 　　　　基本目的 　　　　実現方法 　　　　避けること Chapter 5　コントラスト 　　コントラストのまとめ 　　　　基本目的 　　　　実現方法 　　　　避けること Chapter 6　4つのデザイン原則の復習 　　近接 　　整列 　　反復 　　コントラスト 　　　　Little Quiz 01　デザインの原則 　　　　Little Quiz 02　どこから手を付けますか？ 　　まとめ Chapter 7　カラーを使ったデザイン 　　素晴らしいカラー・ホイール 　　色と色の関係 　　　　補色 　　　　トライアド 　　　　スプリット・コンプリメント・トライアド 　　　　類似色 　　シェードとチント 　　　　シェードとチントを自分で作る 　　　　単色的な組み合わせ 　　　　シェードとチントの組み合わせ 　　トーンに注意 　　暖色対寒色 　　どこから選択を始めるか 　　CMYK対RGB；印刷対画面 　　　　Little Quiz 03　色 Chapter 8　おまけのチップス&トリック 　　パッケージを作る 　　名刺 　　　　名刺デザインのチップス 　　レターヘッドと封筒 　　　　レターヘッドと封筒のデザインのチップス 　　チラシ 　　　　チラシ・デザインのチップス 　　ニュースレター 　　　　ニュースレター・デザインのチップス 　　パンフレット 　　　　パンフレット・デザインのチップス 　　ハガキ 　　　　ハガキ・デザインのチップス 　　広告 　　　　広告デザインのチップス 　　履歴書 　　　　履歴書デザインのチップス 日本語版補足：日本語によるデザインサンプル（解説：小原 司） 　　すべての原則が入ったカフェのメニュー 　　日本語で見る4つの基本原則 　　名刺 　　　　反復について 　　フライヤー 　　　　がんばらないと頭に内容が入ってこない 　　　　情報の優先順位がわかる 　　ウェブ（メニュー） 　　　　どこに何があるかイマイチわからない 　　　　帯を入れることで引き締まった印象に 　　ウェブ（申し込みフォーム） 　　　　要素の左をそろえて整列させたつもりが…… 　　　　整然としていてスムーズに入力が進められる 　　ウェブ（画像と見出しとボタン） 　　　　良さそうで読みにくいレイアウト 　　　　意識せずともグループが見えてくる 　　日本語によるデザインサンプルのまとめ Part2：Designing With Type［活字でデザインする］ Chapter 9　欧文タイポグラフィの基本 　　句読点の後はスペース１個 　　クオーテーションマーク 　　アポストロフィ 　　　　Little Quiz 04　アポストロフィ 　　ダッシュ 　　　　ハイフン「-」 　　　　Enダッシュ（エンダッシュ）「―」 　　　　Emダッシュ（エムダッシュ）「―」 　　特殊文字 　　アクセント記号 　　大文字 　　下線 　　カーニング 　　ウィドーとオーファン 　　いろいろなこと Chapter 10　活字（と人生） 　　協調 　　衝突 　　コントラスト 　　まとめ Chapter 10　活字のカテゴリー 　　オールドスタイル（Oldstyle） 　　モダン（Modern） 　　スラブセリフ（Slab serif） 　　サンセリフ（Sans serif） 　　スクリプト（Script） 　　デコラティブ（Decorative） 　　意識的に 　　　　Little Quiz 05　活字のカテゴリー 　　　　Little Quiz 06　太さの推移 　　　　Little Quiz 07　セリフ 　　まとめ Chapter 12　活字のコントラスト 　　サイズ 　　太さ 　　構造 　　　　Little Quiz 　　フォーム 　　方向 　　色 　　コントラストを組み合わせる 　　まとめ 　　　　Little Quiz 08　コントラストか衝突か 　　　　Little Quiz 09　いいとダメ 　　　　コントラストを組み合わせる練習 　　日本語版補足：和文のための補足（解説：米谷 テツヤ） 　　　　文字の幅 　　　　和文活字のカテゴリー 　　　　和文活字のコントラスト Part3：Extra Chapter 13　参考になりましたか？ 　　手順 　　練習 　　では、これを再デザインしてください Chapter 14　解答と回答例 Chapter 15　この本で使った書体 Appendix 　　ミニ用語解説 　　参考資料

Web制作に必要な実践の知識が身につく！ 【全国の書店員さんがオススメする本（2021年度 CPU大賞）第1位受賞!】 【前人未到、2冊連続で書店員さんから大賞に選ばれる快挙！】 読者の圧倒的な支持！シリーズ35万部突破の大ヒット! 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 制作に関する質問ができるサイト

体系的に学ぶ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 特殊効果

予測しやすい、保守しやすい、最利用しやすい、拡張しやすい-コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説! 第1章 CSSにおける設計とは 第2章 CSSの基本を振り返る 第3章 コンポーネント設計のアイデア 第4章 コンポーネント設計の実践 第5章 CSSプリプロセッサを用いた設計と管理 第6章 コンポーネントの運用に必要なツール 第7章 Web Componentsの可能性

「デザイン=楽しい」を実感できる!デザイナーのあたまの中を豊富なビジュアルでひも解く。 1 編集×デザイン(編集とデザインの関係 デザインしてみよう) 2 デザイナーの7つ道具(ダイジ度天秤-どっちがダイジ?を口癖にしよう。 スポットライト-主役を狙って光を当てる。 擬人化力-いいデザインていいキャラしてます。 連想力-ヒントは世の中にあふれてる。 翻訳機-言葉と絵のバイリンガルになろう。 虫めがね-ふところに隠し持った、最終兵器。 愛-そのデザインを決めるもの。) 3 デザインの素(文字と組み-布地を織り上げるように組む。 言葉と文章-言葉の「らしさ」をつくる。 色-右脳と左脳で考えてみる。 写真-イメージの力に向き合う。 グラフとチャート-ロジカル、ときどきグラフィカル。)

目的別にデザインが探せて、すぐに使える！ ＼＼40,000部突破したベストセラーが4年半ぶりの大改訂！／／ Webデザインに関わる全ての人へ 想像力を高める最新の良質サイト429選！ 優れた実例を見ることは新しい作品を生み出す力になる！！ ・これからはじめる人に！ ・打ち合わせのお供に！ ・困った時のアイデア出しに！ オススメ！ 見るだけでWebデザインのトレンドが自然とわかる！ ―――――――――― デザインは見て学ぶ ―――――――――― 本書は429点の厳選した良質なWebサイトを集めた見本集です。第2版ではほぼすべてのデザインを見直し全面的な改訂を行っています。今後も長く使える最新のデザインを取り揃えました。 レイアウト、配色、フォント、素材、動き、プログラムなど、ページを構成しているデザインパーツまで分解しているので、Webサイトを見るだけではわからなかった「デザインの魅力の理由」がわかり、サイトの制作にもすぐに活用できます。 「アイデアが見つからない」「イメージはあるけど、何が必要で、どう作ればいいかわからない」といった時に必見の価値あり。パラパラめくって好きなページを見つけ出し、デザイン制作に役立ててください。 ―――――――――― 本書の対象読者 ―――――――――― ・デザインのアイデアが見つからない方 ・デザインの制作に自信が持てない方 ・クライアントと打ち合わせする際に方向性となる見本が欲しい方 ・ Webデザインの最新トレンドを知りたい方 PART 0 Webデザインの基礎知識 PART 1 印象から考えるデザイン PART 2 配色から考えるデザイン PART 3 業種・ジャンル別から考えるデザイン PART 4 レイアウトや構図から考えるデザイン PART 5 素材・フォント・プログラムを使ったデザイン PART 6 トレンドのデザイン PART 7 パーツ別デザイン PART 0 Webデザインの基礎知識 PART 1 印象から考えるデザイン PART 2 配色から考えるデザイン PART 3 業種・ジャンル別から考えるデザイン PART 4 レイアウトや構図から考えるデザイン PART 5 素材・フォント・プログラムを使ったデザイン PART 6 トレンドのデザイン PART 7 パーツ別デザイン

HTML5/CSS3を使ってスタンダード・グリッド・シングルページレイアウトの3サイトを制作し実践的なコーディングを学ぶ！ フロントエンドエンジニアから学ぶ制作現場の実践的なテクニック！ 本書は、HTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。 現在主流なWebページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。 実際のWeb 制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます。 3つのサイトを作成することで、「本格的なレイアウトのサイトを作れた」「こういったレイアウトの場合こうコーディングすればいいという具体的なテクニックがわかった」というような手応えを得やすく、学ぶことへのモチベーションが下がらずに高まる構成にしています。 駆け出しのフロントエンドエンジニアや、HTML/CSSコーディングに興味はあっても実践の機会がないデザイナー、バックエンドエンジニアなどが、実際にサイトを作ることを通してスキルアップすることを目標とした一冊です。 PART0　イントロダクション 　A　本書で作成するサイト 　B　コーディングの進め方 　C　デベロッパーツールの使い方 　D　本書の読み方 PART1　スタンダードレイアウト 　01　このPARTで作るサイト 　02　ベースのコーディング 　03　ヘッダーのコーディング 　04　メイン領域のコーディング 　05　サイドメニューのコーディング 　06　フッターのコーディング PART2　グリッドレイアウト 　07　このPARTで作るサイト 　08　ベースのコーディング 　09　ボックスのコーディング 　10　中ボックスと大ボックスのコーディング 　11　ナビゲーションのコーディング PART3　シングルページレイアウト 　12　このPARTで作るサイト 　13　ベースのコーディング 　14　ヘッダーのコーディング 　15　セクション1（ABOUT ME）のコーディング 　16　セクション2（WORKS）のコーディング 　17　セクション3（MY SKILLS）のコーディング 　18　セクション4（CONTACT）とフッターのコーディング 　19　スマートフォン対応の下準備 　20　スマートフォン対応のコーディング

HTMLとCSSの使い方を、目的引き、やりたいこと引きでまとめたリファレンスです。HTML＆CSSの基本から、テキスト、リンク、リストやメニュー、入力フォーム、レイアウト、レスポンシブ対応など、目的ごとにタグやプロパティの使い方を詳しく解説しているので、「こんなことをしたい！」というときにすぐに調べられます。現在ホームページ制作を学んでいる方にも、Webデザイナーとして活躍している方にもおすすめの1冊です。 1章　HTMLとCSSのしくみ 2章　Webページをつくる 3章　文章を書く 4章　文字を強調する、装飾する 5章　リンクを設定する 6章　リストやメニューをつくる 7章　画像を表示する 8章　画像、音声、動画を埋め込む 9章　表をつくる 10章　フォームをつくる 11章　ボックスを使って見た目を変える 12章　レイアウトやデザインを変える 13章　段組や複数カラムのレイアウトをつくる 14章　パソコン以外でも見やすい表示にする 15章　ソーシャルメディアや外部サイトと連携する

これから本気で学びたい人の最高の教科書！ レスポンシブWebデザインが“当たり前”の時代の、新しいHTML・CSSの書き方ガイド 現在のHTML・CSSの書き方は、少し前までのHTML・CSSの書き方とは大きく変わっています。本書ではスマートフォン時代に求められる、HTMLを組むときの考え方からCSSの実践的なテクニックまでをきちんと解説。たくさんのサンプルコードに触れていただくことで、最新の、実践で役立つ力がきちんと身につきます。 ＜本書の対象読者＞ ● これからWebサイト制作を学びたい初心者の方 ● 最新のHTML・CSSの書き方を知りたい経験者の方 ● フレックスボックスを使ったページレイアウトについて知りたい方 CHAPTER 1 Webサイトの仕組みを知ろう SECTION 1 Webサイトが表示される仕組み SECTION 2 URL SECTION 3 Webサイトに使われるファイルの種類 SECTION 4 Webサイトのファイル・フォルダ構造 SECTION 5 Webサイトの制作環境を整えよう CHAPTER 2 HTMLの基礎知識とマークアップの実践例 SECTION 1 HTMLとは SECTION 2 HTMLの書式 SECTION 3 HTMLドキュメントの構造 SECTION 4 マークアップの考え方トレーニング CHAPTER 3 CSSの基礎知識とページデザインの実践例 SECTION 1 CSSの基礎知識 SECTION 2 CSSの書式 SECTION 3 ページにCSSを適用するトレーニング CHAPTER 4 テキストの装飾 SECTION 1 見出しや本文のフォントサイズを調整する SECTION 2 読みやすい行間にする SECTION 3 段落のテキストをリード文だけ太字にする SECTION 4 表示するフォントを設定する SECTION 5 テキストの行揃えを変更する SECTION 6 2行目以降を1文字下げる SECTION 7 テキスト色を変更する SECTION 8 見出しにサブタイトルをつける CHAPTER 5 リンクの設定と画像の表示 SECTION 1 テキストにリンクを追加する SECTION 2 テキストリンクにCSSを適用する SECTION 3 画像を表示する SECTION 4 画像にリンクをつける SECTION 5 画像にテキストを回り込ませる CHAPTER 6 ボックスと情報の整理 SECTION 1 インラインボックスとブロックボックス SECTION 2 箇条書き（リスト）のマークアップ SECTION 3 リストを情報の整理に使う SECTION 4 上手なの使い方 SECTION 5 CSSのボックスモデル SECTION 6 パディング、ボーダー、マージンの設定 SECTION 7 2つ以上のボックスを並べる SECTION 8 ボックスのデザインを調整する CHAPTER 7 テーブル SECTION 1テーブルを作成する SECTION 2アクセシビリティを考慮したテーブル SECTION 3 テーブルのデザインバリエーション CHAPTER 8 フォーム SECTION 1 フォームとデータを送受信する仕組み SECTION 2 さまざまなフォーム部品 SECTION 3 標準的なフォームの例 CHAPTER 9 ページ全体のレイアウトとナビゲーション SECTION 1 実践的なコーディングのために知っておきたいCSSの知識 SECTION 2 シングルコラムレイアウト SECTION 3 フレックスボックスを使ったコラムレイアウト SECTION 4 ナビゲーションメニューを作成する CHAPTER 10 レスポンシブWebデザインのページを作成しよう SECTION 1 レスポンシブWebデザインとは SECTION 2 レスポンシブ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サイトを管理する

Webページをステップ・バイ・ステップで作りながら、ノウハウを身につける。HTML5とCSS3(スタイルシート)の両方を使った最新の制作方法をマスター。応用テクニックやその仕組み、さらに踏み込んだ各種の情報もTIPSとして網羅。 0 下準備 1 基本的なページの作成 2 レイアウトとデザイン 3 画像の表示 4 リンクとナビゲーション 5 インデックスページの作成 6 テーブルとフォーム 7 仕上げとアレンジ

やさしく学べる、入門書の決定版！ ３万部突破のベストセラーが充実のアップデート！ JavaScriptをこれから始める人にも、前に挫折したことのある人にも。 手を動かしてサンプルをひとつずつ作っていくことで、知識だけでなく、 現場で活きる、応用・実践につながる基礎力が「この一冊で」身につきます。 ポイント１「サンプルが楽しい。」 よくある“勉強のためのサンプル”を可能な限り排除し、「こういうの見たことある！」「こういうのが作ってみたかった！」というような、実際に仕事に使えそうなサンプルを集めました。なので、最初の「やるぞ！」というモチベーションを維持したまま、最後のページまで読み進めることができます。 ポイント２「つまずきポイントを徹底カバー。」 初学者がつまずきやすい・挫折しやすいポイントを丁寧に拾って「これはどういうこと？」に対処する解説を用意しています。 共感しながら読み進められる文章で「絶対に挫折しない・させない」内容に仕上げました。 【第２版の主な改訂内容】 ・ECMA Scriptの新規格に対応。新しい機能・文法のうち、入門者でも取り組みやすく便利なものを紹介 ・書籍内の情報を2019年の状況にあわせて全面的にアップデート ・3～6章のサンプルを更新。解説内容をより丁寧にわかりやすくブラッシュアップ ・7章は全面刷新し、より現代的・実践的なテクニックを学べる内容に 【こんな方におすすめ！】 ・HTMLとCSSは何となくわかっていて、JavaScriptもやらないと…と思いつつなかなか手がつけられない方 ・「フロントエンドエンジニア」という言葉に惹かれる方 ・Web業界に入りたい方、または入りたての方 ・「他のWebデザイナーに差をつけたい！」というWebデザイナーの方 ・「フロントエンドエンジニアやWebデザイナーとまともにコードの話をしたい！」というWebディレクターの方 やさしく学べる、入門書の決定版！ Chapter1 イントロダクション 1-1 これからJavaScriptを始める皆さんへ 1-2 JavaScriptってどういうもの？ 1-3 JavaScriptの「プログラミング」と動作の仕組み 1-4 各章の概要 1-5 用意するツール 1-6 サンプルデータのダウンロード 1-7 テンプレートを準備して、いざ出発！ Chapter2 アウトプットの基本 2-1 コンソールにアウトプット ～開発ツールを使ってみよう 2-2 JavaScriptはどこに書く？ ～タグとJavaScriptの記述場所 2-3 ダイアログボックスを表示する ～window.alert() 2-4 HTMLを書き換える ～要素を取得する・コンテンツを書き換える Chapter3 JavaScriptの文法と基本的な機能 3-1 確認ダイアログボックスを表示する ～条件分岐（if） 3-2 入力内容に応じて動作を変更する ～変数、定数 3-3 動作のバリエーションを増やす ～条件分岐（else if） 3-4 数当てゲーム ～比較演算子、データ型 3-5 時間で異なるメッセージを表示する ～論理演算子 3-6 １枚、２枚、３枚…と出力する ～回数が決まっている基本の繰り返し 3-7 コンソールでモンスターを倒せ！ ～回数が決まっていない繰り返し 3-8 税込価格を計算する ～ファンクション 3-9 FizzBuzz ～算術演算子 3-10 項目をリスト表示する ～配列 3-11 アイテムの価格と在庫を表示する ～オブジェクト Chapter4 インプットとデータの加工 4-1 フォームの入力内容を取得する ～入力内容の取得とイベント 4-2 わかりやすく日時を表示する ～Dateオブジェクト 4-3 小数第◯位で切り捨てる ～Mathオブジェクト Chapter5 一歩進んだテクニック 5-1 カウントダウンタイマー ～時間の計算とタイマー 5-2 プルダウンメニューで指定ページへ ～URLの操作、ブール属性の設定 5-3 プライバシーポリシー承認パネルを作る ～クッキー（cookie） 5-4 イメージの切り替え ～サムネイルのクリックによる画像の切り替え 5-5 スライドショー ～ここまでの知識を総動員 Chapter6 jQuery入門 6-1 開閉するナビゲーションメニュー ～要素の取得とclass属性の追加・削除 6-2 ドロワーを作ってみよう ～CSSと組み合わせてアニメーションを実現 6-3 空き席状況をチェック ～AjaxとJSON Chapter7 外部データを活用したアプリケーションに挑戦！ 7-1 あなたはいまどこ？ ～位置情報（navigator.geolocation） 7-2 Web APIを使ってみよう ～OpenWeatherMap APIで天気予報

シリーズ累計35万部突破！ デザイン書史上、空前絶後のベストセラー！ 「デザイナーのバイブル」「デザイナーがすすめるデザイン本」など、 SNSでも話題沸騰の「よはく」「フォント」「あしらい」に続く シリーズ第4弾が登場です！！！ パッと一目で内容が伝わるデザインのポイントは何でしょう？ 洗練されたレイアウト？　美しい写真やイラスト？ もちろんそれらも大事です。 でもイメージを一目で伝えるには 意図に合った色選びが必須！ 配色は感覚やセンスではなく知識です。 色の知識をプラスすれば、 あなたのデザインがさらに素敵になること間違いなしです。 １　POP COLOR ２　NUANCE COLOR ３　COOL COLOR ４　GIRLY COLOR ５　AGE COLOR ６　EVENT COLOR ７　SALES COLOR ８　BUSINESS COLOR ９　LUXURY COLOR 覚えておきたい配色技法7 他にもいろいろ配色技法8 色の持つイメージ

各種講座や書籍でHTML&CSSの学習を終えても、実際の現場では、求められるレベルの業務をこなせない人が少なくありません。デザイナーから渡されたデザインの全体を把握・解釈して、HTML&CSSで書き起こす力が弱い傾向にあります。 本書はWebページのデザインをHTML&CSSで作成するために必要なチカラを身につけて、これまでに学習してきた基礎知識を、Webデザインの現場で「使える力」にレベルアップします。 Chapter1　デザインからHTMLを作る「流れ」 Chapter2　レイアウトの大枠を組み立てる Chapter3　メインコンテナを組み立てる Chapter4　ヘッダーを組み立てる Chapter5　フッターを組み立てる Chapter6　ホームのページを組み立てる Chapter7　カラムレイアウトとサイドバー Chapter8　フォームが含まれるページ

「4つのレイアウトパターン」と「レスポンシブデザイン」を、実際に手を動かして作りながら、サイト制作の基本が学べる!ライブ感のあるチュートリアル学習により、まるでWebデザイン会社でOJT(オン・ザ・ジョブ・トレーニング)を受けているような、体験型の独習書です。 1 知っておきたいサイトとデザインのきほん知識 2 サイト制作の前に準備しておくこと 3 知っておきたいHTMLのきほんと書き方 4 知っておきたいCSSのきほんと書き方 5 フルスクリーンページを制作する 6 シングルカラムページを制作する 7 2カラムページを制作する 8 グリッドレイアウトページの制作と動画の埋め込み 9 問い合わせページを制作する 10 マルチデバイス対応ページを制作する

HTML&CSSで表現するシンプルで使いやすいデザイン。 本書は、著者がこれまでに発信してきたWeb制作Tipsを一冊にまとめて、具体的な実装方法を解説した書籍です。 ・HTMLやCSSの基礎を学んできて、次のステップを踏みたい ・独学で学んできたので、他人のコードを見てみたい ・無駄なコードを省き、短縮化させたい ・よく見かけるあのデザイン、どう実装すればいいのか分からない このような方を対象として「デザインを見ただけで必要なHTMLタグとCSSコードをイメージし、実装できるようになる」をテーマに、Twitterでは紹介しきれなかったデザインアイデアを画像とともに詳しく解説するのが本書の役割です。 Web制作でよく使われる「背景・画像・写真装飾」「見出しやテキストの装飾」「レイアウト」「ボタンデザイン」と4つのデザインカテゴリーをメインに、お問い合わせフォームのUI、Google検索結果ページに反映する構造化データの書き方、デザインやコーディングを便利にするウェブサービスの紹介など、Web制作の現場で活用できる情報を詰め込んでいます。 ■本書の特徴 1．用途に合わせたデザインパターンを70種紹介 カテゴリーごとに豊富なデザインパターンを掲載しました。 シンプルで使いやすいデザインを網羅したので、現場ですぐに使えます。 2．デザインに合わせたコーディングが学べる デザインに合わせた最適なコードを本書では紹介しています。 コードの短縮化やモダンブラウザの新旧バージョンへの対応も解説しています。 3．サンプルコードですぐに実装できる 本書で紹介したコードはすべて購入者特典で配布します。 どなたでもすぐにデザインを実装できます。 ■本書の構成 Chapter1　背景・画像・写真装飾 Chapter2　見出しやテキストの装飾 Chapter3　レイアウト Chapter4　ボタンデザイン Chapter5　お問い合わせフォーム Chapter6　現場で使えるWebツールと素材配布サイト Chapter7　Google検索結果ページへの対策 Chapter1　背景・画像・写真装飾 Chapter2　見出しやテキストの装飾 Chapter3　レイアウト Chapter4　ボタンデザイン Chapter5　お問い合わせフォーム Chapter6　現場で使えるWebツールと素材配布サイト Chapter7　Google検索結果ページへの対策

Photoshopをこれからはじめたい初心者の方に大好評の「これからはじめるPhotoshopの本」2022年最新版が登場です。補正/トリミング/合成など、 Photoshopを使いこなすためのひととおりの基本操作はもちろんのこと、レタッチにあたっての基礎知識なども収録。付属の練習ファイルで楽しく効率的に学習を進められます。Photoshopをこれから学びたい全ての人にピッタリな1冊です！ Chapter1　Photoshopの基本操作を知ろう Chapter2　写真を補正しよう Chapter3　写真を加工しよう Chapter4　写真の一部を選択して補正しよう Chapter5　写真を合成しよう Chapter6　ポストカードを作ろう Chapter1 Photoshopの基本操作を知ろう 01 Photoshopを起動・終了しよう 02 ファイルを開こう 03 Photoshop のツールを選ぼう 04 パネルを操作しよう 05 画面を拡大・縮小しよう 06 操作を取り消そう 07 ファイルを保存しよう 08 フォントを追加しよう Chapter2 写真を補正しよう 01 写真の明るさを補正しよう 02 写真の色味を補正しよう 03 写真の彩度を補正しよう 04 写真をモノクロに補正しよう Chapter3 写真を加工しよう 01 写真の一部を切り抜こう 02 写真の余分な要素を削除しよう 03 写真に写っているものをコピーしよう 04 写真の特定の色をガラリと変えよう 05 写真の空を置き換えよう Chapter4　写真の一部を選択して補正しよう 01 暗い部分を明るく補正しよう 02 色域を指定して補正しよう 03 人物の肌をなめらかに補正しよう 04 特定のレイヤーを選んで補正しよう Chapter5　写真を合成しよう 01 合成用の素材を切り抜こう～人物編 02 合成用の素材を切り抜こう～えんぴつ編 03 切り抜いた画像を配置しよう 04 えんぴつをなじませよう 05 人物と背景をなじませよう Chapter6　ポストカードを作ろう 01 配置素材の準備をしよう 02 ポストカードのベースを作ろう 03 黒板の画像を配置しよう 04 お店のロゴを作ろう 05 ポストカードの見出しを作ろう 06 ポストカードに本文を入力しよう 07 かんたんな地図を作成しよう 08 作ったポストカードを自宅で印刷しよう

評価されるデザインには『法則』がある 多くの人に魅力的、センスがある、と評価されるデザインには『法則』『ルール』がある! センス0からのデザイナー養成講座を主宰する会社が教える、「見るだけでセンスが身につく、世界一簡単で画期的なデザイン入門書」。 デザインはだれにとっても他人事ではありません。仕事や生活のさまざまなシチュエーションで生きる「デザインセンス」が、最短最速で習得できる実用書です。 CHAPTER1：ビジネスパーソンの結果に差がつくデザインセンスとは？ CHAPTER 2：デザインセンスの高め方 CHAPTER 3：デザインセンスだけでも変わる人生 CHAPTER 4：センスいい「レイアウト」のルール CHAPTER 5：センスいい「配色」のルール CHAPTER 6：センスいい「フォント」のルール CHAPTER 7：センスいい「文字組み」のルール CHAPTER 8：センスいい「写真」のルール CHAPTER 9：センスいい「イラスト」のルール CHAPTER 10：センスいい「グラフ」のルール CHAPTER 11：センスいい「図解」のルール CHAPTER 12：デザインセンスの磨き方 CHAPTER 13：休日やスキマ時間でもっと磨けるデザインセンス

目的別にデザインが探せて、すぐに使える！ 目的別にデザインが探せるデザイン見本帳 1冊あれば今日のWebデザインのアイデアがすぐ見つかる！ 400点以上の良質見本から学べるWebデザインの基礎原則 ■この本のポイント ・良質なWebサイトの見本のみ厳選して紹介している。 ・デザインの理由や方向性を解説することで、デザインの作り方の理論が学べる。 ・詳しい解説とやさしい図版で、見本サイトを見るだけではわからないデザインのポイントがわかる。 ・デザインの切り口をつかむアイデアネタ帳としても使える。 ■本書の対象読者 ・Webデザインをこれから学びたい人、デザイナー初心者 ・Webデザインを学習する上で、まずは絵を見て感じ取りたい人 ・Webの見本サイトを見ただけでは、どのようにすればデザインが作れるのかわからない人 ・たくさんの最新のWebデザインを手元に置いてすぐに活用したい人 第0章 Webデザインの基礎知識 Webデザインの基礎知識 Webページの構成とワークフロー Webページに入るデザインパーツ WEBサイトで扱う画像 Webデザインとタイポグラフィー 色彩の基礎知識 配色の基礎知識 第1章 ユーザーに伝わる印象から考えるデザイン キュートで可愛いデザイン ポップで元気あふれるデザイン エレガントで気品に満ちたデザイン ナチュラルで優しいデザイン クールで先進的なデザイン ヴィンテージで憧れるデザイン ノスタルジックで郷愁感じるデザイン クラシックで格調高いデザイン 和を感じるデザイン 透明感のあるデザイン 子供向けのデザイン 女性らしいデザイン 男性らしいデザイン 高級感があるデザイン 信頼感があるデザイン 食べ物が美味しそうに見えるデザイン 春夏秋冬、季節を感じるデザイン 第2章 ロゴやカラーから考える配色デザイン ロゴやブランドカラーから考える配色 黄をメインカラーにした配色 橙をメインカラーにした配色 赤をメインカラーにした配色 ピンクをメインカラーにした配色 緑をメインカラーにした配色 青をメインカラーにした配色 紫をメインカラーにした配色 茶をメインカラーにした配色 白、グレーをメインベースカラーにした配色 黒をベースカラーにした配色 トーンを合わせた配色 第3章 サイトの業種・ジャンル別から考えるデザイン レストラン・カフェサイト 医療・病院サイト ファッションサイト 美容・エステサイト アートフェス・イベントサイト 音楽サイト ウェディングサイト アニメ・ゲームサイト 士業サイト 学校・幼稚園サイト ポートフォリオサイト ニュース・ポータルサイト ネットショップ コーポレートサイト スポーツ・フィットネスサイト 第4章 レイアウトや構図から考えるデザイン 安定感を持たせるグリッドレイアウト 遊び心を持たせるフリーレイアウト シンプルにすっきり見せる1カラムレイアウト 複数のマルチカラムレイアウト ビジュアルを沢山見せるタイル・カード型のレイアウト 対比させたい時に使うシンメトリーなレイアウト ビジュアルを印象付けるフルスクリーンレイアウト 線を効果的に使ったレイアウト 構図を意識したレイアウト 第5章 素材や書体、プログラムを効果的に使ったデザイン 1 写真をメインに使ったデザイン 2 たくさんの切り抜き写真を使ったデザイン 3 テクスチャを使ったデザイン 4 飾りパーツを使ったデザイン 5 イラストを使った親しみやすいデザイン 6 タイポグラフィを使ったデザイン 7 手書き文字を使ったあたたかみのあるデザイン 8 動画を効果的に使ったデザイン 9 動きを持たせたデザイン 10 インフォグラフィックスを用いて情報をわかりやすく伝えるデザイン 第6章 Webデザイントレンド 1 レスポンシブWebデザイン 2 Webフォントを使ったサイト 3 スプリットスクリーン 4 フラットデザインとマテリアルデザイン 5 マイクロ・インタラクション 6 大きなイメージや動画を使ったヒーローヘッダー 7 パララックスで見せる動きのあるサイト 8 カード型レイアウトとグリッドをあえて外したレイアウト 9 より鮮やかな配色 第7章 パーツ別デザイン ヘッダー グローバルナビゲーション 見出し ボタン・ページトップナビ テーブル フォーム ファビコン・アップルタッチアイコン フッター まとめサイトの紹介 サンプルサイト索引

Web制作者の圧倒的な支持を集めたナンバーワン入門書がついに改訂！　HTML5や最新のjQuery 1.9に対応し、スマートフォン用サンプルも追加しました。基礎から実践的なUI制作まで身に付きます！ Web制作者の圧倒的な支持を集めたナンバーワン入門書がついに改訂！　HTML5や最新のjQuery 1.9に対応し、スマートフォン用サンプルも追加しました。基礎から実践的なUI制作まで身に付きます！

Webサイト制作の流れを1冊でひととおり学べる！ 「コーディングしやすいデザインってどう作ればいいんだろう？」と思っているWebデザイナーさん。 「デザイナーにお願いするとき、どんな風に伝えればスムーズにいくんだろう？」と思っているマークアップエンジニアさん。 「とりあえず、Webサイトってどうやって作ればいいのか知りたい」と思っている勉強を始めたばかりの方。 本書はそんなみなさんの役に立つ1冊です。 昨今のWebサイト制作は、だんだんと複雑化してきています。 Webサイトを1つ作ろうと思ったら、デザイン、HTML、CSSなど、たくさんのことを勉強しなくてはいけません。本書は、そのようなWeb制作に関する知識を横断的にまとめました。 Webデザインだけ、またはHTMLとCSSだけを学ぶ書籍はありますが、その部分だけの理解だと、困ることもあります。 デザインを納品したけれど、コーダーさんにデータが使いにくいと言われてしまったり、逆にどんなデザインが欲しいのかを、うまくデザイナーさんに伝えられなかったり･･･。そのような「困る」を体験したことはないでしょうか。 本書は、Webサイトのデザインからコーディングまでを広く扱うことで、点ではなくつながった線として、Webサイト制作を学べるように構成されています。 具体的には、Part1「デザインの基本」では、一般的な「デザイン」の基本を学んだ上で、Webならではの特性をふまえて「Webデザイン」のセオリーを学びます。 Part2「Webサイト制作の基本」では、Webサイトを制作する際の実務的な知識を学びます。まず、Webサイトがどのようなフローで作られるのか、どのようなデータで構成されているのかなどを理解します。続いて、Webサイト制作の上で欠かせない HTMLとCSSについて、概要から具体的な書き方までを学びます。そして、JavaScriptについても概要を学びます。 Part3「Webサイトを制作する」では、、Part 1、Part 2までの内容をもとに、ひととおりのWebサイト制作の流れを学びます。Webサイトの目的を整理するところから設計、ワイヤーフレームの作成、デザインカンプの作成、マークアップとコーディングを行い、 1つのWebサイトを作る作業を追っていくことができます。 コンテンツの企画からページを公開するまでのデザイン～コーディング過程を実践することで、デザイン担当にとってはコーディング工程を、コーディング担当にとってはデザインのセオリーや意図を理解することができるでしょう。 異なる工程の作業内容に関する理解は、自身が担当するデータ制作の効率化にもつながります。Web制作の現場での作業がよりスムーズに効率よく進むようになることが、本書の目的です。 Contents Part 1デザインの基本 Chapter 1デザインとは Section 01 デザインする目的 Section 02 伝えたい相手に合わせたデザイン Section 03 「体験」をデザインする Chapter 2デザインのベーシックセオリー Section 01 要素を揃える・均等に配置する Section 02 要素の差別化とグルーピング Section 03 色の基本 Section 04 色が持つ基本的なイメージ Section 05 色の組み合わせ Section 06 フォントの基本 Section 07 読みやすい文字レイアウト Section 08 効果的な文字レイアウト Section 09 余白でイメージを表現する Chapter 3 Webサイトデザインのセオリー Section 01 Webサイトをデザインするとは Section 02 「使う」ことを意識したデザイン Section 03 ユーザーの経験値を利用した構成 Section 04 操作するためのデザイン Section 05 Webサイトの配色 Section 06 フォントの実際 Section 07 操作環境の多様化に対応する Part 2 Webサイト制作の基本 Chapter 1 Webサイトを構成するデータ Section 01 Web制作のフローと制作のための準備 Section 02 ページを構成する要素 Section 03 ページを構成するデータ Section 04 Web制作のためのツール Chapter 2 HTMLの基本 Section 01 HTMLとは Section 02 要素の活用 103 Section 03 ページに関する情報を記述する Section 04 HTMLのベーシックな記述例 Chapter 3 CSSの役割 Section 01 CSSとは Section 02 CSSの記述方法 Section 03 CSSセレクタとプロパティの種類 Section 04 CSSの応用 Chapter 4 JavaScriptの利用 Section 01 JavaScriptとは Section 02 JavaScriptの利用例 Section 03 jQueryの活用 Part 3 Webサイトを制作する Chapter 1 Webサイト制作の準備 Secti on 01サイトに関する情報の整理 Section 02ページの設計 Chapter 2 Webサイトをデザインする Section 01トップページをデザインする Section 02ページの細部を調整する Section 03メインビジュアルを制作する Section 04タブレット用／スマートフォン用に展開する Section 05画像をパーツとして抽出する Column　Photoshopの基本 Chapter 3 Webサイトページのベースを構築する Section 01サイトのベースを用意する Section 02 HTMLでコンテンツを流し込む Section 03 HTMLで詳細なマークアップをする Section 04 CSSファイルを準備する Section 05 CSSでページのベースを設定する Chapter 4ページコンテンツの詳細をレイアウトする Section 01ヘッダーエリアのレイアウトを指定する Section 02メインビジュアルのレイアウトを指定する Section 03 3カラム構成のコンテンツエリアをレイアウトする Section 04新着情報テキストをレイアウトする Section 05フッターエリアのレイアウトを指定する Section 06 JavaScriptを利用する Section 07ウィンドウサイズに合わせてコンテンツの表示をコントロールする Section 08モバイルデバイス用のメニューを追加する Section 09モバイルデバイス用に表示を整える Chapter 5 Webサイトを公開する Section 01サイト表示を最終確認する Section 02サーバを準備してデータを公開する

初めての人でも作れる！HTMLがわかる！ ホームページ作りを始めたい、HTMLを学びたい人のための入門書。本の通りに進めていけば、HTMLの書き方、画像の扱い方、サーバーに公開する方法まで、ホームページ作りの基礎がすべて身につきます。CSS、掲示板、Twitterボタンの設置等も解説。Windows対応。 CHAPTER1 ホームページを作る準備をしよう 1 ホームページってどんなもの？ 2 インターネットとは 3 Webブラウザとは 4 ホームページ作成の流れ 5 サイトのタイトル・構成・デザインを決める 6 素材を集める 7 ホームページで扱う画像 8 ファイル名・フォルダ―名をつけるときの注意 9 インターネットのマナー CHAPTER2 ホームページを作ろう 1 ホームページ作成の準備をする 2 HTMLの書き方 3 最初のWebページを作る 4 文字の書籍を設定する 5 ページの背景に色をつける 6 ページに画像を配置する 7 ページにサイトの案内を作る 8 リンク先のページを作る 9 表組を作成する 10 リストに番号をつける 11 画像の横に文章を入れる 12 リンクを張る CHAPTER3 ホームページを公開しよう 1 ホームページ公開の流れ 2 Webサーバーを用意する 3 FTPソフトを用意する 4 Webサーバーにデータを送る CHAPTER4 ホームページを飾りつけよう 1 CSSを使ってデザインを作り込む 2 CSSを使ってレイアウトをする 3 Webフォントを使う 4 特定のフォルダ―にパスワードをかける CHAPTER5 無料ソフト＆サービスを利用しよう 1 無料サービスやソフトでホームページを充実させる 2 掲示板を設置する 3 フリー素材を活用する 4 画像サイズを変更する 5 画像を編集する 6 アクセスカウンターを設置する 7 Webアルバムを利用する 8 Twitterのボタンをホームページに貼り付ける 9 検索エンジンへ登録する CHAPTER6 HTML＆CSSリファレンス

HTML5を理解する、HTML5によるコンテンツデザインを行うための、Webデザイナー/クリエイター必携の解説書。HTML5(勧告候補)対応、HTML5.1やHTML Living Standardの情報も掲載。 1 HTML5とインフォメーションデザイン-誰のためのWebページか 2 Webページの基本-Webページを構成する最も基本的な要素 3 セクション-セマンティクスによる文書構造の明示 4 メタデータ-付加情報による詳細の明示 5 外部コンテンツ-HTML5で扱うことができる画像・動画・各種コンテンツ 6 段落書式-明確に意味が定義された段落書式 7 文字書式-明確に意味が定義された文字書式 8 テーブル-表組コンテンツの表示 9 フォーム-強化されたコントロール 10 インタラクティブ-ユーザーアクションを求めるインターフェースの設定

スマートフォン対応サイトではじめるまったく新しいHTML&CSSの入門書! 本書はWebサイト制作の基礎体力となるHTMLとCSSの「いちばんやさしい」入門書です。 最大の特徴は、実際のWeb制作現場のトレンドを反映し、スマートフォン向けサイトを題材としていること。 モバイル対応サイトを作りながら、HTMLとCSSの基本文法、役割、使い分けについて、ステップ・バイ・ステップで学ぶことができます。 もちろん、パソコン表示への対応方法も解説し、最終的には「レスポンシブデザイン」と呼ばれるWebサイトの制作をトータルで学べるような構成にしてあります。 正しい知識を学び、それを使いこなすことは、結果的にSEO対策やアクセシビリティの向上といった、Webサイトのトレンドにもつながります。 ・趣味でサイトを作ってみたい ・スキルアップにつなげたい ・仕事でどうしても必要になった などなど、「HTMLとCSSの基本を身につけたい」方はぜひ本書をお読みください。 Chapter 1 Webサイト制作の準備をしよう Chapter 2 HTMLの基本を学ぼう Chapter 3 Webページのひな形を作ろう Chapter 4 HTMLでトップページを意味付けしよう Chapter 5 CSSの基本を学ぼう Chapter 6 CSSでトップページを装飾しよう Chapter 7 メニューページとアクセスページを作ろう Chapter 8 お問い合わせページを作ろう Chapter 9 WebサイトをPCに対応させよう Chapter 10 Webサイトを公開しよう

Webデザイナー養成講座シリーズは、プロのデザイナーとして仕事をする上で必須のスキルを身につけるための解説書です。好評だった書籍『WordPress　仕事の現場でサッと使える！ デザイン教科書』が最新WordPress 5.x環境に対応しました！　WordPressを使って本格的なWebサイトを構築するために必要な基礎知識、独自テーマの作成手順、よりリッチなWebサイトにするためのカスタマイズやプラグイン活用、サイト運用テクニックまでわかりやすく解説します。もちろん、クライアントワークで必要とされるノウハウも満載。改訂版では、新しいブロックエディターの基本や活用テクニック、最新プラグインの使いこなし、スマートフォン・タブレットへの対応など、新たなトピックも取り上げています。WordPressを使うならぜひ手元に置いておきたい1冊です。 ■CHAPTER 1　WordPressの準備と基本設定 1-01　WordPressをインストールする 1-02　管理画面の使い方と初期設定 1-03　記事を投稿する 1-04　新規ユーザーの登録とWordPressの権限 ■CHAPTER 2　基本的なテーマを作成する 2-01　WordPressのテーマ 2-02　テンプレートファイルとテンプレート階層 2-03　WordPressのテンプレートタグ 2-04　テンプレートを分割する 2-05　分割したテンプレートを作り込む 2-06　WordPressループを作成する 2-07　個別記事ページを作成する 2-08　記事の一覧ページを作成する 2-09　固定ページを作成する 2-10　グローバルナビゲーションを作成する 2-11　テーマを完成させる ■CHAPTER 3　プラグインを利用する 3-01　プラグインで機能を拡張する 3-02　パンくずリストを作成する 3-03　メールフォームを作成する 3-04　記事一覧のページナビゲーションを作成する ■CHAPTER 4　Webサイトを拡張する 4-01　記事の詳細ページにコメント欄を追加する 4-02　記事一覧をカスタマイズする 4-03　固定ページ用に別テンプレートを作成する 4-04　独自のHTMLを使った固定ページを作成する ■CHAPTER 5　投稿タイプ・フィールド・タクソノミーをカスタマイズする 5-01　カスタム投稿タイプで投稿できる種類を増やす 5-02　カスタムフィールドで記事の入力項目を増やす 5-03　カスタムタクソノミーで独自のカテゴリーやタグを作成する ■CHAPTER 6　ブロックエディターを使いこなす 6-01　ブロックエディターの基礎 6-02　ブロックエディターのブロック一覧 6-03　ブロックエディターの実践的な使い方 6-04　ブロックエディターをプラグインで拡張する 6-05　ブロックエディターをカスタマイズする ■CHAPTER 7　管理画面をカスタマイズする 7-01　管理画面をカスタマイズする 7-02　権限に応じて管理画面をカスタマイズする ■CHAPTER 8　高度な機能を活用する 8-01　SEO対策をする 8-02　スマートフォン・タブレットに対応する 8-03　REST APIを利用する 8-04　マルチサイト機能で複数のサイトを作成する 8-05　子テーマを作成する ■CHAPTER 9　ショートコード・関数・プラグインを作成する 9-01　ショートコードを作成する 9-02　よく使うコードを関数にまとめる 9-03　プラグインを作成する ■CHAPTER 10　WordPressを効率的に運用する 10-01　WordPressを専用ディレクトリにインストールする 10-02　公開サーバー上でWordPressを運用する 10-03　プラグインを使って効率的に運用する 10-04　Webサイトのセキュリティを高める 10-05　Webサイトを高速化する ■APPENDIX APPENDIX 01　PHPの基礎 APPENDIX 02　WP_Queryのパラメータ APPENDIX 03　日付と時刻の書式 APPENDIX 04　テンプレート階層 APPENDIX 05　主要なオブジェクト

Webデザインの現場に立つその前に。日々、進化を続けるWebデザインの基本ノウハウを詰めこみました。 第1章 あのWebサイトの新人くん! 第2章 まずはここから!Webデザイン基礎の基礎 第3章 Webデザインの心強い味方!-これだけは知っておきたい制作ツール 第4章 Webサイトのプランニング-どんなWebサイトを作るのか考えよう! 第5章 CSSで美しいレイアウト!-避けて通れないソースコードの荒波を越えよう 第6章 デザインの幅を広げる12のテクニック-いろいろなテクニックを駆使してさらに魅力的なページに!

世界で一番かんたんで丁寧な入門書 「Webサイトを手軽に作ってみたい」「HTML、CSSの基礎を学びたい」と漠然と思っている人から、 「一度Webサイトを作ろうとしたことがあるが挫折した」という人まで。 プログラミング知識は一切不要。 本を読んで学びながらサンプルファイルにコードを書いていくことで HTMLとCSSの基礎を完全習得 & デザイン性の高いWebサイトを作れます! 最新バージョンのHTML5とCSS3をベースに学んでいきます。 ●本書の特長 ・本書を読むことで、トップページ、ギャラリー、地図、お問い合わせフォームなどを持つ、基本のWebサイトが作れます。 ・丁寧で分かりやすい文章とたくさんの図示があるので、初心者もHTML、CSSをきちんと理解できます。 ・複数ページから成り立つ従来のWebサイトはもちろん、シングルページサイトも作成できます。 ・デザインの良いWebサイトを作りたい、HTMLとCSSを学んで自分でWebサイトを作ってみたい…… けど、難しそうで第一歩が踏み込めない、挫折したからあきらめている。そんな人のための本です。 ●本書の対象読者 ・Webサイトを自分で作ることに興味はあるけれど尻込みしていた人 ・HTML、CSSの基礎をしっかり、かつ手軽に学びたい人 ・デザインの良い高機能なWebサイトを簡単に作りたい人 ・Webサイトを作ろうとしたことはあるけれど挫折した人 ・新しいバージョンであるHTML5、CSS3を学んで、過去のバージョンよりもさらに手軽にWebサイトを作りたい人 Chapter1 Webサイト制作の事前準備 Chapter2 HTMLの基本 Chapter3 CSSの基本 Chapter4 Webサイトの作成 Chapter5 レスポンシブ対応 Chapter6 Webサイトの集客 Chapter7 Webサイトの公開 付録 シングルページサイトの作成

HTML&CSSの入門書！ Web制作にとどまらず、Webアプリやクラウドでも使われているHTML＆CSS。本書は最低限必要な知識に絞って解説しています。これまでHTML＆CSSを勉強したことがない方はもちろん、Web制作の概要を大まかに知りたい方、アプリ開発に先立ってHTMLとCSSの要点を短期間で知りたいエンジニアの方にもおすすめです。 「そろそろ常識？」シリーズは、会話形式の解説をマンガテイストに進化させ、マンガ、会話、チュートリアルをシームレスに組み合わせたニュースタイルの解説書。常識とされながらも覚えにくいテーマをピックアップし、要点をマンガでわかりやすく解説します。

タイポグラフィにおける「レタースペーシング（文字間調整）」に焦点を当て、 今まで感覚的に処理されてきたレタースペーシングを論理的に考察し、 図と文章で丁寧に解説した書籍です。 誰もが悩むけれども正解がない、文字と文字の間の詰め具合、空け具合について、 デザイナーである筆者が具体的に解説。 ロゴタイプやタイトルのスペーシングに悩むすべての人にヒントを与えてくれます。 本書は3つのパートで構成されています。 最初に、レタースペーシングとは何か、基礎知識や観察方法を学びます。 次に和文、欧文、和欧混植の場合の具体的なスペーシングを理解します。 最後に、有名なロゴの実例を見ながらスペーシングを分析し、練習問題に挑戦します。 すべて見開き完結なので、どのページからでも読み進められます。 WEBやグラフィックの分野で ロゴタイプやタイトルのデザインをする方に必須の一冊です。 第１章 レタースペースとは何か？ 1-1 レタースペーシングのプロセス 1-2 レタースペースの正体 1-3 ワードスペースとの関係 1-4 スペースの種類と関係性 第２章 スペーシングの基礎知識を学ぶ 2-1 スペーシングの始めの一歩 2-2 文字の視覚的な中心を探す 2-3 文字の視覚的な端を探す 2-4 文字のパーソナルスペース 2-5 読み手の感覚差を知る 2-6 3文字スペーシング方法のまとめ 2-7 4文字以上の単語への発展 2-8 客観視のコツ 第３章 スペーシングの観察眼を鍛える 3-1 文字の形状を知る 3-2 文字列を「模様」として考える 3-3 同じ文字並びの扱い方 3-4 文字の上部と下部の違い 3-5 文字の量感・圧迫感を考慮する 3-6 ウェイトの変化による影響 3-7 文字サイズの違いによる影響 3-8 背景色の変化による影響 3-9 文字の周辺のスペースが与える影響 3-10 ゆったりさと窮屈さの特徴と違い 第４章 欧文のスペーシング 4-1 大文字で意識すべきこと 4-2 小文字で意識すべきこと 4-3 文字のスタイルとスペースの関係 4-4 スクリプト体のスペーシング 4-5 いろいろな合字 第５章 和文のスペーシング 5-1 ひらがな活字の特徴 5-2 縦組みと横組みのひらがな 5-3 和文を読むときの感覚 5-4 和文特有の文字の高さ 5-5 和文独自の黒みのムラ 5-6 難しい和文横組みのスペーシング 5-7 和文がスカスカする原因 5-8 横組みを配慮したフォント 5-9 小書き文字のスペーシング 5-10 センテンスのスペーシング 5-11 縦組みのスペーシング 第６章 和欧混植のスペーシング 6-1 和欧混植とは 6-2 最適な文字サイズとベースライン 6-3 既存フォントの観察 6-4 ワードスペースの影響 6-5 トラッキング時の注意点 6-6 文字の比率調整による効果 第７章 実例から学ぶスペーシング TORAYA、MEVIUS、HIBIKI、キユーピー マヨネーズ、明治おいしい牛乳、ほか 第８章 スペーシングの練習問題集 図形、欧文、和文、和欧混植

Web制作者がワンランク上を目指すために身につけたい、実践的なテクニックを解説！制作中の「かゆいところ」に手が届く一冊。 脱・その場しのぎのコーディング！ 現場で迷わない実務レベルのテクニックを身につける HTML/CSSの知識をひと通り身につけて、デザインカンプ通りの実装ができるようになっても、実際の制作現場では、コーディングの選択肢に迷う場面が多々あります。 タグやプロパティについて「どうしてそれを選んだのか」と聞かれたとき、あなたは自信を持って答えることができるでしょうか？ レイアウト手法について、いつも手癖で慣れたものを採用していて、本当にこのアプローチが最適なのか、不安を感じることはありませんか？ 本書は、入門レベルの知識だけでは切り崩せない、実務ならではのコーディングの悩み・課題を、プロの視点で解説します。仕様書を読むだけでは得られない「現場の経験則」をもとに、状況や目的に応じた、知識の組み合わせ方・選択肢の選び取り方がわかります。 Web制作には無数ともいえるアプローチがあり、ただなんとなく知識を蓄えているだけでは、実務で求められるコーディングの攻略は困難です。本書を読んで「ただ知っているだけの知識」を「現場で活かせるスキルと自信」に変えましょう。 ■解説トピック ・sectionとarticle、どのように使い分ける？ ・background-imageではなく、imgを使うべき画像とは？ ・カラムレイアウトに適しているのは、float・flex・gridのどれ？ ・Class名の位置はどのように判断すればいい？ ・運用しやすいコードを書くためには何に配慮する？　　…など ■本書のおすすめポイント ・実際の制作の流れに沿って工程ごとのポイントが理解できる ・キャラクターによるガイドでわかりやすく読み進められる ・「練習サンプル」で手を動かしながら理解できる ■対象読者 ・実務で通用するスキルを身につけたいWeb制作会社の新人 ・Web制作の仕事に就きたい学生、社会人 ・指示される通りのコーディングから脱して、よりよい書き方を知りたい初級者 ■目次 Lesson1　デザインカンプを正しく理解する Lesson2　プレーンなHTMLを作成する Lesson3　デザイン実装のための情報を追加する Lesson4　ページのレイアウトを実装する Lesson5　パーツのデザインを作り込む Lesson6　レスポンシブ対応する Lesson7　ワンランク上のコーディングを目指す Lesson1　デザインカンプを正しく理解する 1-1　カンプから画像を書き出す 1-2　HTML/CSSファイルを新規作成する Lesson2　プレーンなHTMLを作成する 2-1　HTMLについて知っておきたいこと 2-2　マークアップの準備 2-3　見出しをマークアップする 2-4　情報を区分化する 2-5　テキストをマークアップする 2-6　定番パーツをマークアップする 2-7　文法チェックする Lesson3　デザイン実装のための情報を追加する 3-1　divタグでグループ化する 3-2　class/id名をつける 3-3　CMS に組み込みやすいコードを考える Lesson4　ページのレイアウトを実装する 4-1　ページ全体をレイアウトする 4-2　実際にレイアウトしてみる 4-3　ナビゲーションのレイアウト 4-4　数値の単位に配慮する Lesson5　パーツのデザインを作り込む 5-1　定番のパーツをスタイリングする 5-2　テキストのスタイリング Lesson6　レスポンシブ対応する 6-1　レスポンシブ対応とは 6-2　異なる画像を表示する 6-3　テキストの改行位置を制御する 6-4　サイトナビゲーション 6-5　運用を見すえたカラムの実装 6-6　ブレイクポイント Lesson7　ワンランク上のコーディングを目指す 7-1　「よいコード」を考える 7-2　開発者向けツールを活用する 7-3　Sassをはじめる

基礎の基礎から、サイトの公開まで 基礎の基礎から、サイトの公開まで。 美しいサイトを作り、魅せるための、不朽の力が身につく。 Google Chrome、Internat Explorer、Safari、Firefox、Operaに対応 CHAPTER1 はじめる前に CHAPTER2 HTMLファイルを作成しよう CHAPTER3 CSSで装飾しよう CHAPTER4 画像を編集し、HTMLで表示しよう CHAPTER5 共通部分の作成とレイアウト CHAPTER6 リンクを設定し、ナビゲーションを作り込もう CHAPTER7 各ページを作成しよう CHAPTER8 サイトに動きをつけよう CHAPTER9 サイトの公開と仕上げ CHAPTER1 はじめる前に ウェブ制作のための準備 代表的なブラウザ テキストエディタを選ぼう CHAPTER2 HTMLファイルを作成しよう HTMLの基本 HTMLタグの意味に基いてマークアップしよう HTMLのアウトラインを理解しよう CHAPTER3 CSSで装飾しよう CSSの基本 色を変更しよう 罫線と余白を調整しよう リストと表を装飾しよう さまざまなブラウザで確認してみよう CHAPTER4 画像を編集し、HTMLで表示しよう ウェブページ用の画像を作成しよう 画像を挿入しよう CHAPTER5 共通部分の作成とレイアウト ページヘッダーとページフッダーを挿入しよう ページをレイアウトしよう CHAPTER6 リンクを設定し、ナビゲーションを作り込もう リンクを設定しよう ナビゲーションを作り込もう CHAPTER7 各ページを作成しよう ページを複製しよう 一覧ページを作ろう その他の下層ページを作ろう トップページを作ろう タイトルと概要をつける CHAPTER8 サイトに動きをつけよう スライドショーを作ろう 地図を配置しよう おといあわせフォームを設置しよう CHAPTER9 サイトの公開と仕上げ サイトを公開しよう 最終チェックをしよう SNSボタンの設置 アクセス解析を導入しよう

「Webページのデザイン」=「ボックスを並べること」という視点で、ボックスのレイアウト手法を徹底解説。「ブログ・ニュース系サイト」と「ビジネス系サイト」の実例サイトを、1からパーツを組み立てながら作成。スマートフォンなど多様なデバイスに対応し、使い勝手や見栄えを向上させる各種のアレンジ・テクニック。 1 Webページにおける段組み 2 Webページを作成する準備 3 ブログ・ニュース系サイトのコンテンツページ 4 ブログ・ニュース系サイトのトップページ 5 ビジネスサイト風のトップページ 6 ビジネスサイト風のコンテンツページ

ユーザーに選ばれるWEBサイトづくりに重要なのは「使い勝手」や「見た目」だけでなく、訪れたときの「満足感」。 200社以上の企業のCVRを向上させたスペシャリストが「UI/UXデザイン」を基礎から解説 ビジネスにおけるWEBサービスの重要性が年々増し、担当者に求められるレベルが高まっています。 「WEB担当になったけれど、何から手をつけたらいいのか分からない」という方のために、 これまでUI/UXデザインにより200社以上のCVR改善に貢献してきた著者が、初心者にもわかりやすく解説。 使い勝手や見た目(UI=User Interface)を整えるのはもちろん、 その先にある「分かりやすさ」「心地よさ」や、 コンテンツおよびサービス全体を通じて得られる 「満足感」といった体験(UX=User Experience)を充実させることによって可能となる、 “ユーザーに選ばれる魅力的なサービスづくり"の基本から応用まで提案します。 --------------------目次-------------------- はじめに UI/UXの違いを理解する 原則1【:HOW】ユーザー心理/行動をとらえる 「ユーザー心理/行動に則って考える」ことがUI/UXデザインの第一歩である 原則2【:HOW】どう改善するか 「ユーザー真理/行動」をUI/UXデザインに落とし込む 原則3【:HOW】どう改善するか〈体制とプロセス〉 UI/UXデザインにおける三方良しをつくる 原則4【:応用編】 UI/UX思考でこれからのビジネスをデザインする おわりに

楽しくやさしく基本から応用まで学べる入門書。特に大事な「レイヤー／フィルター／ツール」についての解説が充実している。 ◆Photoshopの本当に必要な基本を 楽しく独学できる！◆ 「Photoshopを始めようと思ったのにソフトを開いたら 何をどうしていいのかわからなくて、適当に操作した」 「なんとか目的の画像は作れたけれど、 何をどうしてそうなったのかわからない」 「勉強したけれど、レイヤーマスクが何か、 クリッピングマスクと何が違うのかわからない」 そんなことはありませんでしたか？ それは「基本がわからない」からです。 Photoshopには数えきれないほど たくさんの機能があって そもそもどこが「基本」なのかもあいまいです。 そうなるとドツボに入ってしまいます。 Photoshopには 「レイヤー」「フィルター」「ツール」という 基本の3つの力があります。 この3つの機能を最低限きちんと理解できれば、 ラクに使いこなせるようになります。 ◆実践で使える実用的なテクニックも！◆ レイヤー・フィルター・ツールという Photoshopを使いこなすための3つの力は、 組み合わせて使わなければ効果を発揮しません。 後半の実践編では組み合わせて使う練習として フォトグラファーが撮った写真を補正加工するときや デザイナーが写真を組み合わせてデザインをするときに 役立つ実用的なテクニックも盛り込みました。 ◆著者はSNSで人気の教育系YouTuber、Mappy Photo えりな＆たじ◆ 著者はYouTubeチャンネル登録数7万、 再生総回数450万回越え（2022年7月現在） 大人気のPhotoshop教育系YouTuber。 連動した動画もQRコードから 見ることができます。 誌面では著者の分身である 「ちびえりな」「ちびたじ」の2人がナビゲート。 一緒に楽しく学べます。 ◆学び直しにも最適◆ 何となくPhotoshopを使っているけれども、 応用が難しいとモヤモヤしている方の 学び直しにも最適です。 今度こそ自分の作りたいものを 自由に作れるようになりましょう。 必要な部分をしっかり学び、応用もできるようになる。 これまでなかったPhotoshop入門書です。 STEP1　Photoshopの超基本 STEP2　3つの力を手に入れよう～1つ目の力『レイヤ』～ STEP3　3つの力を手に入れよう～2つ目の力『ツール』～ STEP4　3つの力を手に入れよう～3つ目の力『フィルター』～ STEP5　フォトグラファー向け実践練習 STEP6　デザイナー向け実践練習

FireworksとDreamweaverを使ってデザインからコーディングまで1冊でマスター。画面の設計からパーツ制作、マークアップ、CSSコーディングまでWebデザインのワークフローを全部学べる。 1 Webデザインの基本(Webサイトが出来るまで) 2 ワイヤーフレームの設計(ワイヤーフレームの設計 ワイヤーフレームを作る ワイヤーフレームのバリエーション) 3 デザインの制作(デザインの制作 「Kuler」でカラースキームを設計する ワイヤーフレームに沿って全体のベースを作る ほか) 4 コーディング(HTMLとCSSの役割 Dreamweaverを使う マークアップ ほか)

コーディングに適したプロトタイプが作れる！ 本書はAdobe XDを使った WebデザインとUIのプロトタイピングを、 高品質なサイトを作りながら、 現場のワークフローに沿って学んでいく本です。 ワイヤーフレームの作り方から、 デザインカンプ制作、コンポ―ネントの管理、 画面遷移の設計、インタラクティブなプロトタイプ制作と共有、 コーディングに必要なデザインスペックの共有、 さらに動きのあるUI設計やプラグイン活用まで、 現場レベルで求められるスキルを、 より実践的な学び方で習得できます。 初学者から、現場経験が浅い新人デザイナー、 さらにグラフィックデザインからWebへキャリアを広げたい方まで、 しっかりWebデザインを学びたい、あらゆる方のための一冊です。 ＊本書は、Adobe XDのバージョン28.6.12.3をベースに書かれています。 ＊Adobe XDをインストールして使用するには、macOS 10.12以降、 またはWindows 10 Creators Update（64ビット）（v1703［ビルド 10.0.15063］以降）が必要です。 Chapter 1　Adobe XDの基本と制作準備 01｜Adobe XDが必要になった背景 02｜Adobe XDの特徴 03｜インストールと環境設定 04｜フォント環境を整える Chapter 2　ワイヤーフレームの制作 01｜制作の準備をする 02｜トップページのワイヤーフレームを作成する 03｜コンポーネントについて理解する 04｜トップページのワイヤーフレームを完成させる 05｜下層ページのワイヤーフレームを完成させる Chapter 3　スマートフォン版デザインカンプの制作（1）トップページ 01｜共通パーツを作成する 02｜トップページデザインの作成 Chapter 4　スマートフォン版デザインカンプの制作（2）下層ページ 01｜下層ページ共通デザインの作成 02｜コンセプトページの作成 03｜製品一覧ページの作成 04｜敏感肌用化粧水ページの作成 05｜よくあるご質問ページの作成 06｜店舗情報ページの作成 07｜「オンラインショップ」セクションの作成 08｜メニューページの作成 Chapter 5　インタラクティブ・プロトタイプの制作 01｜プロトタイプモードに切り替えて作業する 02｜リンクを設定する 03｜共通部分のリンクの設定 04｜メニューページのプロトタイプ Chapter 6　プロトタイプとデザインスペックの共有 01｜プロトタイプを共有する 02｜デザインスペックを共有する Chapter 7　デスクトップ版デザインカンプの制作 01｜デスクトップ版を作成する準備 02｜デスクトップ版トップページを作成する 03｜下層ページの共通部分を作成する 04｜下層ページを作成する Chapter 8　コーディングの準備と画像の書き出し 01｜コーディングの準備 02｜差し替え作業をする Chapter 9　動きのあるUIの制作 01｜自動アニメーションの基本 02｜スクロールダウンアイコン 03｜開閉式のアコーディオンメニュー 04｜ボタンホバー時のアニメーション 05｜アンカーリンク Chapter 10　プラグインの活用 01｜プラグインの使い方 02｜プラグインの紹介

正統派の入門書！HTML Living Standardにきちんと準拠したHTML＆CSSを学ぼう 本書は、HTMLとCSSの最新の仕様に準拠した、HTML＆CSSの入門書です。 ※特にHTMLは2020年4月現在の最新のHTML Living Standardの仕様書ですべて確認済みの内容となっています。 本書では、HTMLとCSSをゼロから少しずつ学んでいきます。読者がつまづかないようにHTMLとCSSの小さなサンプルを書きながら学習していき、最後の章で総合的なサンプルを作成するスタイルになっています。 1つのWebページ全体を作ろうとすると手順が長くなり、何を学習しているのか分からなくなったり、どこで間違ったか分からなくなってしまったりしがちです。そこで本書では、小さなサンプルで学習することで、「できた」の喜びを感じながら、少しずつ知識を増やしていけるようになっています。 また、サンプルには登場していない属性やプロパティの値などについてもしっかり説明がありますので、サンプルを書き換えて試してさらに経験を積んでみたり、読了後に疑問に思ったことを、改めて調べたりする使い方もできます。 そして、本書の解説は、表面的に「Webページが作れればそれでいい」というものではありません。仕様にしっかりと準拠した使い方で、正しく、読みやすいページを作れるように、サンプルを組み立てています。 本書で学習することで、基本的なHTML＆CSSの使い方が身につくのはもちろんですが、「なぜそこに、そのHTML、CSSを使うのか」をきちんと説明できるような知識も、手に入れることができます。 また、本書は、すでにプロとしてWeb制作に関わる方が知識をブラッシュアップする際にもお勧めです。HTML 5.2がリリースされてから、すでに5年が経過しており、ふだん何気なく見ている一見普通のHTMLが、現在の最新の文法には合致していない旧式のものとなっている可能性もあります。本書ではそのような旧式となってしまった部分はすべて更新してあり、さらに巻末の特別付録として用意した「HTML全要素一覧」「HTMLの要素の分類」「HTMLの要素の配置のルール」は、中級以上の方にもご活用いただける内容となっています。 ※本書は、2018年11月発行の『よくわかるHTML5+CSS3の教科書【第3版】』をベースに、HTML Living Standardの仕様に合わせて多くの箇所を変更するとともに、最近のトレンドに沿って修正・加筆したものです。 第1章 はじめる準備 第2章 オリエンテーション 第3章 文法的なカタい話 第4章 ページ全体の枠組み 第5章 テキスト 第6章 CSSの適用先の指定方法 第7章 ページ内の構造 第8章 フレキシブルボックスとグリッド 第9章 ナビゲーション 第10章 フォームとテーブル 第11章 その他の機能とテクニック 第12章 ページをまるごと作ってみよう 付録 HTML全要素一覧／HTMLの要素の分類／HTMLの要素の配置のルール

『レイアウト、基本の「き」』の内容をより役立つよう見直し、20ページ以上増補して新たな本として生まれ変わりました。 0 レイアウトを「見」てみる 1 全体構成を考える 2 書体について考える 3 写真やイラスト 4 チャート、地図、表、グラフ 5 色の選び方、配色

デザイナー必携！ これ1冊でレイアウトデザインのすべてがわかる 版面率って？　グリッドって？　ジャンプ率って？ レイアウトデザインをこれからはじめる人も、今さら聞けない人も、これだけは知っておきたいルールと基本を1冊にギュッとまとめました。豊富な作例と実例、親しみやすいイラストで、レイアウトデザインがわかりやすく学べます。

新人デザイナー、社内デザイン担当者の方向けのPhotoshop、Illusutratorガイド。ポスター、Webバナーなど実際の業務での制作物を前提に、ソフトの画面の見方からデータの作り方、データの書き出し、印刷入稿方法、デザイン知識まで、現場のリアルな仕事を解説。多忙で質問しにくい職場や在宅ワークでまさに先輩代わりとして役立ちます。習得チェックテストもあるので、覚えられていないところが丸わかり。Photoshop、Illustratorの他、InDesign、Bridge、Acrobatといった業務に欠かせないソフトも解説。ダウンロードデータ付き。

【カッコいいレイアウトを目指すなかれ】 デザイナーの初仕事、レイアウトを任されたらどうやってつくったらいいでしょう。 クールなレイアウトのサンプル集や作品集を見て自分もこんなのをつくりたい、真似したいと思います。 レイアウトデザインはカッコいいクールな物が良いデザインでしょうか。デザイナーはその前に考えることがあります。 大切なのはレイアウト発信側と受けてのイメージを一致させることです。 届けたい情報を届けたい相手に正確に自然に送り込む、しかも無意識に反応してくれたなら、レイアウトは成功です。 これが共感されるレイアウトです。本書はカッコいいレイアウト集ではありません。 レイアウトの本質を論理的に理解する教科書です。 ​ 【自分で組み立てられてナンボです。】 デザイン教育を受けて造形感覚を磨いてきた人は特に美しい物、カッコいいものに敏感です。 しかしそれらの表現を真似てもいいレイアウトはできません。 受け手の共感ゾーンにいないからです。共感されなければ売り上げを伸ばすこともできません。 共感を得るには受け手の求めるイメージを正確に表現することです。 本書ではレイアウトの骨格づくり、エレメントの使い方を実例を見ながら組み立てていきます。 ここまで学んでくると、カッコいいレイアウトの意味も理由も理解でき、真似ではなく自分で組み立てられるようになります。 ​ 【レイアウトの専門用語がそのままマニュアル】 まずレイアウトをする前に「レイアウト様式」を狙うイメージに合わせて選びます。 この様式を誤るとイメージは伝わらず、情報は届きません。 「視覚度」訴求力を画像のインパクトの強さで表すこと。写真やイラストの表現で同じ大きさでも訴求力は違います。 「図文率」画像と文章の占める割合。高ければよりカジュアルに、低ければ堅苦しくなります。 「文字のジャンプ率」本文を基準に、もっとも大きなタイトルや見出しとの大小比。 「写真のジャンプ率」同じように大小比。ジャンプ率が高いほど活気が出る。低いほど上品なイメージ。写真の場合はここにトリミングのルールを絡めて考える。 「グリッド」レイアウトの様式と関係している文字の段組の拘束が高い組か、低い自由な組か。高いほど誠実さを表し、低いほど優しく自由、楽しさが表せる。 「版面率」誌面に対する文字や画像の割合。余白量。版面率が高ければ余白は少なく版面率が低ければ余白は多く上品なイメージになる。 本書はひたすら目標を共感に絞って読者が迷わないように系統立ててレイアウトの作法をマニュアル化しました。 これらの専門用語を使いこなすことでレイアウトを自在に操れるようになります。 本書はひたすら目標を共感に絞って読者が迷わないように系統立ててレイアウトの作法をマニュアル化しました。 第1部 様式を選ぶ 　1日目 様式効果とは・視覚度・図版率 　2日目 文字のジャンプ率・写真のジャンプ率 　3日目 グリッド拘束率・版面率 　4日目 構成の3原型・書体のイメージ 第2部 形を整える 　5日目 主役を明示する・準主役は離す 　6日目 群化・あいまいは不安・流れを整理する・余白は主役の領地・四隅をおさえる・版面線を利用する 　7日目 リズム・対比・アクセント・比例・バランス・融合

実務に効く内部施策、外部施策、コンテンツSEOからモニタリングまで MFI（モバイルファーストインデックス）時代のSEOの知識と技術をまとめた1冊。 本書では、Webサイトに実施すべき一通りのSEO施策に関して、その背景から実際の考え方、そして技術まで踏み込んだ実装方法をまとめています。 SEOにはどういった施策があるのか、どういった手順で取り組むべきなのか、そして、どのように実装していけば効果的なのか。悩めるマーケティング担当、SEO担当だけでなく、実装を担当するエンジニアにも役立つ内容となっています。 構成は次のようになっています。 Chapter1　SEOの基本 Chapter2　マイナス評価を回避するSEO Chapter3　サイト構造・リンク構造 Chapter4　Googlebotの制御 Chapter5　セマンティックなマークアップ Chapter6　サイトの高速化 Chapter7　HTTPS化・モバイル対応・AMP対応 Chapter8　コンテンツSEO Chapter9　リンクビルディング・サイテーション Chapter10　モニタリング・保守 Chapter1は、SEOに取り組む前に確認する導入部分に相当し、SEOに取り組むべき理由からGoogle検索エンジンの概要、そしてHTMLの基本構造を解説します。 Chapter2で、重複コンテンツへの対応をはじめ、エラーやスパムなどマイナス評価に繋がる問題を回避するSEOを説明します。 Chpater3～9では、プラス評価を得るための具体的なSEO施策として、内部施策から外部施策、コンテンツSEOまで、その背景や実装方法を説明します。セマンティックWebに対応するための構造化マークアップや、サイトのモバイル対応、AMP(Accelerated Mobile Pages)対応、被リンク・サイテーション獲得戦略、サイトの高速化技術まで、実践的で多彩なトピックを扱っています。 Chapter10では、本書で説明した施策の効果検証のためのモニタリングや、保守時・特殊なケースで発生する問題への対応方法など解説しています。 本書では、SEOで必要な情報をこの1冊にすべてまとめ上げ、Googleが公開する情報を元にする確度の高い施策を、具体的に踏み込んだ実装の紹介と合わせて説明しています。 本書を羅針盤として、1 人でも多くの方々が自らの力で最適なSEO施策を実施できれば幸いです。 Chapter1　SEOの基本 Chapter2　マイナス評価を回避するSEO Chapter3　サイト構造・リンク構造 Chapter4　Googlebotの制御 Chapter5　セマンティックなマークアップ Chapter6　サイトの高速化 Chapter7　HTTPS化・モバイル対応・AMP対応 Chapter8　コンテンツSEO Chapter9　リンクビルディング・サイテーション Chapter10　モニタリング・保守

魅力あふれる、すぐれた構図の１枚デザインを大特集！！ チラシ、ポスター、フライヤーなど1枚デザインの構図特集です。1枚の写真を大きく使う、2枚の写真を対比させる、写真の重要度によって強弱をつける……素材に合わせた構図の魅力的な作品を300ページ以上の大ボリュームでご紹介。スタッフクレジット付きで、発注する立場の方にも役立ちます。 1 カクハン図版の構図とレイアウト 2 キリヌキ図版の構図とレイアウト 3 情報満載の構図とレイアウト 4 文字・イラストの構図とレイアウト

基本を知るための「リファレンス編」と 現場のスキルを学べる「プラクティス編」が一冊に！ 【本書はFigma日本語版に対応しています】 本書は、Figmaを使ってUIデザインをゼロから学べる本です。 「写真投稿アプリ」を題材に、実際のワークフローに沿ってアプリのデザインを作成します。 UIデザインの基礎知識はもちろん、Figmaならではの効率的なテクニックや エンジニアとのコミュニケーションを円滑にする方法など、 リアルな現場の情報を織り交ぜながら初学者の方が最初の一歩を踏み出せる構成になっています。 また、プロトタイピング、プラグイン、アニメーションなどにも踏み込んで解説しており、 Figmaを使ったことのある人にも活用いただける一冊です。 ［本書の特長］ ・Figmaの機能を網羅的に学習し、なおかつ実践方法も学べる ・基本操作に加え、生産性を上げる効率的なテクニックが身につく ・エンジニアが実装しやすいようなデザインを作成できる ［こんな方にオススメ］ ・Figmaをはじめて使う方 ・UIデザイナーを目指す方 ・エンジニアとの連携を改善したいデザイナー ・開発ツールとしてのFigmaを学びたいエンジニア ・現場のワークフローを把握したいマネージャー ［目次］ ・Introduction アプリ開発の工程、企画の確認など ・Chapter 1 基本的な操作 ・Chapter 2 生産性を上げる機能 ・Chapter 3 ワイヤーフレームを作成する ・Chapter 4 プロトタイプを作成する ・Chapter 5 詳細デザインを作成する ・Chapter 6 デザインのハンドオフ ・Chapter 7 ノンデザイナーのためのFigma ・Introduction アプリ開発の工程、企画の確認など ・Chapter 1 基本的な操作 ・Chapter 2 生産性を上げる機能 ・Chapter 3 ワイヤーフレームを作成する ・Chapter 4 プロトタイプを作成する ・Chapter 5 詳細デザインを作成する ・Chapter 6 デザインのハンドオフ ・Chapter 7 ノンデザイナーのためのFigma

文字を重ねたり、回り込ませたり、囲んだり……。文字のレイアウト次第で、デザインに多様なバリエーションを生み出すことができます。タイトルや見出し・コピーといった文字を効果的にレイアウトし、ターゲットの目を引く作品をアプローチ別に紹介します。

CSSの仕様書では明らかにされていない重要項目を「ウェブデザイナーが知るべき47のキーポイント」として解説。 47の秘伝テクニックでウェブデザインの問題をエレガントに解決！ 本書では、デザインに焦点を当てるのではなく、いかに問題を解決するかをコードで示します。CSSの仕様書では明らかにされていない重要項目を「47のCSSテクニック」として解説します。本書の解析的なアプローチを適用することで、日々直面する、「保守性や柔軟性に富み、軽量かつ仕様に準拠したCSS設計を実現する」といった現実的な問題をどのように解決するのか読者は学ぶことができます。

今人気のお仕事「Webデザイナー」を目指したい人に！ ■初心者にピッタリの1冊 Webデザインの仕事に就きたい、知識を身につけて仕事の範囲を広げたい！ だけど、どこから勉強を始めたらいいのか、いまいちわからない……。 本書はそういった方にピッタリの本です。 ソフトバンクグループの通信制大学、サイバー大学で教鞭をとる中島先生と栗山先生が、Webページ作成の 基本から親切ていねいに教えます。 HTML、CSSを楽しみながら学んでいきましょう。 ■HTMLとCSSの基礎がしっかりわかる HTMLはいわばWebページの骨組みで、何のためのWebページなのかを決定付けるとても大切なものです。サンプルデータを操作しながら読み進めることで、見出しや段落、図表、リンクなど、内容と合ったものが使いこなせるようになります。 CSSは、HTMLで組んだ骨組みに着せていく服のようなものです。見栄えを良くし、服を着替えるようにデザインを変えることもできます。本書では文字の色やフォントを指定したり、画像やアニメーションを配置したり、思うままにページをレイアウトする方法を解説します。 ■デザインの基礎知識が身につく フォント、配色、レイアウトなどがある程度決められているブログと違い、Webページは制作の自由度が高いのですが、初心者にとってはそれが逆にハードルになりかねません。本書では、レイアウト、タイポグラフィ、カラーコーディネートの基本を図解でわかりやすく解説します。これさえ身につけておけば、プロっぽいデザインも可能になります。 ■リアルなサイトで実践！ 基礎が身についたら、実際にWebサイトを制作するための手法を学びましょう。本書では、カフェサイトと観光サイトを例に、実際に手を動かして作っていきます。デバイスにより適切に表示を変えるレシポンシブWebデザインや、近年重視されるSNSとの連携についても解説します。 Chepter1 Webページ作成の基本知識 Chepter2 ページの骨組み、HTML Chepter3 ページを装飾するCSS Chepter4 Webデザインの基本知識 Chepter5 実践！Webサイト制作 Chepter6 Webデザインtips集

「ホームページを手づくりしよう！」 Webサイトの構成やデザインが複雑になり、コーディング専用のエディターで効率よく制作する時代ですが、コードを丁寧に記述しながらホームページをつくりあげるのも楽しいもの。本書は豊富なビジュアルと細かな入力＆操作解説で、シンプルなページを作成しながらHTMLとCSSが学習できる入門書です。「古都さんぽ」をテーマとした①トップページと②風景紹介の記事ページ、③観光サイトへのリンク集ページ、④写真ギャラリーページ、⑤自己紹介の5ページ構成のサイトをチュートリアル形式で作成し、無料ホームページサービスで公開するまでを解説します。Windows10付属のアプリとCDに収録したフリーソフトでサイト作成がすぐにはじめられます。解説のステップごとに用意したHTML、CSS、画像や動画ファイルも収録しているので、迷わずに学習を進めることができます。 第1章 ホームページづくりをはじめよう Section 01 ホームページってなに？ Section 02 ホームページのしくみを知ろう Section 03 ホームページをつくる手順を学ぼう Section 04 パソコンに作業場をつくろう Section 05 テキストエディターの準備をしよう 第2章 文章を表示するホームページをつくろう Section 06 HTMLってなに？ Section 07 HTMLファイルをつくってみよう Section 08 ホームページの基本部分をつくろう Section 09 文字を正しく表示しよう Section 10 ホームページにタイトルを付けよう Section 11 文章を段落ごとに分けよう Section 12 見出しを付けて読みやすくしよう Section 13 改行を入れて見やすくしよう Section 14 文章の一部を強調しよう Section 15 箇条書きで文章をまとめよう 第3章 ホームページをつなぐリンクを設定しよう Section 16 リンクのしくみを確認しよう Section 17 リンクの張り方を学ぼう Section 18 外のホームページにリンクを張ってみよう Section 19 同じページ内にリンクを設定しよう 第4章 ホームページを装飾しよう Section 20 スタイルシートってなに？ Section 21 スタイルシートの書き方を学ぼう Section 22 スタイルシートを使ってみよう Section 23 文字の色を変えよう Section 24 背景の色を変えよう Section 25 文字のサイズを変えよう Section 26 見出し文字の太さを変えよう Section 27 新しいCSSファイルを追加しよう Section 28 箇条書きの記号を変えよう Section 29 リンク文字の下線を消そう Section 30 見出し文字に影を付けよう 第5章 画像をホームページに掲載してみよう Section 31 画像をホームページで使おう Section 32 ホームページ用に写真サイズを調整しよう Section 33 ホームページのタイトルを画像でつくろう Section 34 ホームページの中に画像を配置しよう Section 35 画像のまわりに文章を配置しよう 第6章 表をホームページに掲載してみよう Section 36 表のあるホームページをつくるには Section 37 表全体をまずは作成しよう Section 38 表の見出し行をつくろう Section 39 罫線の太さを設定しよう Section 40 背景に色を付けてみよう Section 41 罫線と文字のあいだを整えよう 第7章 ホームページを見やすくレイアウトしよう Section 42 スタイルシートでレイアウトを調整しよう Section 43 文字を好きな位置でそろえよう Section 44 行間を空けて文章を読みやすくしよう Section 45 文字と文字のあいだを調節しよう Section 46 見出しと段落のあいだを空けよう Section 47 画像のまわりの余白を調節しよう Section 48 文章の幅を調整しよう Section 49 横並びのメニューをつくろう Section 50 画像とメニューの隙間をなくそう Section 51 レイアウトを変更してみよう Section 52 2段組みのレイアウトに変えよう 第8章 いろいろなページをつくってみよう Section 53 新しいページをつくってリンクさせよう Section 54 トップページをつくろう Section 55 トップページをレイアウトしよう Section 56 ギャラリーページをつくろう Section 57 ギャラリーページをレイアウトしよう Section 58 プロフィールページをつくろう Section 59 リンク集ページをつくろう Section 60 ページどうしをリンクさせよう 第9章 ホームページを公開しよう Section 61 ホームページの公開に必要な作業 Section 62 無料ホームページサービスを利用しよう Section 63 ファイルを転送しよう Section 64 つくったホームページを確認しよう Section 65 ホームページを更新しよう 第10章 ホームページをさらに工夫してみよう Section 66 リンクの文字の色を変えよう Section 67 ポインターをあわせると画像が半透明になるようにしよう Section 68 検索エンジン用のキーワードを設定しよう Section 69 SNS用に表示する情報を設定しよう Section 70 スマートフォンでもきれいに表示しよう Section 71 ホームページにアイコンを追加しよう Section 72 ホームページにGoogleマップを表示しよう Section 73 Facebookのいいね！ボタンを設置しよう Section 74 YouTubeのアカウントを作成しよう Section 75 YouTube動画をホームページに表示しよう Appendix Appendix 01 ホームページがうまく表示できないときには？ Appendix 02 本書で使用したHTMLとCSSのまとめ Appendix 03 スタイルシートで使う単位 Appendix 04 ホームページ用語集

「サイトに動きをつける時、同じ内容を何回も検索をしてソースコードを探している」 「サイトで見つけたソースコードをそのままコピペしてみたけど、動かない」 「JavaScriptの本を購入してみたが、実際のサイトにどう組みこめばいいか具体的なイメージがわかない」 「動きの原理を最低限理解して、とにかく早く実務にいかしたい」 本書はWebサイトを動かすことが苦手な右脳系ウェブデザイナーが、サイトを動かす第1歩を踏み出すための「動きの逆引き事典」です。 近年のウェブサイトで使用されている基本的な動きの原理や仕組みをサンプルコードと共に紹介します。

いま、身につけておきたいスキルとテクニックを凝縮。マークアップ、CSSによるスタイリングからマルチデバイスへの対応まで、リファレンス+チュートリアルできっちり習得。 1 Dreamweaverを知る(Dreamweaverを起動する前に Dreamweaverでの制作フロー Dreamweaverの歴史) 2 Dreamweaverを学ぶ(Dreamweaverの基本 サイト定義 コードビューの活用 HTMLのマークアップ CSS リンク 画像 制作効率化の機能 Microsoft Officeファイルとの連携 サイトの公開とグループワーク HTML5やCSS3、スマートフォンへの対応) 3 Dreamweaverで作る(基本構造のマークアップ 各パーツの作り込み マルチデバイスへの対応 Dwテンプレートとページ作成 各ページの作り込み)

WordPressによるWebサイト制作のための、究極のレシピ集が登場。制作の現場で使われる定番テクニックからプロ技まで、余すところなく集めました。テーマカスタマイズ／テーマ作成／投稿ページ・固定ページ／一覧ページ／ヘッダー・フッター／カスタム投稿タイプ／カスタムフィールドなど、目的別にレシピを整理。「あのしくみはどう作るんだろう？」が、スグにわかります。Webサイト運営者からWebプログラマーまで、WordPressを扱うすべての方にお届けします。WordPress 5.xに対応。 Chapter 1　WordPressの基本と環境設定のテクニック 001 WordPressってどんなもの？ 002 WordPressでどんなサイトが作れるの？ 003 WordPressの管理画面でどんなことができるの？ 004 WordPress導入のメリット・デメリット 005 サイトを公開するまでの作業の大まかな流れを知りたい 006 サイトを作る・運用するのに必要な知識を知りたい 007 WordPressの料金や利用規約（ライセンス）を知りたい 008 WordPressの動作環境を知りたい 009 WordPressをインストールしたい 010 データベースの接頭辞を変えたい 011 管理画面にログインしたい・ログアウトしたい 012 管理画面の全体像を知りたい Chapter 2　コンテンツ投稿のテクニック 013 WordPressで投稿できるページの種類を知りたい 014 記事を投稿したい 015 記事にカテゴリーやタグを追加したい 016 固定ページを投稿したい 017 すでにある投稿や固定ページを編集したい 018 公開設定について詳しく知りたい 019 投稿を前の状態に戻したい 020 新エディターの特徴を知りたい 021 新エディターと旧エディターのどちらを使えばよいか知りたい 022 新エディターの基本的な操作方法を知りたい① 023 新エディターの基本的な操作方法を知りたい② 024 追加できるブロックの種類を知りたい 025 旧エディターの基本的な操作方法を知りたい 026 ビジュアルモードで記事を編集したい 027 テキストモードで記事を編集したい 028 リンクを設定したい 029 投稿に画像を追加したい 030 ギャラリーやカバーを追加したい 031 HTMLタグを入力したい 032 「続きを読む」を挿入したい 033 ページ区切りを挿入したい 034 Instagramの写真を埋め込みたい 035 最新の記事一覧を挿入したい 036 再利用ブロックを使いたい 037 抜粋を追加したい 038 固定ページのパーマリンクを設定したい 039 固定ページの親ページ・子ページを設定したい 040 カテゴリーを作成したい・整理したい 041 自動で設定されるカテゴリーを変更したい 042 アイキャッチ画像を追加したい 043 記事ごとのコメント設定をしたい 044 WP Multibyte Patchとはなにか知りたい 045 プライバシーポリシーページを作成したい Chapter 3　サイト全体の設定をするテクニック 046 サイトの基本情報を設定したい 047 ホームページに表示されるコンテンツを設定したい 048 一覧ページに表示される投稿数を変更したい 049 パーマリンクを設定したい 050 テーマをインストールして見た目をがらっと変えたい 051 テーマを削除したい 052 テーマカスタマイザーを使ってサイト全体の設定をしたい 053 サイトのナビゲーションを作成したい 054 ウィジェットを使ってコンテンツを追加したい 055 基本的なディスカッションの設定方法を知りたい 056 プラグインをインストールしたい 057 WordPress本体を更新したい Chapter 4　既存テーマのカスタマイズテクニック 058 HTMLの基礎知識 059 CSSの基礎知識 060 HTML、CSSのソースコードを解読したい 061 WordPressのフォルダとファイルの構成を知りたい 062 子テーマを作成したい 063 テーマにサムネイル画像を追加したい 064 子テーマのCSSを編集したい 065 既存テーマのHTML部分をカスタマイズしたい 066 表示されているページに使われているテンプレートを知りたい Chapter 5　テーマ作成の基本テクニック 067 PHPの基礎知識 068 WordPressの基本的な動作の仕組みを知りたい 069 テーマ作成に必要なスキルを知りたい 070 一般的なサイト制作のワークフローを知りたい 071 テーマ用HTML、CSS作成の注意点を知りたい 072 新規テーマ作成の準備をしたい 073 HTMLファイルからテーマを作成したい 074 テンプレートタグとはなにか知りたい 075 functions.phpとはどういうものか知りたい 076 style.cssの書式を知りたい 077 style.cssを読み込みたい 078 ページのヘッダー部分を分離したい 079 ページのフッター部分を分離したい 080 ページの文字コードを設定したい 081 ページ全体の言語をタグに出力したい 082 タグにタイトルを表示したい 083 タグにclass属性を追加したい 084 テーマで使う画像をまとめたい 085 テーマで使う画像をページに表示したい 086 CSSに記述する背景画像のパスを知りたい 087 要素に背景画像を適用したい 088 タグで画像を表示したい 089 ループとは何か知りたい 090 フロントページにコンテンツを表示したい Chapter 6　ページのバリエーションを増やすテクニック 091 WordPressのページのタイプを知りたい 092 投稿ページ用のテンプレートを作りたい 093 サイドバーを分離したい 094 投稿ページにコンテンツを表示したい 095 固定ページ用のテンプレートを作りたい 096 一覧ページ用のテンプレートを作りたい 097 一覧ページから各投稿ページにリンクしたい 098 ホームページにリンクしたい 099 固定ページにリンクしたい 100 カテゴリー別一覧ページにリンクしたい Chapter 7　標準的な機能をテーマに組み込むテクニック 101 アクション、フィルターがどういうものか知りたい 102 外部サイトからJavaScriptファイルを読み込みたい 103 テーマフォルダ内にあるJavaScriptファイルを読み込みたい 104 アイキャッチ画像を登録できるようにしたい 105 アイキャッチ画像をページに表示したい 106 アイキャッチ画像のサイズを指定して表示したい 107 アイキャッチ画像にclass属性を追加したい 108 アイキャッチ画像がないときには別の画像を表示したい 109 カスタムサイズのアイキャッチ画像を登録したい 110 カスタムサイズのアイキャッチ画像を表示したい 111 RSSフィードを配信したい 112 HTML5書式を有効化したい 113 FontAwesomeを使えるようにしたい Chapter 8　投稿ページ・固定ページの作成テクニック 114 テンプレート階層について知りたい 115 投稿の公開日を表示したい 116 投稿の公開時刻を表示したい 117 日時の表示フォーマットを設定したい 118 投稿のタグを表示したい 119 タグの表示フォーマットを変更したい 120 投稿のカテゴリーを表示したい 121 複数のカテゴリーを並べて表示したい 122 タイトルの横にカテゴリーを表示したい 123 投稿のパーマリンクを表示したい 124 投稿作者の名前を表示したい 125 投稿作者のWebサイトにリンクしたい 126 投稿作者のプロフィールを表示したい 127 ページ分割に対応したい 128 ページ分割リンクの表示をカスタマイズしたい 129 前後の投稿にリンクしたい 130 前後の投稿へのリンクの表示をカスタマイズしたい 131 Webサイトのホームページを作成したい 132 ホームとは別にブログのトップページを作成したい 133 固定ページのテンプレートを作成したい 134 特定の固定ページ向けの専用テンプレートを作成したい 135 エラーページを作成したい 136 投稿ページにコメント機能を追加したい 137 コメントの受付を終了したら「終了しました」と表示したい 138 お問い合わせページを作りたい Chapter 9　一覧ページの作成テクニック 139 一覧ページについて詳しく知りたい 140 汎用的な一覧ページを作成したい 141 記事がないときには別のコンテンツを表示したい 142 一覧ページに抜粋を表示したい 143 抜粋で表示される文字数を変更したい 144 抜粋の末尾に表示される[…]を変えたい 145 一覧ページにページネーションを追加したい 146 ページネーションに表示するページ番号を増やしたい 147 ページネーションの表示をカスタマイズしたい 148 カテゴリー別の一覧ページにタイトルを表示したい 149 作者別一覧ページを作成したい 150 日付ごとの一覧ページを作成したい 151 タグの一覧ページを作成したい 152 検索フォームを組み込みたい 153 検索結果ページを作成したい Chapter 10　ヘッダー・フッター・サイドバーを作り込むテクニック 154 サイトのファビコンを設定したい 155 サイトのタイトルをヘッダーに表示したい 156 フッターにRSSフィードへのリンクを設置したい 157 カスタムメニューを登録したい 158 カスタムメニューをヘッダーに設置したい 159 カスタムメニューのHTMLを調整したい 160 ヘッダーとフッターにカスタムメニューを設置したい 161 ウィジェット領域を定義したい 162 サイドバーにウィジェット領域を設置したい 163 複数のウィジェットを有効化したい 164 ふたつのサイドバーで3コラムレイアウトを作りたい 165 パンくずリストを表示したい 166 パンくずリストを「フロントページだけ」表示しないようにしたい 167 プライバシーポリシーページにリンクしたい Chapter 11　カスタム投稿タイプを使いこなすテクニック 168 カスタム投稿タイプとは何かを知りたい 169 カスタム投稿タイプを作成したい 170 カスタムタクソノミーとは何かを知りたい 171 カテゴリー型のカスタムタクソノミーを作成したい 172 タグ型のカスタムタクソノミーを作成したい 173 もともとある「タグ」をカスタム投稿タイプでも使いたい 174 カスタム投稿タイプの投稿をサイト内検索に含めたい 175 カスタム投稿タイプの個別投稿ページを作成したい 176 カスタム投稿タイプの一覧ページを作成したい 177 一覧ページで投稿タイプ名を取得・表示したい 178 個別投稿ページで投稿タイプ名を取得・表示したい 179 投稿に割り当てられたタクソノミー項目を取得・表示したい 180 タクソノミー項目が割り当てられているかどうかを調べたい 181 カスタム投稿タイプの一覧ページにリンクしたい 182 カスタム投稿タイプの個別投稿ページにリンクしたい 183 特定のタクソノミー項目の記事を一覧表示したい 184 タクソノミー一覧ページでタクソノミー名を表示したい 185 タクソノミー一覧ページでタームを表示したい 186 カスタム投稿タイプの投稿をRSSフィードに含めたい Chapter 12　カスタムフィールドを使いこなすテクニック 187 カスタムフィールドとは何かを知りたい 188 投稿画面にカスタムフィールドを追加したい 189 カスタムフィールドのテキスト入力欄を作りたい 190 カスタムフィールドのチェックボックス欄を作成したい 191 カスタムフィールドで画像のアップロードをしたい 192 カスタムフィールドに入力したテキストをページに表示したい 193 チェックボックスがついた項目だけを表示したい 194 カスタムフィールドで登録した画像を表示したい 195 カスタムフィールドの値を確認したい 196 ページのディスクリプションを設定したい 197 ページに固有のCSSを追加したい Chapter 13　最新記事や関連する記事を一覧表示するテクニック 198 ホームに異なる種類の投稿を同時に表示したい 199 一度に表示する投稿の件数を変更したい 200 ホームに特定のカテゴリーの最新情報を表示したい 201 ホームにカスタム投稿タイプの投稿を表示したい 202 ループ部分を別ファイルにしたい 203 ショートコードを自作したい 204 テキストを書き換えられるショートコードを作りたい 205 表示するボックスのタイトルや色を設定できるショートコードを作りたい Chapter 14　運営・メンテナンスのテクニック 206 ユーザーを登録・追加したい 207 権限グループについて詳しく知りたい 208 ディスカッション設定を詳しく知りたい 209 コメントスパムを削除したい 210 更新情報を通知する必要はあるのか知りたい 211 メールで投稿できるようにしたい 212 スマートフォンから投稿できるようにしたい 213 サイトの表示を高速化したい 214 サイトをバックアップしたい 215 データベースをエクスポートしたい 216 データベースをインポートしたい 217 データベースを直接操作してデータを復元したい 218 SNSのボタンを表示したい 219 Googleアナリティクスでアクセス状況を把握したい 220 サイトマップ（sitemap.xml）を出力したい 221 Google Adsenseを挿入したい 222 サイトの安全性を高めたい Chapter 15　開発環境構築のテクニック 223 ローカル開発環境を構築したい 224 ローカル開発環境でメール送信を確認したい 225 ローカル開発環境のSSLを有効化したい 226 デバッグモードを有効化したい 227 オンラインでテーマを開発したい 228 テーマを作るためのダミーのデータをインポートしたい 229 開発に便利なプラグインを知りたい 230 WordPressをコマンドラインで操作したい

「HTML5プロフェッショナル認定試験 レベル1」の対策テキストなら鉄板のこの1冊！ 本書は、LPI-Japanが主催する「HTML5プロフェッショナル認定試験 レベル1 Ver2.5」（2022年2月改訂版）に合格するための知識を身につけるための書籍です。 ※「HTML5プロフェッショナル認定試験」は、HTML5やCSS3、JavaScriptなど、最新のマークアップに関する技術力と知識を認定するための資格試験です。デザイン、Web、開発に関わる幅広い職種を対象としています。試験名には「HTML5」が使われていますが、最新の標準仕様であるHTML Living Standardに基づいて作成されており、本書もそれに基づき執筆・制作されています。 本書は、LPI-Japanによって公開されている出題範囲をしっかりと押さえつつ、関連する知識も含めて、読みやすく、覚えやすい形でまとめています。 紙面では、「用語解説」や「注意するポイント」「補足説明」などを適切に切り分けて掲載し、重要な点がスムーズに学べるよう配慮しています。 また、各章の最後には問題集を用意しています。これにより、学習した内容の理解度を確認するとともに、しっかりと定着させていくことができます。 今回の改訂版では、新しい試験範囲と仕様の変更に沿って、HTML、CSSの解説を全面的に見直し、ブラッシュアップしています。 出題範囲の改訂にあわせて項目の追加や削除、内容の修正、順番の入れ替えなどを行い、より読みやすく、理解しやすい内容になっています。 Chapter1　HTML Chapter2　CSS Chapter3　レスポンシブWebデザイン Chapter4　API概要 Chapter5　Web関連の規格と技術

【7日間で配色の基礎テクニックを手に入れよう】 「配色って難しい」と思っていても「これは美しい色だなぁ」と感じたことは誰にでもあるはずです。こんな経験のある人ならば、美しい配色はつくれます。実はセンスが眠っているだけ。この本に導かれて、７日間で自分の中のセンスを呼び覚ましましょう。 【第１日目はオリエンテーション】 美しいと感じること自体とても大切ですが、もう少し踏み込んで周りの色を見てください。印象に残る配色にはある共通点があるんです。何気なく見ていても気づかなかったこれらの共通点とは、配色のパターンやルールです。それを無意識に読み取って「美しい」と感じていたのです。美しい配色を作れる種は自分の中にあるんです。 第１日目は、美しい配色をつくる伝統的なルールを要約して解説しています。この本全体でどんなことが待っているのかな、というオリエンテーションです。 【第２日目は配色に必要なツールと使い方】 色の基礎知識の中でも配色する時に絶対覚えておいたほうがいいことだけに絞って解説しています。とはいえ、これを理解することがどんな色の知識よりも大切です。 もうひとつは「５役色」「主役色」「脇役色（引き立て色）」「支配色（背景色）」「融合色（なじませ色）」「アクセント色」です。小説や映画に主役や脇役があるように配色にも役割があります。そのシーンで役割を果たすためには、そのほかの小道具や背景などの協力が絶対必要です。 【第３〜５日目で配色の実践をレクチャー】 ２日目で学習したツールを使って様々な配色をつくっていきます。どの配色にも必ず良い例とうまくいっていない例を比較しているので、その日の課題がひと目で理解できるはずです。各日の課題のラストページは復習問題が付いていて、きちんと理解できたかをチェックします。 【第６、７日目はステップアップへの道】 ここまでやってきて配色に自信が持てたと思います。しかしどんなに美しい配色であっても表現したいテーマのイメージと合っていなければ見る人に伝わらないのです。 ある「モノ」をどう伝えたいのか、というイメージづくりは配色する時の最初に考えることです。 イメージは個人のもので千差万別ですが、実は共通項も多くあります。最終日は、イメージとキーワードと配色を結びつけた「イメージマップ」で、自分が目指す配色の方向とイメージが合っているかを確認します。 実践的で至れり尽くせりな配色基礎講座。配色は苦手と思っていた人も、７日間でぜひあなたの中に眠っている配色の種を開花させてください。 誰にでも美しい配色はつくれます。実はセンスが眠っているだけ。この本に導かれて、７日間で自分の中のセンスを呼び覚ましましょう。 第１部 配色の準備 　１日目 配色する前に 　２日目 配色のツール＜三属性・五役色＞ 第２部 配色の実践 　３日目 引き立てる型１ 　４日目 引き立てる型２ 　５日目 なじませる型 　６日目 イメージづくり 　７日目 イメージマップ

すぐに変わってしまうトレンドを追うより変わらない"考え方"をおさえよう。フルカラーの紙面でかけあいを追いながらたのしくわかる! 第1章 検索エンジンは、なんのために、どんなことをしてるのか 第2章 検索する人の気持ちと行動を考えてみよう 第3章 検索キーワードを見つけよう 第4章 検索キーワードをサイトに反映させよう 第5章 コンテンツを作ろう 第6章 リンクを集めよう 第7章 SEOを「売り手目線の販促活動」と考えてはいけない おわりに 検索エンジンの進化とこれからのSEO

HTML&CSSで実現する、柔軟でレスポンシブなWebデザイン 本書は「CSSグリッドで実現できることは何なのか」をテーマにした一冊です。 これまでのHTMLとCSSを使ったWeb制作では、思ったようなデザインを実現するために「コンテンツをどういう順に記述するか」「どうマークアップするか」「どのCSSのレイアウトテクニックを利用するか」をパズルのように取捨選択し、形にしていくスキルが必要でした。 それを解決する方法として注目を浴びているのが、CSSグリッドを使ったレイアウトです。 本書ではCSSグリッドによるWebデザインを、作成制作を通して解説していきます。次のようなステップで、デザインを組み立てていきます。 　1　作例ごとに、レイアウトソフトを利用して完成見本（デザインカンプ）を用意 　2　完成見本からパーツを抽出し、HTMLと文書構造を組み立て 　3　CSSグリッドを作成し、パーツを配置 　4　レスポンシブの設定を行い、デザインを仕上げる 作例はそれぞれ、PC、タブレット、スマートフォンで問題なく表示されるように仕上げていきます。 用意された作例は以下になります。 　・縦横に均等に分割したグリッドによる「雑誌風レイアウト」 　・複数のグリッドを組み合わせて作る「フライヤー風レイアウト」 　・画像とテキストの重ね合わせによる「画像メインのレイアウト」 　・「左右対称/非対称のレイアウト」 　・上部や左部にナビゲーションを配置 巻末には「CSSグリッド」リファレンスも付属。 本書を通して、CSSグリッドがWebデザインにもたらす表現力と自由さを体験してください。 Introduction　Webデザイン 　　　0-1　Web デザインで考えないといけないこと 　　　0-2　Web デザインの３要素の相互関係 Chapter1　雑誌風レイアウト 　　　1-1　完成見本のデザイン 　　　1-2　完成見本の分析 　　　1-3　完成見本をCSS グリッドなしで作成する場合の問題点 　　　1-4　完成見本をCSS グリッドで作成するための準備 　　　1-5　CSS グリッドの構成を検討する 　　　1-6　CSS グリッドを作成する 　　　1-7　パーツの配置先を指定する 　　　1-8　パーツのデザインを整える（１）　タイトル部分 　　　1-9　パーツのデザインを整える（２）　テキスト部分 　　　1-10　パーツのデザインを整える（３）　画像部分 　　　1-11　パーツのデザインを整える（４）　SNS メニュー 　　　1-12　パーツのデザインを整える（５）　キャッチコピーの引用符 　　　1-13　大きい画面でのデザインを整える 　　　1-14　小さい画面でのデザインを整える Chapter2　フライヤー風レイアウト 　　　2-1　完成見本のデザイン 　　　2-2　完成見本の分析 　　　2-3　完成見本をCSS グリッドなしで作成する場合の問題点 　　　2-4　完成見本をCSS グリッドで作成するための準備 　　　2-5　CSS グリッドを作成する 　　　2-6　パーツの配置先を指定する 　　　2-7　ヘッダーのパーツの配置を整える 　　　2-8　ヘッダーのパーツのデザインを整える 　　　2-9　ヘッダーにパーツを追加する 　　　2-10　セクションのパーツの配置を整える 　　　2-11　セクションの基本的なデザインを整える 　　　2-12　セクションごとに小見出しのデザインを整える 　　　2-13　ショップ情報のデザインを整える 　　　2-14　タブレットサイズの画面でのデザインを仕上げる 　　　2-15　大きい画面でのデザインを整える 　　　2-16　小さい画面でのデザインを整える Chapter3　画像をメインにしたレイアウト 　　　3-1　完成見本のデザイン 　　　3-2　完成見本をCSS グリッドなしで作成する場合の問題点 3A　画像にテキストを重ねたレイアウト 　　　3A-1　完成見本の分析 　　　3A-2　パーツの設定を記述する 　　　3A-3　CSS グリッドを作成してパーツを配置する 　　　3A-4　パーツのデザインを整える 　　　3A-5　大きい画面と小さい画面でのデザインを整える 3B　画像にテキストの一部を重ねたレイアウト 　　　3B-1　完成見本の分析 　　　3B-2　パーツの設定を記述する 　　　3B-3　CSS グリッドを作成してパーツを配置する 　　　3B-4　パーツのデザインを整える 　　　3B-5　大きい画面でのデザインを整える 　　　3B-6　小さい画面でのデザインを整える 3C　左右対称なレイアウト 　　　3C-1　完成見本の分析 　　　3C-2　パーツの設定を記述する 　　　3C-3　CSS グリッドを作成してパーツを配置する 　　　3C-4　パーツのデザインを整える 　　　3C-5　大きい画面と小さい画面でのデザインを整える 3D　非対称なレイアウト 　　　3D-1　完成見本の分析 　　　3D-2　パーツの設定を記述する 　　　3D-3　CSS グリッドを作成してパーツを配置する 　　　3D-4　パーツのデザインを整える 　　　3D-5　大きい画面と小さい画面でのデザインを整える Chapter4　ナビゲーション 　　　4-1　完成見本のデザイン 　　　4-2　完成見本の分析 　　　4-3　パーツの設定を記述する 　　　4-4　CSS グリッドを作成してパーツを配置する 　　　4-5　パーツのデザインを整える 　　　4-6　大きい画面でのデザインを整える 　　　4-7　メインコンテンツを配置してみる Appendix HTML & CSS の基本設定 ブラウザでの表示確認 CSS グリッド・リファレンス

全米で30年以上読み継がれる文章術のバイブル。10年ぶりの改訂で見出しやDM、Webコンテンツまであらゆる書き方がわかる。 「私の知る限り、本書がいらない コピーライターは1人もいない。私も含めて」 広告の父、デイヴィット・オグルヴィ氏推薦 本書は、「売る」ための文章術の本です。 米国で1985年に発売されてからセールスライティングの 書籍としては、異例のロングセラーを誇っています。 豊富な事例と共に売るためのコピーを書く法則や ヒントがあらゆる媒体に合わせて解説されています。 約10年ぶりの大改訂となる増補改訂版では、 ランディングページやオンライン広告、ソーシャルメディアなど、 デジタルマーケティングの書き方が追加され、集客にも対応。 ますます手放せない1冊になりました。 【対象読者】 ●モノやサービスを売るすべての人 コピーライター、コピーライターに発注する人、 広報やPR担当者、セールス、記事編集者など 【著者紹介】 Robert W .Bly（ロバート・W・ブライ）B2B、ハイテク、ダイレクト・マーケティングを専門とするコピーライター。40年以上にわたり広告、パンフレットやDM、セールスレター、広報資料、Eメールキャンペーン、ウェブサイトを100以上の企業向けに書いてきた実績を持つ。これまでの著書は100冊以上。邦訳既刊書には『ビジネス英語文書ルールブック』（荒竹出版刊）がある。 【目次】 ・第1章　コピーライティングとは ・第2章　パッと目を引く大見出しと件名 ・第3章　伝えるためのライティング技術 ・第4章　売るための文章 ・第5章　ポジショニング ・第6章　印刷広告 ・第7章　ダイレクトメールはどうやって書けばいいか ・第8章　パンフレットやカタログなどの販促資料（印刷物・PDF）を作るには ・第9章　プレスリリースを作成するには ・第10章　テレビとラジオのCMを作るには ・第11章　ウェブサイトを作成するには ★第12章　ランディングページを作るには ・第13章　Eメールマーケティングを実施するには ★第14章　オンライン広告を作成するには ★第15章　ソーシャルメディア用のコピーを書くには ★第16章　動画を作成するには ★第17章　コンテンツマーケティングのやり方 付録　広告用語集 ※★マークがついている章は旧版からの追加項目 ※そのほか、すべての章でデジタル時代に合わせたアップデートがなされた 第1章　コピーライティングとは ・ライターと読者のどちらにとっても、コピーライティングはインターネット到来で変わったか？ ・デジタルの時代に刺さるコピーを書くための3つのキーポイント ・昔かたぎのコピーライターに朗報 ・ネット動画はコピーライティングをどう変えたか？ ・ソーシャルメディアはマーケティングをどう変えたか？ ・マルチチャネルマーケティングはコピーライティングをどう変えたか？ 第2章　パッと目を引く大見出しと件名 ・大見出しで「つかむ」には？ ・大見出しの4つの機能 ・大見出し　基本の8種類 ・スワイプファイルに入れるべき38の大見出し ・効果的な大見出しを作るための4つのU ・大見出しのヒントをもう少し ・大見出しを生み出すテクニック ・大見出しについて最後に一言 第3章　伝えるためのライティング技術 ・明確なコピーを書くための11のヒント ・プロのテクニックをご紹介 ・コピーライターのチェックリスト 第4章　売るための文章 ・特長とベネフィット ・買わせるステップ ・「ニセの論理」を使って、事実で売り文句を後押ししよう ・唯一無二の売り―USP ・二番手の売り ・顧客を知る ・BDFフォーミュラとは ・「製品を買いたい理由」のチェックリスト ・長文コピーVS. 短文コピー ・世代別マーケティング ・ポジショニング 第5章　ポジショニング ・コピーライティングのリサーチ ・オンラインリサーチをざっくりまとめると ・コピーライティング案件の下準備 ・インタビューで事実を見つける ・情報を整理する ・最初にアウトラインを作成するべきか？ ・ソーシャルメディアから情報を得る ・オンライン調査 ・コピーを書くには ・情報源を記録する ・売れる広告のアイデアを生み出すテクニック 第6章　印刷広告 ・刺さる広告を作るには ・広告にスローガンは必要か ・広告草稿のフォーマット ・広告のアイデアのチェックリスト ・反応を引き出すメカニズム 第7章　ダイレクトメールはどうやって書けばいいか ・パーソナルな広告媒体 ・セールスレターの仕組み ・セールスレターはどう書き出すのが正解？　14通りの冒頭パターン ・封筒にティーザーコピーはつけるべき？ ・セールスレターは売り込むもの、パンフレットは教えるもの ・郵便物への反応率を高めるには 第8章　パンフレットやカタログなどの販促資料（印刷物・PDF）を作るには ・パンフレット作成の腕を上げる11のアドバイス ・パンフレットの構成はどうする？ ・カタログ ・そのほかの販促資料 第9章　プレスリリースを作成するには ・PRと有料広告の違いは？ ・ウェブなら消費者に直接PRできる ・プレスリリースとは？ ・でもニュース性はあるの？ ・特集記事を書くには ・宣伝のニュースレターを書くには ・ニュースレターの記事のネタに使えるチェックリスト 第10章　テレビとラジオのCMを作るには ・12通りのCMの型 ・テレビCMの脚本を書くコツ ・脚本のフォーマット ・ラジオCMの脚本を書くには ・テレビやラジオで放送されないCM 第11章　ウェブサイトを作成するには ・今、ネット広告で効果があること ・よくあるオンライン広告の案件とは ・クリックファネルズでウェブサイトを作るには ・ウェブサイト用のコピーについてもう1言 ・SEO対策 第12章　ランディングページを作るには ・ランディングページのコンバージョン率を上げるための10のヒント ・効果的なランディングページの他のポイント ・ランディングページのトラフィックを伸ばす7つのやり方 第13章　Eメールマーケティングを実施するには ・Eメールマーケティングで結果を出すための15のヒント ・長い宣伝メールVS. 短い宣伝メール ・ステップメールを作成するには ・メルマガを作成するには 第14章　オンライン広告を作成するには ・バナー広告のサイズ ・配置 ・バナーのデザインと内容 ・PPC広告 ・メルマガ広告 ・Facebook広告 ・Facebookの写真広告を作るには ・Facebook広告のほかの形式 ・「投稿を宣伝」がいいか、「Facebook広告」がいいか ・Facebook広告の料金はいくらくらい？ 第15章　ソーシャルメディア用のコピーを書くには ・ソーシャルメディアのプラットフォームについて知っておくべきこと ・ビジネスアカウントを作る ・ファネルを使いこなす ・ソーシャルメディアで投稿する際のヒント ・定期的に投稿して読者を逃がさないようにする ・Facebook ・Twitter ・まとめ： SNSプラットフォームの使い方 第16章　動画を作成するには ・動画脚本の種類 ・脚本作成プロジェクトを立ち上げるには ・脚本作成 ・脚本を書くには ・脚本が出来上がったら ・セールスプレゼン動画（VSL） 第17章　コンテンツマーケティングのやり方 ・コンテンツ作成でよくある7つの失敗 ・コンテンツの４つの形式 ・ホワイトペーパー ・ホワイトペーパーでマーケティングを行うための９つのステップ ・ブログ ・ケーススタディ 付録　広告用語集

Webサイトの構造を記述するHTMLとWebサイトのデザインを記述するスタイルシートの書き方を、チュートリアル形式で基礎から解説しています。自分のホームページを作ってみたいと考えている方や、スタイルシートを使ってWebサイトのリニューアルをしてみたいと考えている方にオススメです。また、本書で学習した知識を使えば、ウェブログ(weblog)の編集にも役立つでしょう。ホームページ制作の基本をしっかり学べる入門書。 Ready Webサイト制作の基礎知識 1 HTMLの基本 2 スタイルシートを使ったテキストデザイン 3 画像、テーブル、リストを配置しよう 4 スタイルシートによるレイアウトデザイン 5 Webサイトを充実させよう 6 Webサイトを公開しよう Appendix

本書のテーマはWebサービスの実践的な設計。まず良いWebサービス設計の第一歩として、HTTPやURI、HTMLなどの仕様を歴史や設計思想を織り交ぜて解説。そしてWebサービスにおける設計課題、たとえば望ましいURI、HTTPメソッドの使い分け、クライアントとサーバの役割分担、設計プロセスなどについて、現時点でのベストプラクティスを紹介。 第1部 Web概論 第2部 URI 第3部 HTTP 第4部 ハイパーメディアフォーマット 第5部 Webサービスの設計 付録

大手書店チェーンで売上No.1（※）を記録し続けるWordPressの入門書に、最新バージョン5.xに対応した第5版が登場！　セミナー経験も豊富な著者陣が実践的なコツを織り交ぜて丁寧に解説。機能性・デザイン性に優れた人気テーマ「Lightning」を使って、パソコン＆スマホ両対応の本格的なWebサイトが作れます。最新バージョンに対応した操作手順がすべて画面付きで解説されているので、はじめてWebサイトを作る人でも安心。HTML＆CSSの知識が一切なくても作れます。※大手書店チェーン調べ（2020年12月～2021年5月、WordPress解説書）

これ1冊で「Webページ制作からサーバーの開発」までわかる！ 「Webアプリケーションってどうやって作るの？」 「これからWeb業界に入るから、重要技術をざっと知っておきたいな」 本書は、そんな、Web制作、Webアプリケーションをこれから始めたい人を対象にした書籍です。 この本では、本格的なWebを作る上で必要となる以下の技術の基本についてコンパクトに説明してあります。 ・HTML ― Webページの内容を記述するための技術 ・スタイルシート ― Webページにスタイルを適用するための技術 ・JavaScript ― Webページの中で様々な処理を実行する言語 ・Node.js ― サーバープログラムを開発するためのJavaScriptエンジン ・Express ― Node.jsでWebを作るためのフレームワーク ・SQLite3 ― 本格リレーショナルデータベース これらの基本的な使い方がわかれば、本格的なWebアプリケーションを作れるようになるでしょう。これらの技術が身につけば、「クライアント（Webページ）からサーバーまでを開発する」ことが可能になります。 本来なら、これらをマスターするにはたくさんの入門書や参考書籍が必要となってしまいますが、すべて用意し学ぶのは初心者にはかなりな負担です。そこで本書では、「これだけわかれば何かできる」という最低限の知識に絞って一冊にまとめました。 === 本書ではまず、Chapter 1で本書で学ぶことの概要をつかみ、開発環境を整えます。 続いてChapter 2では、Webページを作れるように、ページの構造を作るHTML、色やサイズなどのスタイリングをするCSSを基礎から学びます。 続いてChapter 3では、Webページに動きをつけられるように、JavaScriptというプログラミング言語を学びます。 そしてChapter 4では、Node.jsという、サーバーサイドの開発ができるJavaScriptについて学びます。 Chapter 5では、Node.jsとExpressというフレームワークと組み合わせて、サーバー側の処理も行う簡単なWebアプリケーションを作ります。 そしてChapter 6では、Webアプリケーションを作る上で重要な役割を担う、データベースについて学びます。本書ではSQLiteを使用します。 最後のChapter 7では、本書で学んだことをすべて組み合わせて、Todo管理アプリケーションを作ります。このアプリケーションは、ユーザーのログイン管理、タスクの作成・取得・更新・削除の機能を備えており、いろいろなアプリケーションの基本となる形になっています。 この本を読んだだけでは、これらの技術を完璧にマスターすることはできませんが、どんな技術が必要で、それらをどう組み合せれば、Webアプリケーションを作ることができるのかを理解することができます。 「これから始める初心者だけれど、手ごたえを感じたい」、そんな人におすすめの1冊です。 ■Part 1 基本編 〇 Chapter 1 Webプログラミングを始めよう 1-1 Webの開発ってどんなもの？ 1-2 開発環境を整えよう 〇 Chapter 2 HTML/CSSを学ぼう 2-1 HTMLの基礎を覚えよう 2-2 より複雑なコンテンツ 2-3 スタイルシート（CSS）を使おう 2-4 Bootstrapでスタイル設定しよう 〇 Chapter 3 JavaScriptを学ぼう 3-1 JavaScriptの基礎を覚えよう 3-2 関数・配列・オブジェクト 3-3 Document Object Modelを使おう 〇 Chapter 4 Node.jsを学ぼう 4-1 Node.jsを準備しよう 4-2 入出力をマスターしよう 4-3 外部データにアクセスしよう 4-4 覚え書きツールを作ろう ■Part 2 開発編 〇 Chapter 5 Expressフレームワークを学ぼう 5-1 Expressの基本を理解しよう 5-2 ExpressでWebアプリを作ろう 5-3 Webページ作成をマスターしよう 〇 Chapter 6 データベースを使おう 6-1 SQLite 3を使おう 6-2 Node.jsからSQLite 3を利用しよう 6-3 SQLの基本を学ぼう 6-4 CRUDを作成しよう 〇 Chapter 7 本格Webアプリを作ろう 7-1 ToDoアプリを作ろう 7-2 利用者の管理機能を作ろう 7-3 ToDo関連を作成しよう

モバイルファースト＆レスポンシブなサイトの作成手法を、ステップ・バイ・ステップでマスターする モバイルファースト＆レスポンシブなサイトの作成手法を、ステップ・バイ・ステップでマスターする！ 本書では、モバイルファースト＆レスポンシブで、サンプルサイトを制作していく過程を実際に操作しながら学んでいきます。 サイトはパーツ単位で作成し、章ごとに1つのパーツを作成していきます。 Chpater1　ヘッダー Chpater2　ヒーロー Chapter3　画像とテキスト Chpater4　記事一覧 Chapter5　フッター Chapter6　記事 Chapter7　プラン＆フッター Chapter8　ナビゲーション それぞれのパーツの作成にあたっては、パーツのレイアウトを実現するCSSの選択肢を示し、場面に応じて適切なものを選択して、作成していきます。 章末には他の選択肢やそのバリエーションをまとめて解説していますので、デザインやレイアウトの技を幅広く身につけることができるでしょう。 HTMLは最新の「HTML Living Standard」に準拠し、CSSでは従来から活用されてきたメディアクエリの他、Flexbox、CSS Gridなどのレイアウトのコントロール、CSS関数を使いこなします。 「本書では、新しいHTML&CSSに沿った形で『レスポンシブWebデザイン』を見直し、ページを作成しながらさまざまな選択肢を比較検討していきます。 サンプルのページを作成するばかりでなく、ページを実現するためのバリエーションを増やして、これからのWeb 制作に活用していただければと思います。』（著者「はじめに」より） 演習用ファイルがダウンロードできますので、ぜひ本書で最新のHTML&CSSコーディングを体感してください。 【特典付き】 ・特典PDF『HTML&CSS　簡易リファレンス』 本書のサポートサイトから入手してください。 Introduction　イントロダクション Setup　下準備 Chpater1　ヘッダー Chpater2　ヒーロー Chapter3　画像とテキスト Chpater4　記事一覧 Chapter5　フッター Chapter6　記事 Chapter7　プラン＆フッター Chapter8　ナビゲーション

人間の行動原理を意識したデザインを提唱し支持されるロングベストセラー。各分野の新しい研究結果を反映した待望のアップデート。 ベストセラー書でロングセラー書の改訂版！ 人間の行動原理を意識したデザインの提唱で多くのデザイナー、エンジニアに支持され続けるロングベストセラー書の改訂版。わかりやすさはそのままに、ヤル気から感情まで各分野の新しい研究結果を反映して待望のアップデート。デザインは相手から無意識の反応を誘い出すための大事な要素です。人間の行動原理を理解していないデザインは相手を混乱させ目的の結果につながりません。本書では科学的な研究から導き出された、100の指針を例とともにわかりやすく紹介します。人間の思考や行動、遊び方にマッチした直観的で人を引きつけるプロダクトをデザインするための必読書です。 人間の行動原理を意識したデザインを提唱し支持されるロングベストセラー。各分野の新しい研究結果を反映した待望のアップデート。

累計40万部突破の「逆引きデザイン事典シリーズ」が増補改訂版となって新登場。CCの新機能にも対応！ 定番の使い方からプロの便利技・CC新常識まで、 ずっと役立つ、不滅の一冊です。 累計40万部突破の「逆引きデザイン事典シリーズ」が増補改訂版となって新登場です。 Photoshop CC／CS6／CS5／CS4／CS3と全5バージョンに対応し、 旧バージョンを使い続けたいという方から、 月額制のAdobe Creative Cloudに加入したユーザーまで 幅広く活用していただけます。 項目は、Photoshopユーザーのニーズに添うよう厳選したものを掲載。 画像補正の流れや注意点といった基本はもちろん、CCに加わった新機能を網羅し、 「Web」や「効率化」についての解説もより充実しました。 「あれを作りたい」「これどうするんだっけ」から サッと引けて簡単にやり方がわかります。 作例サンプルファイルはWebからダウンロード可能。 クリエイティブに、ビジネスに、学習に。 ぜひとも長く手元に置いておきたい、定番の1冊です。 ■あらゆる「ああしたい」「こうしたい」にお応えします■ ・基本操作をおぼえたい ・趣味でイラストを描きたい ・便利な使い方で作業効率を上げたい ・知りたいことだけサクっと調べたい ・CCの最新機能が知りたい…etc. ■目次■ ツールリファレンス パネルリファレンス CC新機能リファレンス 第1章　基本操作 第2章　色補正 第3章　レタッチ・マスク 第4章　描画モード・合成 第5章　フィルター加工 第6章　作画・アートワーク 第7章　フォトグラフィ 第8章　印刷・出力 第9章　Web 第10章　カラーマネジメント 第11章　効率化 索引 ツールリファレンス パネルリファレンス CC新機能リファレンス 第1章　基本操作 第2章　色補正 第3章　レタッチ・マスク 第4章　描画モード・合成 第5章　フィルター加工 第6章　作画・アートワーク 第7章　フォトグラフィ 第8章　印刷・出力 第9章　Web 第10章　カラーマネジメント 第11章　効率化 索引

累計40万部突破の「逆引きデザイン事典シリーズ」が増補改訂版となって新登場。CCの新機能にも対応！ 定番の使い方からプロの便利技・CC新常識まで、 ずっと役立つ、不滅の一冊です。 累計40万部突破の「逆引きデザイン事典シリーズ」が増補改訂版となって新登場です。 Illustrator CC／CS6／CS5／CS4／CS3と全5バージョンに対応し、 旧バージョンを使い続けたいという方から、 月額制のAdobe Creative Cloudに加入したユーザーまで 幅広く活用していただけます。 知りたいことからすぐ引けるスタイルは従来のまま、 「クイック書き出し」「Shaperツール」「Adobe Stockとの連携強化」など 注目の新機能もしっかり解説。 「あれを作りたい」「これどうするんだっけ」から サッと引けて簡単にやり方がわかります。 作例サンプルファイルはWebからダウンロード可能。 クリエイティブに、ビジネスに、学習に。 ぜひとも長く手元に置いておきたい定番の1冊です。 ■あらゆる「ああしたい」「こうしたい」にお応えします■ ・基本操作をおぼえたい ・趣味でイラストを描きたい ・便利な使い方で作業効率を上げたい ・知りたいことだけサクっと調べたい ・CCの最新機能が知りたい…etc. ■目次■ ツールリファレンス ワークスペースリファレンス パネルリファレンス CC新機能リファレンス 第1章　作業環境と操作 第2章　オブジェクトの作成 第3章　オブジェクトの編集 第4章　塗り・線・カラーの設定 第5章　画像の配置と編集 第6章　フィルター効果 第7章　文字の操作 第8章　日本語組版 第9章　グラフの作成 第10章　Webグラフィックの作成 第11章　高度な機能 第12章　印刷と入稿 プロセスカラーチャート 罫線の作図法早見表 索引 ツールリファレンス ワークスペースリファレンス パネルリファレンス CC新機能リファレンス 第1章　作業環境と操作 第2章　オブジェクトの作成 第3章　オブジェクトの編集 第4章　塗り・線・カラーの設定 第5章　画像の配置と編集 第6章　フィルター効果 第7章　文字の操作 第8章　日本語組版 第9章　グラフの作成 第10章　Webグラフィックの作成 第11章　高度な機能 第12章　印刷と入稿 プロセスカラーチャート 罫線の作図法早見表 索引

まったくのプログラミング初心者に向けた、Webプログラミングの入門書 まったくのプログラミング初心者に向けた、Webプログラミングの入門書です。 「HTML+CSS」「JavaScript」「PHPによるサーバー開発」 「Ajaxによる非同期通信」Webを使ったスマホアプリ作成」などを、猛スピードで全部学びましょう！ Webプログラミングに必要なテーマの本は、それぞれ1冊になるくらいのボリュームですので、 それを何冊も読むのは大変ですよね。 本書では必要なものを全部つまみ食いして、一度にすべて使えるようになれます！ 「HTML＋JavaScriptのWeb作成」から一歩踏み出し、サーバー側の開発まで含めた プログラミングを学び、応用として、Web部分をそのままスマートフォンのアプリに組み込み、 「サーバーと連携したスマホアプリ」までも取り上げています。 ですので、「Webページ、サーバー、スマホアプリ」のすべてを体験できます。 昨今、プログラミングの仕事というとWebプログラミングは避けて通れませんので、 プログラマーになりたいあなたには必読です！ Chapter 1　基本のHTML&CSSを使おう 1-1　Webの開発って、なに？ 1-2　HTMLを使おう 1-3　スタイルシートでデザインしよう 1-4　さまざまなスタイルを利用しよう Chapter 2　JavaScriptの基本を覚えよう 2-1　値と変数をマスターしよう 2-2　構文を覚えよう 2-3　関数とオブジェクト Chapter 3　Webを操作しよう 3-1　DOMを操作しよう 3-2　DOMオブジェクトを操作しよう Chapter 4　グラフィックを操作しよう 4-1　Canvasを使おう 4-2　グラフィックを動かそう Chapter 5　サーバープログラムを作ろう 5-1　PHPを使えるようになろう 5-2　Webのさまざまな機能を使おう Chapter 6　本格アプリに挑戦しよう 6-1　アイテム収集ゲーム「Collect It!」 6-2　2D 擬似アドベンチャーゲーム「Adventurer」 Chapter 7　スマホアプリに挑戦！ 7-1　Monacaを使いこなそう 7-2　プレビューとデバッグ

UXデザインの第一人者エリック・ライスが、豊富な事例をもとにユーザビリティの問題を洗い出し、解決するための手法をまとめた実践的ガイドブック! 第1部 使いやすさ(機能性 反応性 人間工学性 利便性 万人保証性) 第2部 優美さと明快さ(可視性 理解可能性 論理性 一貫性 予測可能性 これからのステップ)

初心者向けデザインシリーズ「デザインの学校」に、2020年最新版が登場します。「作例を作りながら学べる」「短期間で基本操作を習得できる」「大きな文字と画面で読みやすい」といった特徴はそのままに、最新のバージョンに対応。一流講師陣を集めた「ロクナナワークショップ」を主催するロクナナが執筆しているので、現場のプロもお墨付きの内容になっています。「わかりやすいIllustratorの本が欲しい」「なるべく早くIllustratorをマスターしたい！」という方に最適な入門書です。 Chapter 01　イラストを描こう 01　準備をしよう 02　四角形を描こう 03　三角形を描こう 04　円と直線を描こう 05　自由な線を描こう 06　手書き風の線を描こう 07　色をつけよう 08　線を設定しよう 09　ドキュメントを保存しよう Column　おすすめショートカットキー Chapter 02　ロゴをつくろう 01　図形を変形しよう 02　図形を回転・反転しよう 03　グラデーションをつけよう 04　図形を移動・複製しよう 05　文字を入力しよう 06　文字を図形にしよう 07　グループ化しよう Column　重ね順を学ぼう Chapter 03　名刺をつくろう 01　名刺の枠をつくろう 02　定規を設定しよう 03　ロゴを別のファイルからコピーしよう 04　ロゴを配置しよう 05　文字を入力しよう 06　整列させよう 07　帯を描こう Chapter 04　地図をつくろう 01　下絵を配置しよう 02　直線を描こう 03　曲線を描こう 04　折れ線を描こう 05　直線と曲線を組み合わせよう 06　線路を描こう 07　アイコンを配置しよう 08　マップを型抜きしよう Column　PDFファイルを作成しよう Chapter 05　ポストカードをつくろう 01　別名で保存しよう 02　パターンをつくろう 03　リボン風のタイトルを描こう 04　エリア内に文章を流し込もう 05　写真を図形で型抜きしよう Column　制作物に合ったカラーモードを設定しよう Chapter 06　ブログのタイトル画像をつくろう 01　新規ドキュメントを作成しよう 02　背景と模様を描こう 03　文字に影をつけよう 04　模様を描いて複製しよう 05　イラストを描こう 06　オブジェクトの一部の色を変えよう 07　イラストを一括編集しよう 08　Web用に保存しよう

「パソコンやインターネットに詳しくないけど、Webサイトを作りたい」「知識ゼロでも手取り足取りやさしくWebデザインを教えてほしい」「今のWebサイトは成果が上がらないので、デザインを見直したい」そんなあなたに朗報です! イラストを見るだけでサクッと学べると評判の「見るだけノート」シリーズに、待望のWebデザイン登場! これ一冊で、専門知識がなくてもラクラクWebサイトが作れます。デジタル対応必須のウィズコロナ時代の必読書。

いちばんやさしい入門書 知識ゼロから、きちんと学べる入門書！ はじめてPhotoshopを触る人を対象とした、超入門書です。 Photoshopの各ツールの基本機能から、実務で使える鉄板の応用技まで、 この1冊でPhotoshopの基本は必ず習得できます! 最新バージョンに完全対応しており、また操作手順を省くことなく、全手順を解説しているので、 初心者でも操作に迷うことはありません！ これからはじめる人に読んでほしい、オススメの1冊です。 Mac & Windows 対応 基本の「き」から1つずつ、 Photoshopの使い方とデジタル画像の基礎知識を解説。 人気講師が教える「手を動かしながら学ぶ授業」です。 ■本書の対象読者 ・Photoshopをはじめて触る人 ・デザインをはじめたい人 ・写真の加工やレタッチをはじめたい人 ・PhotoshopやIllustratorを使ってデザインワークをする人 Lesson1 Photoshopの基礎知識 Lesson2 はじめてのPhotoshop Lesson3 色調補正の基本 Lesson4 選択範囲の作り方 Lesson 5 レイヤーの基本操作 Lesson 6 色の設定とペイント機能 Lesson 7 画像修正の基本 Lesson 8 フィルターの活用 Lesson 9 文字、パス、シェイプ Lesson10 総合演習 Lesson11 便利な機能

知識ゼロから、きちんと学べる入門書！　２年ぶりの改訂！ はじめてIllustratorを触る人を対象とした、超入門書です。Illustratorの各ツールの基本機能から、実務で使える鉄板の応用技まで、この1冊でIllustratorの基本は必ず習得できます! 今回は最新のCC（Creative Croud）に完全対応しました。これからはじめる人に読んでほしい、オススメの1冊です。 [目次] Lesson 1 Illustratorの基礎知識 Lesson 2 はじめてのIllustrator Lesson 3 基本図形の描き方と変形操作 Lesson 4 パスの描画と編集 Lesson 5 オブジェクトの編集とレイヤーの基本 Lesson 6 色とグラデーションの設定 Lesson 7 変形・合成・特殊効果 Lesson 8 画像の配置と編集 Lesson 9 文字操作と段落設定 Lesson 10 総合演習 Lesson 11 環境設定とデータ出力 Lesson 1 Illustratorの基礎知識 Lesson 2 はじめてのIllustrator Lesson 3 基本図形の描き方と変形操作 Lesson 4 パスの描画と編集 Lesson 5 オブジェクトの編集とレイヤーの基本 Lesson 6 色とグラデーションの設定 Lesson 7 変形・合成・特殊効果 Lesson 8 画像の配置と編集 Lesson 9 文字操作と段落設定 Lesson 10 総合演習 Lesson 11 環境設定とデータ出力

Webサイトを改善する次の一手を打ち続けるために 本書は、Webサイトのデザインを改善するために役立つ実際の改善事例やTipsなど、絶えずWebサイトを改善し続けるためのヒントを詰め込みました。 多くのウェブサイトを改善してきた著者たちが、実際のデザイン事例 Before&After、汎用的に使える改善Tipsやコンバージョンに貢献しやすい施策を解説しています。サイトの種類が異なっても再現できるようにポイントを解説するだけでなく、次の一手のアイデア集として長く活用していだけるように、汎用的な内容を数多く紹介しています。 最後の章ではプロが現場で行う改善のプロセスを解説し、次の一手を打ち続けていくために必要な考え方についてまとめてあります。 目次： Chapter1　デザイン事例集 Chapter2　改善Tips Chapter3　コンバージョンを上げるための改善を実行しよう Chapter4　コンバージョンを上げるためのサイト改善のプロセス はじめに 目次 本書の使い方 著者紹介 用語説明 Chapter1 デザイン事例集 1-1 掲載事例一覧 1-2 バニラエア 1-3 三井住友カード 1-4 UTグループ 1-5 マネックス証券 1-6 ロクシタンジャポン 1-7 トーセキ 1-8 車検の速太郎 足立店 1-9 ハルメクベンチャーズ 1-10 へノブファクトリー 1-11 シバ製靴 1-12 レザーハウス 1-13 御茶ノ水ソラシティカンファレンス Chapter2 改善Tips 2-1 改善Tips一覧 2-2 改善Tips Chapter3 コンバージョンを上げるための改善を実行しよう 3-1 初級編 〜まずは気になる箇所を変えて評価してみよう〜 3-2 中級編 〜ボトルネックになっているところから改善してみよう〜 3-3 上級編 〜確実に成果につなげるためのWebテストのススメ〜 3-4 チェックリスト 〜改善前に押さえておきたいWebサイト制作の基本〜 Chapter4 コンバージョンを上げるためのサイト改善のプロセス 4-1 コンバージョンを上げるために必要なこと 索引

Chapter01 【基礎】Webサイトの仕組みを学ぼう! Chapter02 【基礎】Webページの構造を決めるHTMLの基礎 Chapter03 【基礎】WebページをデザインするCSSLの基礎 Chapter04 【応用】表現の幅が広がるCSSの応用テクニック Chapter05 【応用】CSSでWebページをレスポンシブにしよう! Chapter06 【実践】Webサイトの共通部分を作成しよう! Chapter07 【実践】トップページを作成しよう! Chapter08 【実践】下層ページを作成しよう! Chapter09 【応用】動画を挿入しよう! Chapter10 【実践】Webサイトを公開しよう!

はじめて学ぶ人でも安心!オールカラーでコードを丁寧に解説。HTMLとCSSの基本を順番に学んで実践的なWebサイトを完成させる!勘違いしやすい箇所は講師がフォロー!ワークショップ感覚で読み進められる。 1 Webサイトを作成する準備をしよう 2 HTMLの基本を学ぼう 3 共通部分のHTMLを作成しよう 4 共通部分から個別のページを作成しよう 5 CSSの基本を学ぼう 6 CSSで共通部分をデザインしよう 7 コンテンツのデザインを整えよう 8 スマートフォンに対応しよう 9 Webサイトを公開しよう 10 機能を追加して集客しよう