フレキシブルボックスレイアウトを使ったレスポンシブ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の基本文法 　　セレクタ 　　メディアクエリ ボックスモデル 　　ボックスの基本設定 　　ボックスの種類 　　フレキシブルボックスレイアウト 　　ポジションレイアウト 　　ボックス内のコンテンツのデザイン 　　単位 　　色の値 　　変数 最適化 主要デバイスの画面サイズ 古いブラウザ用の設定

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

「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関連の規格と技術

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