これからのWeb制作に間違いなく役立つ！ IEをサポート外にしたレスポンシブWebデザインで重要なCSS、実装方法を学べる解説書

HTML Live Standard対応、FlexboxやCSS GridやCSS関数などを活用して、レスポンシブWebデザインを実装するテクニックを学べる解説書を紹介します。

Webページでよく使用されるさまざまなレイアウトやUIコンポーネントの実装、バリエーションやカスタマイズなども詳しく解説されており、これからのWeb制作に間違いなく役立ちます。

IEのサポート終了のお知らせ（Windows Blog）で、ようやくIEから解放されることに喜んでいる人も多いと思います。これによりIEへの対応をしなくてすむだけでなく、新しいHTMLとCSSも自由に使用できるようになります。

著者は、分かりやすい解説で評判のエビスコム様。中級者向けの実践的なテクニックが満載ですが、初心者でもコードとそれがどのような仕組みで実装されているのかていねいに解説されているので、大丈夫だと思います。

本書は昨日が発売日、Kindle版も同時発売です！

• 作って学ぶ　HTML&CSSモダンコーディング Kindle版

基礎知識からしっかり身につけたい人には、同じ著者の「HTML5&CSS3デザイン 現場の新標準ガイド」がお勧めです。当ブログでの紹介記事をご覧ください。

• Web制作者が持っておいて間違いない一冊！HTMLとCSSの必要な知識と最新テクニックをまとめて吸収できる良書

版元様より本書の画像を頂いたので、掲載します。

ではいつものように、版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書では、レスポンシブ対応のWebページをモバイルファーストで実装する工程をステップバイステップで解説していきます。トップページやコンテンツページの実装をデザインもらった段階からどのように作業に入るかワークフローが分かります。

本書のHTMLとCSSは、IEはサポート外です。Chrome, Edge, Safari, Firefox, Android, iOS Safariなど、主要ブラウザに対応した実装が身につきます。

IEをサポート外にしたこれからのレスポンシブWebデザインで重要なCSSについて学びます。

中級者向けの本書ですが、いきなり実装ではなく、準備編もあります。HTMLとCSSのファイルを用意し、Webフォントを準備したり、アイコンを準備したり、実装の確認・検証にデベロッパーツールを使用します。ここらへんは必要最小限の解説です。

• 各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetのまとめ -Chrome, Safari, Firefox, Edge
• 2021年、モダンブラウザに適したCSSリセットのまとめ

準備が完了したら、さっそく実装編です。
まずは、デザインと仕様を確認し、要素の構成やレイアウト、レスポンシブでどのように変化するのか、作戦を練ります。例えば、右ページにある「両端に配置するレイアウト」はヘッダでよくある仕様です。仕様によってFlexboxとCSS Gridのどちらで実装すればよいのか詳しく解説されています。

通常の解説書だと、1パターンの実装方法が解説されているものが多いと思いますが、本書は違います。ベースとなる実装方法はもちろんありますが、デザインの展開例やカスタマイズ方法なども非常に豊富です。

デザインと仕様の確認が終わったら、コードの実装です。モバイルファーストの実装コードも分かりやすく、ていねいに解説されています。

比較的新しいCSSもたくさん登場します。
例えば、ヘッダの横幅を実装するためにmin()関数を使用します。min()関数は比較関数の1つで、カンマ区切りの値の中から最小値を返します。

• CSSの比較関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説

ヘッダでは、ロゴとアイコンを両端に配置するレイアウトがよくあります。仕様によって異なる実装をFlexboxとCSS Gridで解説されています。

横幅と左右の余白をどう実装すれば最適なのか、迷うことがありませんか？ widthで調整するのがよい場合、paddingで調整するのがよい場合、CSS Gridで調整するのがよい場合があります。

ヘッダだけでなく、ヒーロー、画像とテキスト、記事一覧、フッタ、記事、フッタ、ナビゲーションごとに実装が解説されています。

中身をもう少し見てましょう。
例えば、SNSのアイコンを揃えます。

リスト要素で実装したアイコンを揃えて配置するだけでなく、自由に配置を変更したり、配置をエリアでコントロールしたり、アイコンではなくテキストの場合、テキストの折り返し有り無しなど、さまざまな実装方法が解説されているので、デザインのカスタマイズにも対応できます。

IE時代には使用できなかったCSSも詳しく解説されています。

• CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！

ナビゲーションの事例も非常に豊富です。さまざまなナビゲーションの実装方法が、本書でよく分かります。

もちろん、それらのナビゲーションがデスクトップでどのように表示されるのかも豊富です。

本書は、サポートも充実しています。
本書で実装したページの完成データ、素材データ、Adobe XDファイル、さらにHTMLとCSSの簡易リファレンスのPDFがサポートサイト、あるいはGitHubからダウンロードできます。

作って学ぶ　HTML&CSSモダンコーディングの目次

作って学ぶ　HTML&CSSモダンコーディングの目次

作って学ぶ　HTML&CSSモダンコーディングの目次

作って学ぶ　HTML&CSSモダンコーディングの目次

コーダーの人はもちろん、デザイナーやディレクターにもこんなことが実装できるんだとお勧めしたい一冊です。Webページでよく見かけるさまざまなコンポーネントの実装、バリエーションやカスタマイズなども詳しく解説されており、これからのWeb制作に間違いなく役立ちます。

献本の御礼

最後に、献本いただいたマイナビ出版の担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス