読むとワクワクする!最近のWebサイトで使われているHTMLとCSSのさまざまなテクニックが詳しく解説されたオススメの本

ページ作成の基本となるHTMLとCSS、レスポンシブ対応の2カラムや3カラムレイアウト、ナビゲーションやボタンなどのUIエレメント、CSSアニメーションやエフェクトなど、最近のWebサイトで使われているHTMLとCSSのテクニックがまとめられたオススメの本を紹介します。

本のキャプチャ

中級者向けの内容になっていますが、初心者にも分かりやすく、実例が豊富で詳しく解説されています。
コーダーの人だけでなく、デザイナーの人も「こんなことができるんだ!」と、ワクワクするような一冊です。

書籍の表紙

HTML5&CSS3デザインレシピ集
[Amazonでみる]
[楽天でみる]

著:
狩野 祐東
出版社:
技術評論社
発売日:
2017/2/22

Kindle版が、2/25にリリースされました。お値段少しお得です。

本書に収録されているテクニックは、全部で300種類!
640ページで辞書のように分厚いですが、簡単に見開きにできる製本になっています。

本書のキャプチャ

分厚いのに、開きやすい!

紙面のキャプチャで、中身を少しだけご紹介。

誌面のキャプチャ

本書は全15章で構成されており、1, 2章の基礎知識は最低限、3-15章ではWeb制作にすぐに使いたくなるような実践的なテクニックが満載となっています。

誌面のキャプチャ

目次から逆引きで、それを実現するテクニックがコード付きで詳しく解説されています。
分厚いですが、簡単に見開き状態になります。

誌面のキャプチャ

本書の一番の特長は、テクニックの細分化です。
例えば、背景画像をブラウザいっぱいに表示したい場合にいろいろなケースがあります。

誌面のキャプチャ

どんなサイズでも画像の中心部を真ん中に表示したい、極端に横長・縦長のサイズにも表示したい、どんなサイズでも対応したいけど画像を収縮したくないなど、同系統のさまざまなテクニックが詳しく説明されています。

誌面のキャプチャ

レイアウト時によく使うのは、floatですか? それともflexboxですか? 本書では同じ目的でも、floatとflexboxの両方に対応しており、それぞれの利点や欠点、そして注意点なども詳しく書かれています。

誌面のキャプチャ

サポートブラウザで考えると、IE10対応だとfloat、IE11+だとflexboxになります。

誌面のキャプチャ

レイアウトのバリエーションも非常に豊富です。1カラム、2カラム、3カラム、幅の可変や固定、ナビゲーションを上部に固定表示など、最近のWebサイトでよく見かけるものばかりです。

誌面のキャプチャ

ページの下部にパネルを表示したり、2カラムのサイドバーが固定表示されていたり、縦長ページで背景固定でコンテンツがカーテンのように上がったり、シンプルなコードで実装されています。

誌面のキャプチャ

HTMLとCSSの基礎知識は最低限ですが、実践的な知識はていねいに詳しく解説されています。

誌面のキャプチャ

CSSアニメーションやエフェクトなども、安っぽい感じではなく、現代風の洗練されたかっこいいアニメーションをしっかり学べます。

HTML5&CSS3デザインレシピ集の目次

全300種類の目次です。

  1. HTML/CSSの基礎
    HTMLの基礎知識
    Webサイトを構成するファイル
    CSSの基礎知識
    ボックスモデルを利用したCSSの適用
    CSSが適用される順序
    開発ツール
  2. ページの基本となるHTML
    HTMLの基本マークアップ
    DOCTYPE宣言を書き換えたい
    ページの主要な言語を設定したい
    ページの文字コードセットを設定したい
    ページのタイトルを設定したい
    ページの概要を記述したい
    ページのキーワードを設定したい
    CSSファイルを読み込みたい
    CSSファイルの文字コードセットを指定したい
    CSSをHTMLに直接書きたい
    CSSをタグに直接書きたい
    JavaScriptファイルを読み込みたい
    JavaScriptをHTMLに直接書きたい
    JavaScriptが動作しないときのコンテンツを記述したい
    HTMLにコメントを残したい
    CSSにコメントを残したい
  3. テキストの整形とデザインテクニック
    段落をマークアップしたい
    見出しを表示したい
    段落内で改行したい
    テキストの一部を強調したい
    テキストの一部を太字にしたい
    プログラムのソースコードを表示したい
    連絡先を表示したい
    上付き文字や下付き文字を表示したい
    まとまった量のテキストを引用して表示したい
    短いテキストを文中で引用して表示したい
    日付や時刻を表示したい
    テキストの一部にマーカーをつけたい
    読みがなのルビを振りたい
    略語であることを表現したい
    テキストの一部を訂正したことを示したい
    テキストを新たに挿入したことを示したい
    短いソースコードを表示したい
    ツールチップを表示したい
    コピーライトを表示したい
    HTMLで使用できない記号を表示したい
    テキスト色を変更したい(16進数)
    テキスト色を変更したい(RGB)
    半透明なテキスト色を指定したい(RGBA)
    要素ごとにフォントサイズを指定したい
    ページ全体のフォントサイズを相対的に指定したい
    行間を広くしたい・狭くしたい
    リード文を太字にしたい
    見出しのテキストを通常の太さにしたい
    イタリックで表示される要素を通常のテキストに戻したい
    テキストの行揃えを変更したい
    文字と文字の間隔を広くしたい・狭くしたい
    テキストに字消し線を引きたい
    好きな色のマーカーをつけたい
    段落の前後のスペースをなくしたい
    段落ごとに字下げ(インデント)したい
    1文字目だけ大きくしたい
    段落の1行目だけ見た目を変えたい
    引用の前後にテキストを挿入したい
    テキストの前後に記号を挿入したい
    引用符を自由に指定したい
  4. リストのデザインテクニック
    箇条書きを表示したい
    番号付きの箇条書きを表示したい
    箇条書きを1以外の数からスタートさせたい
    「キーワード」と「説明」をセットで表示したい
    「キーワード」と「説明」のレイアウトを変えたい
    箇条書きのマークを変更したい
    箇条書きのナンバリングを変更したい
    箇条書きのマークを画像にしたい 1
    箇条書きのマークを画像にしたい 2
    箇条書きのマークでランキングを表現したい
  5. リンクと画像のテクニック
    サイト内のほかのページにリンクしたい
    別のサイトへリンクしたい
    リンク先を別タブで開くようにしたい
    ページ内リンクを設定したい
    ページ内リンクで移動した先の見た目を変化させたい
    メールアドレスをリンクにしたい
    電話番号をリンクにしたい
    PDFファイルをダウンロードさせたい
    リンクテキストのスタイルを指定したい
    マウスがホバーしたときにテキストを半透明にしたい
    リンクの下線を点線にしたい
    マウスがホバーしたときに背景色をつけたい
    マウスがホバーしたときに枠線をつけたい
    スマートフォンのハイライト色を変更したい
    画像を表示したい
    base64のデータで画像を表示したい
    SVG形式の画像ファイルを表示したい
    SVGのデータを直接埋め込みたい
    画像にリンクをつけたい
    画像を半透明にしたい
  6. ページ全体に適用するデザインのテクニック
    ウィンドウ外周のマージンをなくしたい
    ページ全体の背景色を設定したい
    ページ全体のフォントを設定したい
    ページ全体に背景画像を敷きつめたい
    ページ全体に適用した背景画像の位置を固定したい
    ページの上から下にグラデーションをかけたい
    リセットCSSを適用したい
    ノーマライズCSSを適用したい
    サニタイズCSSを適用したい
  7. ボックスの整形とデザインテクニック
    基本のボックスを作成したい
    「記事」「セクション」のボックスを作成したい
    そのページの中心的なコンテンツが含まれるボックスを作成したい
    ボックス全体をリンクにしたい
    図とキャプションを表示したい
    ページの一部分にほかのHTMLを表示したい 1
    ページの一部分にほかのHTMLを表示したい 2
    ボックスにボーダーをつけたい
    ボーダーとコンテンツの間にスペースを作りたい
    ボックスとボックスの距離を離したい
    見出しに下線をつけたい
    枠線で見出しをデザインしたい
    ボックスの幅と高さを指定したい
    ボックスの高さを固定してスクロールバーを表示させたい
    ボックスの高さを固定してコンテンツを非表示にしたい
    1行で収まらないテキストを省略したい
    アイコンとテキストの位置を揃えたい
    ボックスと画像の下に空くスペースをなくしたい
    ボックスの背景色を指定したい
    ボックスの背景に画像を適用したい
    ボックスの背景に線状グラデーションをかけたい
    ボックスの背景に放射状グラデーションをかけたい
    背景画像を横方向にだけ繰り返したい
    背景画像を縦方向にだけ繰り返したい
    背景画像が繰り返さないようにしたい
    背景画像をボックスの真ん中に表示したい
    背景画像の表示位置を数値で指定したい
    背景画像のサイズをボックスに合わせて変化させたい 1
    背景画像のサイズをボックスに合わせて変化させたい 2
    複数の背景画像を表示させたい
    ボーダーを画像にしたい
    ボックスを角丸四角形にしたい
    ボックス全体を半透明にしたい
    ボックスにドロップシャドウをつけたい
    ボックスの内側にシャドウをつけたい
  8. テーブルのデザインテクニック
    テーブルの基本マークアップ
    テーブルに標準的な罫線をつけたい
    テーブルの見出しセルを作成したい
    セルを横方向に結合したい
    セルを縦方向に結合したい
    テーブル行をヘッダー、ボディ、フッターに分けたい
    テーブル上部にキャプションをつけたい
    テーブル下部にキャプションをつけたい
    セル内のテキストの行揃えを変更したい
    セル内のコンテンツと罫線の間にスペースを作りたい
    テーブルの各行に下線を引きたい
    セルのサイズを固定したい
    テーブル全体の幅を指定のサイズで固定したい
    セルの幅を均等にしたい
    テーブル全体の背景を設定したい
    見出し行にだけ背景を設定したい
    テーブルの背景色を奇数行と偶数行で塗りわけたい
    マウスが重なった行の背景色を変更したい
    テキストが折り返さないセルを指定したい
  9. フォームのデザインテクニック
    フォームの基本マークアップ
    テキストフィールドを表示したい
    フォーム部品にラベルをつけたい 1
    フォーム部品にラベルをつけたい 2
    メールアドレス入力用テキストフィールドを表示したい
    電話番号入力用テキストフィールドを表示したい
    パスワード入力のテキストフィールドを表示したい
    テキストフィールドに入力のヒントを表示したい
    最初のフォーム部品を自動で選択したい
    必須入力項目にしたい
    コピーはできるけれども入力はできない特殊なテキストフィールドを作りたい
    ファイルをアップロードできるようにしたい
    ラジオボタンを表示したい
    チェックボックスを表示したい
    プルダウンメニューを表示したい
    複数の項目を選択できるリストを表示したい
    プルダウンメニューの項目をグループ化して見やすくしたい
    テキストエリアを表示したい
    非表示データを埋め込みたい
    フォームの一部をグループ化したい
    送信ボタンを表示したい
    送信ボタンを画像にしたい
    汎用的なボタンを作成したい
    テキストフィールド・テキストエリアのスタイルを調整したい
    テキストフィールド・テキストエリアの余白を調整したい
    選択されたらテキストフィールドの色を変えたい
    入力チェックで引っかかったテキストフィールドのスタイルを変更したい
    送信ボタンの見た目を変更したい
    ラベルとテキストフィールドを横に並べて整列させたい
  10. メタデータと外部サイトとの連携テクニック
    ファビコンを設定したい
    印刷用のCSSを読み込みたい
    Font Awesomeを使いたい
    Webフォント「Google Fonts」を使用したい
    ページが検索されないようにしたい
    アクセスキーを設定したい
    タブキーの選択順序を設定したい
    5秒後に別のページに移動したい
  11. パーツ作成のテクニック
    タイトルとサブタイトルを表示したい
    キーボードの字をキーボードらしく見せたい
    リンク先が別ウィンドウで表示される場合にアイコンを表示したい
    PDFなど特定のファイルへのリンクだけアイコンや囲みを表示したい
    テキストをカプセル型に囲みたい
    テキストに太いペンで引いたような下線をつけたい
    タブのスタイルを変更したい
    パンくずリストを作成したい
    記事に付属するキーワードやタグを表示をしたい
    アイコンとテキストが上下に並ぶボタンを作りたい
    画像にテキストを回り込ませたい
    図にテキストを回り込ませたい
    フロートを解除したい パターン1(clear)
    ボックスを横に並べたい(float版)
    フロートを解除したい パターン2(overflow)
    フロートを解除したい パターン3(clearfix)
    ボックスの上部だけ角を丸くしたボタンを作りたい
    引用ブロックに装飾された「❝」「❞」を表示したい
    縦に並んだナビゲーションを作りたい
    縦に並んだナビゲーションの各項目に矢印のマークを表示したい
    見出しがついたボックス(パネル)を作成したい
    タブボタンを作成したい
    ページネーションを作成したい
    サムネイル画像とテキストを横に並べたい
    写真に枠線をつけたい
    正方形の画像を円形に切り抜きたい
    画像の上に別の画像を重ねて表示したい
    画像の上にテキストを重ねたい
    バッジを重ねて表示したい
    実際のサイズとは異なる大きさで画像を表示したい
    ウィンドウ幅いっぱいに背景画像を表示したい 1
    ウィンドウ幅いっぱいに背景画像を表示したい 2
    ウィンドウ幅に合わせて伸縮するキービジュアルを作成したい
    カレンダーを表示したい
    検索フィールドの中に虫眼鏡アイコンを表示させたい
    テキストフィールドのすぐ横に送信ボタンを配置したい
    プルダウンメニューの見た目を変えたい
    ローディングサインを表示したい
  12. ナビゲーションのデザインテクニック
    一般的なナビゲーションのマークアップ(HTML5版)
    一般的なナビゲーションのマークアップ(XHTML版)
    スマートフォン向けのグローバールナビゲーションを作成したい
    パソコン向けのグローバルナビゲーションを作成したい(float版)
    いま閲覧しているページのナビゲーションリンクをハイライトさせたい
    画像を使ったナビゲーションを作成したい(float版)
    パソコン向けのグローバルナビゲーションを作成したい(flexbox版)
    ナビゲーションの各項目を右揃えにしたい(flexbox版)
    ナビゲーションの各項目を中央揃えにしたい(flexbox版)
    ナビゲーションの各項目を均等に配置したい1(flexbox版)
    ナビゲーションの各項目の間隔を均等にしたい2(flexbox版)
    ナビゲーションの各項目を同じ大きさにしたい(flexbox版)
    ナビゲーションの最後の項目だけ右に配置したい(flexbox版)
    サイトや企業のロゴをヘッダーに表示させたい
    ヘッダーに検索フォームをつけたい
  13. レイアウトのテクニック
    伸縮するシングルコラムレイアウトを作成したい
    固定幅で中央揃えのシングルコラムレイアウトを作成したい
    伸縮する2コラムレイアウトを作成したい(float版)
    2コラムレイアウトの左右を入れ替えたい(float版)
    幅が固定された2コラムレイアウトを作成したい(float版)
    伸縮する2コラムレイアウトを作成したい(flexbox版)
    2コラムレイアウトの左右を入れ替えたい(flexbox版)
    伸縮する3コラムレイアウトを作成したい(float版)
    幅が固定された3コラムレイアウトを作成したい(float版)
    伸縮する3コラムレイアウトを作成したい(flexbox版)
    3コラムレイアウトの位置を入れ替えたい(flexbox版)
    伸縮するレイアウトの上限幅を決めたい
    ナビゲーションをウィンドウ上部に固定したい
    ページ下部にキャンペーンブロックを表示したい
    サイドメニューがスクロールしない2コラムレイアウトを作成したい
    フッターのコピーライトと住所をそれぞれ左揃え,右揃えにしたい(float版)
    コピーライトと住所表記をそれぞれ左揃え,右揃えにしたい(flexbox版)
    イメージの上にロゴを重ねたい
    背景画像をスクロールしないようにしたい
    フッターにサイトマップを掲載したい
    ボックスを整列して並べたい(float版)
    ボックスを整列して並べたい(flexbox版)
    多数のボックスを整列して並べたい(float版)
    多数のボックスを整列して並べたい(flexbox版)
  14. レスポンシブWebデザインに対応するテクニック
    レスポンシブWebデザインに対応するための基本マークアップ
    画面サイズに合わせてCSSを切り替えたい
    電話番号がリンクにならないようにしたい
    スマートフォン向けのファビコンを設定したい
    スマートフォンとパソコンでページ全体のフォントサイズを変更したい
    シングルコラムレイアウトを2コラムレイアウトに切り替えたい(float版)
    シングルコラムレイアウトを3コラムレイアウトに切り替えたい(flexbox版)
    ナビゲーションのデザインを変えたい(float版)
    ナビゲーションのデザインを変えたい(flexbox版)
    画面幅が広いときだけ,画像にテキストを回り込ませたい
    スマートフォンのときはテーブルを横スクロールできるようにしたい
    テーブルの見た目を見出し+本文に切り替えたい
    フォーム部品を伸縮させたい
  15. アニメーションとエフェクトのテクニック
    区切り線を引きたい
    区切り線のスタイルを変更したい
    区切り線の途中にテキストを表示したい
    区切り線をグラデーションで表現したい
    テキストにドロップシャドウをつけたい
    テキストの選択ハイライト色を指定したい
    動画ファイルを表示したい
    動画をキービジュアルにしたい
    テキストを斜めにしたい
    ホバーしたときにテキストの傾きを変えたい
    画像にホバーしたとき透明度を徐々に変化させたい
    画像にホバーしたとき画像を徐々に拡大させたい
    画像にホバーしたときに、明度が上がる効果をつけたい
    画像にホバーしたときにセピア色にする効果をつけたい
    画像にホバーしたときに浮きあがるような効果をつけたい
    画像にホバーしたときに回転させたい
    画像の色が変化するアニメーションを設定したい
    バッジが小刻みに揺れるアニメーションを設定したい

最近のWebサイトで見かけるあのテクニックは、どうやって実装するんだろう? 次のプロジェクトに使える良いアイデアがないかな? など、リファレンスとしてもアイデア帳としても使えます。
ボリュームがすごいのでお値段も、、、と思うかもしれませんが、かなり良心的なお値段だと思います。

書籍の表紙

HTML5&CSS3デザインレシピ集
[Amazonでみる]
[楽天でみる]

著:
狩野 祐東
出版社:
技術評論社
発売日:
2017/2/22

献本の御礼

最後に、献本いただいた技術評論社の担当者さまに御礼申し上げます。

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

top of page

©2017 coliss