HTML5とCSS3を使った最新のコーティングテクニックを学びたい人にオススメの本 -「最新標準」HTML+CSSデザイン

HTMLとCSSの使い方は、ここ数年で大きく進化しています。
2016年1月にIEの古いバージョンのサポートが終了、ブラウザの世代交代も強制的に進み、主要ブラウザは最新のHTMLとCSSをフルにサポートした状況になっています。

HTML5とCSS3の機能をフルに活用して、多様化するWebページを実装する最新のスキルやテクニックが詳しくまとめられたオススメの本を紹介します。

「6ステップでマスターする」が一見、初心者用に見えてしまうかもしれませんが、初心者用ではありません。
HTMLとCSSをある程度理解し、スキルアップのためにコーディングのテクニックを磨きたいと考えている人に、実務レベルでの解説書です。

本書は来週発売で、一足先に版元様より献本をいただきました。
Amazonはご予約しておくと、発売日に届くと思います。

本書は6つのステップで、マルチデバイスに対応したWebサイトの各ページを制作します。
各ページのカスタマイズのバリエーションも豊富です。

実装は見え方とコードが対比しており、作りこみ方が段階的に詳しく分かります。

そんな本書の中身を紙面のキャプチャで少しだけご紹介。

ベースとなるのはマルチデバイス対応のFlexboxを使ったレイアウトで、複雑な段組みも簡単に実装できます。高解像度デバイス用にSVG画像やアイコンフォントを活用し、フォントサイズはremベース、vw/vhのビューポートのサイズを利用、カラーは変数を使って一元管理します。
HTML5.1, CSS3の標準規格に従ったセマンティックスな実装です。

これらの機能は主要なブラウザでいずれもHTML5/CSS3に十分なレベルで対応しており、問題ありません。

古いブラウザは情報入手に対応し、HTML5とCSS3の機能をフルに活用して実装します。古いブラウザで表示を近づけるテクニックも付録で解説されています。

本書は6章、6つのステップで学んでいきます。
1章の下準備編では、サイトを構成する各ページの構造と作成の手順を確認・検討します。

制作時に使うツールの使い方もマスターしておきたいですね。

ページ作成のベースとなるHTMLファイルとCSSファイルを用意して、準備完了です。

2章からはいよいよページの作成。
ヒーローイメージやフィーチャーコンテンツを実装します。

実装するコンテンツは2種類ですが、その中身は濃いです。
画像に重ねてテキストを配置し、スクリーンサイズに合わせてフォントサイズや字間を変化させてと、やるべきことは沢山あります。

ヒーローイメージはブラウザの幅と高さに合わせて表示します。テキストを中央配置にさせたり、最小限の高さを確保させたり、半透明の画像をグラデーションで重ねて視認性を向上させるなどのテクニックを学ぶことができます。

SVGやアイコンフォントも積極的に使っていきたいですね。

スクリーンサイズで変化するレイアウトは、どのように変化するかで実装方法が異なります。

一つのコンポーネントを実装したら、それをベースにさまざまなアレンジも可能です。

アレンジする時は、ベースのどこを利用し、何をくわえればいいのか、どのように実装を進めればよいのかが詳しく解説されています。

3章はヘッダとフッタ、4章はコンテンツページ、5章はカード型の一覧ページ。ロゴやナビゲーション、記事や沿革やマップなど、さまざまなコンポーネントを使って実装していきます。

6章ではここまで実装してきたページにアレンジを加えていきます。
例えばヘッダだと、ヒーローイメージと一体化させたり、ナビゲーションを上部に固定表示させたり、半透明をオーバーレイさせたりと、他のプロジェクトにも利用できるテクニックが満載です。

また、付録も非常に充実しています。

CSSのセレクタも非常に分かりやすくまとめられており、ボックスモデルの実装例、Flexboxを使ったレイアウト、ボックス内のコンテンツのデザインなど、リファレンスとしてもアイデア帳としても使えます。

前述したように、HTML5/CSS3の対応が不十分なブラウザへの対応方法もコードベースで解説されています。

「最新標準」HTML+CSSデザインの目次

1. 下準備

   1段組みをベースとしたページを最新のHTML/CSSで作成する

   構築するページとサイト

   Webページのベースを用意する

2. トップページの作成 - コンテンツ編

   ヒーローイメージ

   概要（アイコン+テキスト）

   概要（画像+テキスト）

   概要（画像+テキスト: 逆配置）

3. トップページの作成 - ナビゲーション編

   サイト情報

   フッターメニュー

   コピーライト

   SNSメニュー

   ヘッダーのサイト名

   ナビゲーションメニュー

   トグルボタン

4. コンテンツページの作成

   コンテンツページ

   アバウトページ

   お問い合わせページ

5. 記事一覧ページの作成

   カード型（画像+テキストを上下に配置）

   カード型（画像+テキストを左右に配置）

   サムネイル型（画像+テキストを重ねて配置）

6. アレンジ

   ヘッダーの色をアレンジする

   ヘッダーとヒーローイメージを一体化したデザインにする

   ヘッダーを画面上部に固定する

   関連記事メニューを追加する

   メタデータを記述する

   ページの基本色をアレンジする

付録

• HTMLリファレンス
• CSSリファレンス
• ボックスモデル
• 最適化
• 主要デバイスの画面サイズ
• 古いブラウザ用の設定

本書はHTMLとCSSの最新テクニックが身につくだけでなく、その実装にする理由、その先を見据えた対応も説明されており、実装の考え方も身につけることができる一冊です。

献本の御礼

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

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

• お問い合わせ｜コリス