ライトノベル、マンガなど電子書籍を読むならBOOK☆WALKER

※この商品はタブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。

「難しい」と敬遠していたCSSグリッドがきちんと身につく。

CSSグリッドを用いてWebサイトをデザインするための実践的な知識をまとめました。
より深く理解し身に着けるために、HTML & CSSの歴史から振り返り、CSSグリッドの立ち位置や基本を見直した上で、
実践的なパーツやUIを構築し、力がつく一冊になっています。
「CSSグリッドってなんだか難しい」と距離を置いていた方も、きっと使える知識が身につきます。

Chapter 1　Web標準のレイアウトシステム
Chapter 2　CSSグリッドの誕生とその特徴
Chapter 3　基本のグリッド
Chapter 4　CSSグリッドのロジック
Chapter 5　グリッドレイアウト実践

エビスコム
ebisu.com/

Webと出版を中心にフロントエンド開発・制作・デザインを行っています。

HTML/CSS、WordPress、 GatsbyJS、 Next.js、 Astro、 Docusaurus、Figma、 etc.

主な編著書： 『作って学ぶ WordPress ブロックテーマ』マイナビ出版刊
『作って学ぶ Next.js/React Webサイト構築』マイナビ出版刊
『作って学ぶ HTML＆CSSモダンコーディング』同上
『HTML5＆CSS3デザイン　現場の新標準ガイド【第２版】』同上
『Webサイト高速化のための 静的サイトジェネレーター活用入門』同上
『WordPressノート クラシックテーマにおけるtheme.jsonの影響と対策 2023』エビスコム電子書籍出版部刊
『Astro v2とTinaCMSでシンプルに作るブログサイト』同上
『HTML&CSS コーディング・プラクティスブック 1～8』同上
ほか多数

※この商品は固定レイアウト型の電子書籍です。
※この商品はタブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。
※お使いの端末で無料サンプルをお試しいただいた上でのご購入をお願いいたします。

※本書内容はカラーで制作されているため、カラー表示可能な端末での閲覧を推奨いたします

※この商品はタブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。

CSSグリッドをベースにすると、Webページ制作がとてもシンプルになる一方で、制作にはこれまでと異なる知識体系が求められます。
そこで登場したのが、本書、CSSグリッドをベースとしてWebベージを制作する、まったく新しいレッスンブックです。

本書を読めば、HTML&CSS初心者でも、モバイルファーストで本格的なレスポンシブ対応のWebページを制作できるようになります。

まさに、いまどきのHTML&CSSを学習するための新しい時代のレッスンブックと言えるでしょう。

Dreamweaver CC 2015では、レスポンシブWebデザインを簡単に実現できるように、CSSフレームワークとして定評のある「Bootstrap」が組み込まれており、複数の画面サイズに対応するための「ビジュアルメディアクエリーバー」を使うことで視覚的にWebサイトの構築が行えます。

本書では、これらの新機能を使いながら、「ビジネス系」Webサイトを作成していきます。作成手順は、レッスン形式のステップバイステップで解説し、Dreamweaverの操作だけでなく、効率よくWebサイト制作を進めるための考え方も身につくように構成しました。

●基礎
記事や概要など、シンプルな基本パーツを事前に準備することで、効率よくWebサイト制作を進める
●実践
Bootstrapとビジュアルメディアクエリーバーで、素早く簡単にレスポンシブWebデザインを実現する
●応用
Dreamweaverの強力な機能である「テンプレート」を使うことで、複数のWebページを一元管理する

Webページの制作に特別なソフトは必要ありません。WindowsやMacintoshに付属のソフトですぐに作り始めることができます。

本書で作成するWebサイトは、さまざまな場面で使えるように配慮しており、スマートフォンやタブレットにも対応しています。

＜本書の特徴＞
●Webサイトをステップ・バイ・ステップで作りながら、ノウハウを身につける
●HTML5とCSS3（スタイルシート）の両方を使った最新の制作手法をマスター
●応用テクニックやその仕組み、さらに踏み込んだ各種の情報もTIPSとして網羅

PCだけでなくスマートフォンやタブレットなど多様なデバイスに対応することが、Webデザイン、Web制作の標準になりつつあります。そのためには、PCサイトを作ってから、スマートフォンなどに対応するのではなく、最初からどのデバイスにも対応できるデザインやレイアウトを考えることが重要です。

本書ではそういったスキルがレッスン形式のステップバイステップで身につくように構成しました。

●基礎
レイアウトの根本となるボックスの並べ方をマスターし、Webページにおける段組みを自在にコントロールする手法を身につけます。
●実践
「ブログ・ニュース系サイト」と「ビジネス系サイト」の実例サイトを、1からパーツを組み立てながら作成していきます。
●応用
マルチデバイスに対応し、使い勝手や見栄えを向上させる各種のアレンジ・テクニックや実践で役立つTIPSを学びます。

WordPressの仕組みと動作を理解して、テンプレートを核としたWordPressサイトの最新の構築技法をステップバイステップ形式で学べる。

●ループの仕組みを正しく理解することで、WordPressの処理の流れがわかる
●条件分岐を減らし、見通しのよいテンプレートを作成する手法を習得
●カスタム投稿タイプなど、最適なコンテンツの管理方法を把握する

こんな読者の方に最適です！

・WordPressを使っているが、しっくりこない、何かモヤモヤしている
・WordPressの仕組みを知って、もう1ランク、ステップアップしたい
・WordPressの最新の流儀やテンプレート制作のテクニックを知りたい

本書では、「レスポンシブWebデザイン」に対応したWebサイトをWordPressで1から構築していきます。そのためには、PCサイトを作ってから、スマートフォンなどに対応するのではなく、最初からどのデバイスにも対応できるデザインやレイアウトを考えることが重要です。

本書ではそういったスキルがレッスン形式のステップバイステップで身につくように構成しました。

●基礎
「レスポンシブWebデザイン」でレイアウトを操るためのボックスレイアウト手法を身につけます。
●実践
「ブログ・ニュース系サイト」をステップを踏みながら構築し、テンプレート、ウィジェット、プラグインの使い方を理解します。
●応用
「スマートフォンなど多様なデバイス」に柔軟に対応できるWordPressのデザイン、設計テクニックを学びます。

AMP（Accelerated Mobile Pages）は、Googleが中心となって開発を進めているフレームワークです。AMPを利用することで、これまでのような手間のかかる設定をしなくても、Webページの高速表示を実現できます。

本書では、WordPressを使って構築したサイトで、AMP対応ページを作成・アレンジしていく方法をステップ・バイ・ステップで解説していきます。

●基礎
WordPressの開発元が提供しているプラグインで、AMPページはすぐに作成できます。
●実践
AMPページをカスタマイズして、ビデオ、SNS投稿などの各種メディアを表示します。
●応用
ナビゲーションメニューや、広告の表示、アクセス解析の設定などのアレンジを行います。

※この商品はタブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。

本書は、CSSのフレキシブルボックス（Flexbox）を利用してWebページ制作を行うレッスンブックです。

長い間、Webページ制作ではCSSのフロート（Float）が利用され、「ボックスの相互の位置関係でデザインやレイアウトを形にしていく」というノウハウが蓄積されてきました。

フレキシブルボックスはこうしたノウハウをブラウザの互換性や制作手順、考え方も含めて引き継いでいます。
また、フロートで不便だった部分には手が加えられ、いよいよ完成形にたどり着いたと言えるでしょう。

はじめてWebページを作る方にも、今どきのページ制作の基礎を学びなおしたいといった方にも、本書を活用していただければ幸いです。

－「はじめに」より