これからのWeb制作に間違いなく役立つ! IEをサポート外にしたレスポンシブWebデザインで重要なCSS、実装方法を学べる解説書
Post on:2021年9月17日
HTML Live Standard対応、FlexboxやCSS GridやCSS関数などを活用して、レスポンシブWebデザインを実装するテクニックを学べる解説書を紹介します。
Webページでよく使用されるさまざまなレイアウトやUIコンポーネントの実装、バリエーションやカスタマイズなども詳しく解説されており、これからのWeb制作に間違いなく役立ちます。
![作って学ぶ HTML&CSSモダンコーディング](http://coliss.com/wp-content/uploads-202103/978483997711501@2x.png)
IEのサポート終了のお知らせ(Windows Blog)で、ようやくIEから解放されることに喜んでいる人も多いと思います。これによりIEへの対応をしなくてすむだけでなく、新しいHTMLとCSSも自由に使用できるようになります。
著者は、分かりやすい解説で評判のエビスコム様。中級者向けの実践的なテクニックが満載ですが、初心者でもコードとそれがどのような仕組みで実装されているのかていねいに解説されているので、大丈夫だと思います。
本書は昨日が発売日、Kindle版も同時発売です!
基礎知識からしっかり身につけたい人には、同じ著者の「HTML5&CSS3デザイン 現場の新標準ガイド」がお勧めです。当ブログでの紹介記事をご覧ください。
版元様より本書の画像を頂いたので、掲載します。
![本書のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711505-02.png)
![本書のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711505-02.png)
![本書のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711505-03.png)
![本書のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711505-03.png)
![本書のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711505-04.png)
![本書のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711505-04.png)
ではいつものように、版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-01.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-01.png)
本書では、レスポンシブ対応のWebページをモバイルファーストで実装する工程をステップバイステップで解説していきます。トップページやコンテンツページの実装をデザインもらった段階からどのように作業に入るかワークフローが分かります。
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-02.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-02.png)
本書のHTMLとCSSは、IEはサポート外です。Chrome, Edge, Safari, Firefox, Android, iOS Safariなど、主要ブラウザに対応した実装が身につきます。
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-03.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-03.png)
IEをサポート外にしたこれからのレスポンシブWebデザインで重要なCSSについて学びます。
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-04.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-04.png)
中級者向けの本書ですが、いきなり実装ではなく、準備編もあります。HTMLとCSSのファイルを用意し、Webフォントを準備したり、アイコンを準備したり、実装の確認・検証にデベロッパーツールを使用します。ここらへんは必要最小限の解説です。
- 各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetのまとめ -Chrome, Safari, Firefox, Edge
- 2021年、モダンブラウザに適したCSSリセットのまとめ
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-05.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-05.png)
準備が完了したら、さっそく実装編です。
まずは、デザインと仕様を確認し、要素の構成やレイアウト、レスポンシブでどのように変化するのか、作戦を練ります。例えば、右ページにある「両端に配置するレイアウト」はヘッダでよくある仕様です。仕様によってFlexboxとCSS Gridのどちらで実装すればよいのか詳しく解説されています。
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-06.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-06.png)
通常の解説書だと、1パターンの実装方法が解説されているものが多いと思いますが、本書は違います。ベースとなる実装方法はもちろんありますが、デザインの展開例やカスタマイズ方法なども非常に豊富です。
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-08.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-08.png)
デザインと仕様の確認が終わったら、コードの実装です。モバイルファーストの実装コードも分かりやすく、ていねいに解説されています。
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-09.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-09.png)
比較的新しいCSSもたくさん登場します。
例えば、ヘッダの横幅を実装するためにmin()関数を使用します。min()関数は比較関数の1つで、カンマ区切りの値の中から最小値を返します。
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-10.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-10.png)
ヘッダでは、ロゴとアイコンを両端に配置するレイアウトがよくあります。仕様によって異なる実装をFlexboxとCSS Gridで解説されています。
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-11.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-11.png)
横幅と左右の余白をどう実装すれば最適なのか、迷うことがありませんか? widthで調整するのがよい場合、paddingで調整するのがよい場合、CSS Gridで調整するのがよい場合があります。
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-13.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-13.png)
ヘッダだけでなく、ヒーロー、画像とテキスト、記事一覧、フッタ、記事、フッタ、ナビゲーションごとに実装が解説されています。
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-15.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-15.png)
中身をもう少し見てましょう。
例えば、SNSのアイコンを揃えます。
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-16.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-16.png)
リスト要素で実装したアイコンを揃えて配置するだけでなく、自由に配置を変更したり、配置をエリアでコントロールしたり、アイコンではなくテキストの場合、テキストの折り返し有り無しなど、さまざまな実装方法が解説されているので、デザインのカスタマイズにも対応できます。
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-17.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-17.png)
IE時代には使用できなかったCSSも詳しく解説されています。
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-19.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-19.png)
ナビゲーションの事例も非常に豊富です。さまざまなナビゲーションの実装方法が、本書でよく分かります。
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-20.png)
![紙面のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711503-20.png)
もちろん、それらのナビゲーションがデスクトップでどのように表示されるのかも豊富です。
![本書のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711505-05.png)
![本書のキャプチャ](http://coliss.com/wp-content/uploads-202103/978483997711505-05.png)
本書は、サポートも充実しています。
本書で実装したページの完成データ、素材データ、Adobe XDファイル、さらにHTMLとCSSの簡易リファレンスのPDFがサポートサイト、あるいはGitHubからダウンロードできます。
作って学ぶ HTML&CSSモダンコーディングの目次
![作って学ぶ HTML&CSSモダンコーディングの目次](http://coliss.com/wp-content/uploads-202103/978483997711504-01.png)
![作って学ぶ HTML&CSSモダンコーディングの目次](http://coliss.com/wp-content/uploads-202103/978483997711504-01.png)
作って学ぶ HTML&CSSモダンコーディングの目次
![作って学ぶ HTML&CSSモダンコーディングの目次](http://coliss.com/wp-content/uploads-202103/978483997711504-02.png)
![作って学ぶ HTML&CSSモダンコーディングの目次](http://coliss.com/wp-content/uploads-202103/978483997711504-02.png)
作って学ぶ HTML&CSSモダンコーディングの目次
![作って学ぶ HTML&CSSモダンコーディングの目次](http://coliss.com/wp-content/uploads-202103/978483997711504-03.png)
![作って学ぶ HTML&CSSモダンコーディングの目次](http://coliss.com/wp-content/uploads-202103/978483997711504-03.png)
作って学ぶ HTML&CSSモダンコーディングの目次
コーダーの人はもちろん、デザイナーやディレクターにもこんなことが実装できるんだとお勧めしたい一冊です。Webページでよく見かけるさまざまなコンポーネントの実装、バリエーションやカスタマイズなども詳しく解説されており、これからのWeb制作に間違いなく役立ちます。
献本の御礼
最後に、献本いただいたマイナビ出版の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors