一歩ずつ着実に進めていくから挫折しない！ Web制作のはじめの一歩として最適な1冊。

本書は1冊でHTML/CSS/Webデザインの基本を達成感を味わいながらやさしく学ぶことができ、読み終えれば現場ですぐに役立つ実践力が身に付きます。普段Web制作会社を経営しながら講師をしている著者が丁寧に解説。

1章～4章の基本編で「HTMLとCSSの基本」を学び、5章～6章の実践編で「実際にサイトを作成」します。自分が入力したコードがブラウザ上でどのように反映されるかということをこまめに確認しながら進めていくので、コーディングしてその場で確認、その場で修正、という現場の流れに即したプロセスが自然と身につきます。作成するサイトは2つで、5章でシンプルなPCサイト「シンプルかわいいポートフォリオサイト」を、6章でレスポンシブにも対応している「フラワーショップ」サイトを作成します。

そのほか、基本編では「HTML Living Standard、CSS3」などいま標準の仕様をベースに基礎を学び、実践編では「Flexboxレイアウト、CSSグリッドレイアウト、レスポンシブデザイン」など最新のトレンドを盛り込んでいます。

本書は「初心者だけどWebサイトを作りたい！」という人やWeb制作を仕事にしたい人、副業として始めたいという人におすすめです。自分のペースで楽しく学んでいきましょう。

HTMLとCSS、Webデザインの基本から実践までを楽しみながら学べる解説書！

Web制作を始めたいけれどまず何から学べばいいかわからないという方に、基本の「キ」から丁寧に解説します。HTMLやCSSそしてWebデザインの概念を理解したうえで、実際に手を動かしながらWebサイトを制作していきます。要素の少ない1ページのWebサイトを作るところから始め、徐々に難易度を上げてレスポンシブ対応や複数ページのあるWebサイトの作り方を学んでいきます。キャラクターの会話とわかりやすい図解でやさしく解説しているので、「Web制作って難しそう」「プログラミングは苦手」という方も楽しみながら学べます。

Web制作者必携の定番リファレンスがさらに進化！

本書は、HTMLの要素（タグ）とCSSのプロパティを解説した事典です。HTMLの要素やCSSのプロパティの意味、使い方がすぐに理解できます。

新規サイトの構築や既存のサイトの管理など、コードを解読したり修正したり、新しく記述したりするときに、気になるタグやプロパティをすぐに探すことができます。普段からWeb制作に携わっている人はもちろん、HTMLやCSSを勉強中の人まで幅広く役に立つ1冊です。

前書の「できるポケット Web制作必携 HTML&CSS全事典 改訂3版」から追加される項目は100個以上あり、最新のタグとプロパティが理解できます。さらに、目的別のインデックスを追加し、見やすさと引きやすさ、網羅性を兼ね備えた内容となっています。

●このような方におすすめ
・HTML&CSSを記述・修正する必要のある人
・Webデザイナーや、情報システム部などでWebサイトを内製で構築する担当者
・HTML&CSSの勉強をしている大学生や新入社員

HTML・CSSを使ってWebページのレイアウトを作る上で、Flexbox・Grid Layoutは重要な技術の1つです。これらの技術を使うことで様々なレイアウトを作れます。ですが、うまく使いこなせなかったり、中途半端な理解でなんとなく使い続けている方もいることでしょう。
そこで、本書ではFlexboxとGrid Layoutの体系的な基礎知識に加え、それらを活用したレイアウトの作成方法を学びます。FlexboxとGrid Layoutに関する理解を深めるだけでなく、実際にレイアウトを作り、使いこなせる状態を目指します。
【目次】
第1章　CSSレイアウト
第2章　Flexboxを理解する
第3章　Grid Layoutを理解する
第4章　さまざまなレイアウトを作る

【対応ブラウザで迷っていませんか？最新ブラウザ対応で気持ちよくコーディングしましょう！】

本書は、ウェブブラウザシェアの約95％を占める最新ブラウザ（IE11、Chrome、Safari、Firefox、Edge）向けのCSSを駆使することで、作りたいものが作れる、やりたいことができる＝気持ちよくウェブ開発のコーディングを行うためのノウハウ集です。

〈本書の対象読者〉
CSSとHTMLをある程度知っているデザイナー
IE6～8時代にコーディングしていたコーダー
楽な書き方をざっくり知りたいエンジニア

【目次】
第1章　対応ブラウザを決める
1.1　IE11以上対応という選択肢
1.2　ブラウザシェア
1.3　IE10以下非対応の恩恵
第2章　CSSの指定の基本
2.1　単位
2.2　セレクター
2.3　擬似クラス
2.4　擬似要素
第3章　気持ちよく書けるCSS
3.1　メディアクエリーでレスポンシブ化
3.2　フレックスボックスで横並び
3.3　画像を使わないデザイン
3.4　値の計算
3.5　色の指定
3.6　最初や最後の要素を指定
3.7　変形
3.8　状態の変化にアニメーションを加える
3.9　状態にアニメーションを加える
3.10　背景画像の大きさを調整
3.11　カウンター
3.12　ボーダーに画像を設定
3.13　:target :checked をトリガー代わりに
3.14　その他の便利なCSS
3.15　もう使ってもいいだろうというCSS

html と css のみで作成するボタンのデザインと、コードの詳細を紹介しています。
普段 css に触れることのないプログラマーや、html と css でサイトを作ることを学び始めた方でも、コードの内容からどのようにボタンが構成されているか理解でき、またそこから css のテクニックを学び取ってもらえることを願って書かれています。

はじめの章では、css でボタンを表示するのに必要なコードを、順を追って説明していきます。html と css の基本的な書き方に加え、ちょっとした小ネタや、豆知識なども紹介しています。html でボタンを作る足掛かりに、こちらの章を参照していただければと思います。

続いての章では、作成したボタンをさらに css で凝ったデザインにするテクニックとデザインのサンプルを紹介しています。枠線、角丸、アイコン付きのボタンなど、css のみでできる簡単なデザインのアレンジから、複数の css を組み合わせるテクニックとデザインのアイディアも紹介しています。

ここで紹介されているのは css で出来る表現のほんの一部ですが、わずかでもクリエイターの学びや気づきの手助けになれば幸いです。

本書は、Web コーダーの新人教育を行う中で「どうやったら自分のHTMLタグ選びの好みを伝授できるのか」を考える中で生まれた本です。

こんな人に向けて書きました
・Web サイト制作などでHTML を書くが、細かいタグ選びには迷う人
・人にHTML を教えることがあるが、細かい説明をするのが大変な人
・<ul> のu がunordered のu だと知って笑ったことがある人

これは書きませんでした
・Web 制作での使いどころがあまり思いつかなかったHTML タグの説明
・沢山ありすぎるフォーム関連のHTML タグの説明
・どんなCSS を使ったら素敵な見た目にできるかの説明